@assistant-ui/react-native 0.1.42 → 0.1.44

package/src/primitives/accessibilityRole.test.tsx

@@ -7,6 +7,8 @@ import { ActionBarEdit } from "./actionBar/ActionBarEdit";
 import { ActionBarFeedbackNegative } from "./actionBar/ActionBarFeedbackNegative";
 import { ActionBarFeedbackPositive } from "./actionBar/ActionBarFeedbackPositive";
 import { ActionBarReload } from "./actionBar/ActionBarReload";
+import { ActionBarSpeak } from "./actionBar/ActionBarSpeak";
+import { ActionBarStopSpeaking } from "./actionBar/ActionBarStopSpeaking";
 import { AttachmentRemove } from "./attachment/AttachmentRemove";
 import { BranchPickerNext } from "./branchPicker/BranchPickerNext";
 import { BranchPickerPrevious } from "./branchPicker/BranchPickerPrevious";
@@ -64,6 +66,8 @@ vi.mock("@assistant-ui/core/react", () => ({
     isSubmitted: false,
   }),
   useActionBarReload: () => ({ reload: vi.fn(), disabled: false }),
+  useActionBarSpeak: () => ({ speak: vi.fn(), disabled: false }),
+  useActionBarStopSpeaking: () => ({ stopSpeaking: vi.fn(), disabled: false }),
   useBranchPickerNext: () => ({ next: vi.fn(), disabled: false }),
   useBranchPickerPrevious: () => ({ previous: vi.fn(), disabled: false }),
   useComposerAddAttachment: () => ({ disabled: false }),
@@ -134,6 +138,22 @@ const actionable: ReadonlyArray<{
       </ActionBarReload>
     ),
   },
+  {
+    name: "ActionBarSpeak",
+    render: (e) => (
+      <ActionBarSpeak testID="t" {...e}>
+        x
+      </ActionBarSpeak>
+    ),
+  },
+  {
+    name: "ActionBarStopSpeaking",
+    render: (e) => (
+      <ActionBarStopSpeaking testID="t" {...e}>
+        x
+      </ActionBarStopSpeaking>
+    ),
+  },
   {
     name: "AttachmentRemove",
     render: (e) => (

package/src/primitives/actionBar/ActionBar.test.tsx

@@ -0,0 +1,375 @@
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ActionBarCopy } from "./ActionBarCopy";
+import { ActionBarEdit } from "./ActionBarEdit";
+import { ActionBarFeedbackNegative } from "./ActionBarFeedbackNegative";
+import { ActionBarFeedbackPositive } from "./ActionBarFeedbackPositive";
+import { ActionBarReload } from "./ActionBarReload";
+import { ActionBarSpeak } from "./ActionBarSpeak";
+import { ActionBarStopSpeaking } from "./ActionBarStopSpeaking";
+
+const h = vi.hoisted(() => ({
+  copy: vi.fn<() => void>(),
+  edit: vi.fn<() => void>(),
+  feedbackNegative: vi.fn<() => void>(),
+  feedbackPositive: vi.fn<() => void>(),
+  reload: vi.fn<() => void>(),
+  speak: vi.fn<() => Promise<void>>(),
+  stopSpeaking: vi.fn<() => void>(),
+  platform: { os: "web" },
+  state: {
+    copy: { disabled: false, isCopied: false },
+    edit: { disabled: false },
+    feedbackNegative: { isSubmitted: false },
+    feedbackPositive: { isSubmitted: false },
+    reload: { disabled: false },
+    speak: { disabled: false },
+    stopSpeaking: { disabled: false },
+  },
+}));
+
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...actual,
+    useActionBarCopy: () => ({
+      copy: h.copy,
+      disabled: h.state.copy.disabled,
+      isCopied: h.state.copy.isCopied,
+    }),
+    useActionBarEdit: () => ({ edit: h.edit, disabled: h.state.edit.disabled }),
+    useActionBarFeedbackNegative: () => ({
+      submit: h.feedbackNegative,
+      isSubmitted: h.state.feedbackNegative.isSubmitted,
+    }),
+    useActionBarFeedbackPositive: () => ({
+      submit: h.feedbackPositive,
+      isSubmitted: h.state.feedbackPositive.isSubmitted,
+    }),
+    useActionBarReload: () => ({
+      reload: h.reload,
+      disabled: h.state.reload.disabled,
+    }),
+    useActionBarSpeak: () => ({
+      speak: h.speak,
+      disabled: h.state.speak.disabled,
+    }),
+    useActionBarStopSpeaking: () => ({
+      stopSpeaking: h.stopSpeaking,
+      disabled: h.state.stopSpeaking.disabled,
+    }),
+  };
+});
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown> & {
+    Platform: Record<string, unknown>;
+  };
+  return {
+    ...actual,
+    Platform: {
+      ...actual.Platform,
+      get OS() {
+        return h.platform.os;
+      },
+    },
+  };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const click = (el: Element) =>
+  el.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true }),
+  );
+
+type DisabledChildren = (state: { disabled: boolean }) => ReactNode;
+
+type ActionBarTestCase = {
+  name: string;
+  disabledState?: { disabled: boolean };
+  render: (
+    children: ReactNode | DisabledChildren,
+    disabled?: boolean,
+  ) => ReactNode;
+};
+
+const actionBars: ActionBarTestCase[] = [
+  {
+    name: "ActionBarCopy",
+    disabledState: h.state.copy,
+    render: (children, disabled) => (
+      <ActionBarCopy
+        testID="t"
+        {...(disabled === undefined ? {} : { disabled })}
+      >
+        {children}
+      </ActionBarCopy>
+    ),
+  },
+  {
+    name: "ActionBarEdit",
+    disabledState: h.state.edit,
+    render: (children, disabled) => (
+      <ActionBarEdit
+        testID="t"
+        {...(disabled === undefined ? {} : { disabled })}
+      >
+        {children}
+      </ActionBarEdit>
+    ),
+  },
+  {
+    name: "ActionBarFeedbackNegative",
+    render: (children, disabled) => (
+      <ActionBarFeedbackNegative
+        testID="t"
+        {...(disabled === undefined ? {} : { disabled })}
+      >
+        {children}
+      </ActionBarFeedbackNegative>
+    ),
+  },
+  {
+    name: "ActionBarFeedbackPositive",
+    render: (children, disabled) => (
+      <ActionBarFeedbackPositive
+        testID="t"
+        {...(disabled === undefined ? {} : { disabled })}
+      >
+        {children}
+      </ActionBarFeedbackPositive>
+    ),
+  },
+  {
+    name: "ActionBarReload",
+    disabledState: h.state.reload,
+    render: (children, disabled) => (
+      <ActionBarReload
+        testID="t"
+        {...(disabled === undefined ? {} : { disabled })}
+      >
+        {children}
+      </ActionBarReload>
+    ),
+  },
+  {
+    name: "ActionBarSpeak",
+    disabledState: h.state.speak,
+    render: (children, disabled) => (
+      <ActionBarSpeak
+        testID="t"
+        {...(disabled === undefined ? {} : { disabled })}
+      >
+        {children}
+      </ActionBarSpeak>
+    ),
+  },
+  {
+    name: "ActionBarStopSpeaking",
+    disabledState: h.state.stopSpeaking,
+    render: (children, disabled) => (
+      <ActionBarStopSpeaking
+        testID="t"
+        {...(disabled === undefined ? {} : { disabled })}
+      >
+        {children}
+      </ActionBarStopSpeaking>
+    ),
+  },
+];
+
+describe("ActionBar", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.copy.mockReset();
+    h.edit.mockReset();
+    h.feedbackNegative.mockReset();
+    h.feedbackPositive.mockReset();
+    h.reload.mockReset();
+    h.speak.mockReset();
+    h.stopSpeaking.mockReset();
+    h.platform.os = "web";
+    h.state.copy.disabled = false;
+    h.state.copy.isCopied = false;
+    h.state.edit.disabled = false;
+    h.state.feedbackNegative.isSubmitted = false;
+    h.state.feedbackPositive.isSubmitted = false;
+    h.state.reload.disabled = false;
+    h.state.speak.disabled = false;
+    h.state.stopSpeaking.disabled = false;
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const mount = async (node: ReactNode) => {
+    await act(async () => {
+      root.render(node);
+    });
+    return container.querySelector('[data-testid="t"]') as HTMLElement;
+  };
+
+  for (const actionBar of actionBars) {
+    describe(actionBar.name, () => {
+      it("passes the effective disabled state to render children", async () => {
+        if (actionBar.disabledState) {
+          actionBar.disabledState.disabled = true;
+        }
+
+        let initialState: { disabled: boolean } | null = null;
+        const initialEl = await mount(
+          actionBar.render((state) => {
+            initialState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }),
+        );
+
+        expect(initialEl.textContent).toBe(
+          actionBar.disabledState ? "disabled" : "enabled",
+        );
+        expect(initialState).toMatchObject({
+          disabled: actionBar.disabledState ? true : false,
+        });
+
+        let propState: { disabled: boolean } | null = null;
+        const propEl = await mount(
+          actionBar.render((state) => {
+            propState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }, !actionBar.disabledState),
+        );
+
+        expect(propEl.textContent).toBe(
+          actionBar.disabledState ? "enabled" : "disabled",
+        );
+        expect(propState).toMatchObject({
+          disabled: !actionBar.disabledState,
+        });
+      });
+
+      it("renders plain children", async () => {
+        const el = await mount(actionBar.render("label"));
+
+        expect(el.textContent).toBe("label");
+      });
+    });
+  }
+
+  const feedbackActionBars = [
+    {
+      name: "ActionBarFeedbackNegative",
+      state: h.state.feedbackNegative,
+      render: (extra: { "aria-selected"?: boolean }) => (
+        <ActionBarFeedbackNegative testID="t" {...extra}>
+          x
+        </ActionBarFeedbackNegative>
+      ),
+    },
+    {
+      name: "ActionBarFeedbackPositive",
+      state: h.state.feedbackPositive,
+      render: (extra: { "aria-selected"?: boolean }) => (
+        <ActionBarFeedbackPositive testID="t" {...extra}>
+          x
+        </ActionBarFeedbackPositive>
+      ),
+    },
+  ];
+
+  for (const { name, state, render } of feedbackActionBars) {
+    describe(name, () => {
+      it("marks submitted feedback pressed on the web", async () => {
+        state.isSubmitted = true;
+
+        const el = await mount(render({}));
+
+        expect(el.getAttribute("aria-pressed")).toBe("true");
+        expect(el.hasAttribute("aria-selected")).toBe(false);
+      });
+
+      it("does not mark unsubmitted feedback pressed on the web", async () => {
+        const el = await mount(render({}));
+
+        expect(el.getAttribute("aria-pressed")).toBe("false");
+      });
+
+      it("marks submitted feedback selected on native", async () => {
+        h.platform.os = "ios";
+        state.isSubmitted = true;
+
+        const el = await mount(render({}));
+
+        expect(el.getAttribute("aria-selected")).toBe("true");
+        expect(el.hasAttribute("aria-pressed")).toBe(false);
+      });
+
+      it("keeps a caller selected override on native", async () => {
+        h.platform.os = "ios";
+        state.isSubmitted = true;
+
+        const el = await mount(render({ "aria-selected": false }));
+
+        expect(el.getAttribute("aria-selected")).toBe("false");
+      });
+    });
+  }
+
+  it("calls speak on press", async () => {
+    const el = await mount(<ActionBarSpeak testID="t">speak</ActionBarSpeak>);
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.speak).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call speak while the hook disables it", async () => {
+    h.state.speak.disabled = true;
+    const el = await mount(<ActionBarSpeak testID="t">speak</ActionBarSpeak>);
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.speak).not.toHaveBeenCalled();
+  });
+
+  it("calls stopSpeaking on press", async () => {
+    const el = await mount(
+      <ActionBarStopSpeaking testID="t">stop</ActionBarStopSpeaking>,
+    );
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.stopSpeaking).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call stopSpeaking while the hook disables it", async () => {
+    h.state.stopSpeaking.disabled = true;
+    const el = await mount(
+      <ActionBarStopSpeaking testID="t">stop</ActionBarStopSpeaking>,
+    );
+
+    await act(async () => {
+      click(el);
+    });
+
+    expect(h.stopSpeaking).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -7,7 +7,9 @@ import {
 
 export type ActionBarCopyProps = Omit<PressableProps, "onPress" | "children"> &
   UseActionBarCopyOptions & {
-    children: ReactNode | ((props: { isCopied: boolean }) => ReactNode);
+    children:
+      | ReactNode
+      | ((props: { isCopied: boolean; disabled: boolean }) => ReactNode);
   };
 
 export const ActionBarCopy = ({
@@ -21,15 +23,18 @@ export const ActionBarCopy = ({
     copiedDuration,
     copyToClipboard,
   });
+  const isDisabled = disabledProp ?? disabled;
 
   return (
     <Pressable
       onPress={copy}
-      disabled={disabledProp ?? disabled}
+      disabled={isDisabled}
       accessibilityRole="button"
       {...pressableProps}
     >
-      {typeof children === "function" ? children({ isCopied }) : children}
+      {typeof children === "function"
+        ? children({ isCopied, disabled: isDisabled })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/actionBar/ActionBarEdit.tsx

@@ -1,11 +1,20 @@
-import { Pressable, type PressableProps } from "react-native";
+import type { ReactNode } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
 import { useActionBarEdit } from "@assistant-ui/core/react";
 
 export type ActionBarEditProps = Omit<
   PressableProps,
   "onPress" | "children"
 > & {
-  children: PressableProps["children"];
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { disabled: boolean },
+      ) => ReactNode);
 };
 
 export const ActionBarEdit = ({
@@ -14,15 +23,18 @@ export const ActionBarEdit = ({
   ...pressableProps
 }: ActionBarEditProps) => {
   const { edit, disabled } = useActionBarEdit();
+  const isDisabled = disabledProp ?? disabled;
 
   return (
     <Pressable
       onPress={edit}
-      disabled={disabledProp ?? disabled}
+      disabled={isDisabled}
       accessibilityRole="button"
       {...pressableProps}
     >
-      {children}
+      {typeof children === "function"
+        ? (state) => children({ ...state, disabled: isDisabled })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -1,23 +1,37 @@
 import type { ReactNode } from "react";
-import { Pressable, type PressableProps } from "react-native";
+import { Platform, Pressable, type PressableProps } from "react-native";
 import { useActionBarFeedbackNegative } from "@assistant-ui/core/react";
 
 export type ActionBarFeedbackNegativeProps = Omit<
   PressableProps,
   "onPress" | "children"
 > & {
-  children: ReactNode | ((props: { isSubmitted: boolean }) => ReactNode);
+  children:
+    | ReactNode
+    | ((props: { isSubmitted: boolean; disabled: boolean }) => ReactNode);
 };
 
 export const ActionBarFeedbackNegative = ({
   children,
+  disabled: disabledProp,
   ...pressableProps
 }: ActionBarFeedbackNegativeProps) => {
   const { submit, isSubmitted } = useActionBarFeedbackNegative();
+  const disabled = disabledProp ?? false;
 
   return (
-    <Pressable onPress={submit} accessibilityRole="button" {...pressableProps}>
-      {typeof children === "function" ? children({ isSubmitted }) : children}
+    <Pressable
+      onPress={submit}
+      disabled={disabledProp}
+      accessibilityRole="button"
+      {...(Platform.OS === "web"
+        ? { "aria-pressed": isSubmitted }
+        : { "aria-selected": isSubmitted })}
+      {...pressableProps}
+    >
+      {typeof children === "function"
+        ? children({ isSubmitted, disabled })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -1,23 +1,37 @@
 import type { ReactNode } from "react";
-import { Pressable, type PressableProps } from "react-native";
+import { Platform, Pressable, type PressableProps } from "react-native";
 import { useActionBarFeedbackPositive } from "@assistant-ui/core/react";
 
 export type ActionBarFeedbackPositiveProps = Omit<
   PressableProps,
   "onPress" | "children"
 > & {
-  children: ReactNode | ((props: { isSubmitted: boolean }) => ReactNode);
+  children:
+    | ReactNode
+    | ((props: { isSubmitted: boolean; disabled: boolean }) => ReactNode);
 };
 
 export const ActionBarFeedbackPositive = ({
   children,
+  disabled: disabledProp,
   ...pressableProps
 }: ActionBarFeedbackPositiveProps) => {
   const { submit, isSubmitted } = useActionBarFeedbackPositive();
+  const disabled = disabledProp ?? false;
 
   return (
-    <Pressable onPress={submit} accessibilityRole="button" {...pressableProps}>
-      {typeof children === "function" ? children({ isSubmitted }) : children}
+    <Pressable
+      onPress={submit}
+      disabled={disabledProp}
+      accessibilityRole="button"
+      {...(Platform.OS === "web"
+        ? { "aria-pressed": isSubmitted }
+        : { "aria-selected": isSubmitted })}
+      {...pressableProps}
+    >
+      {typeof children === "function"
+        ? children({ isSubmitted, disabled })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -1,11 +1,20 @@
-import { Pressable, type PressableProps } from "react-native";
+import type { ReactNode } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
 import { useActionBarReload } from "@assistant-ui/core/react";
 
 export type ActionBarReloadProps = Omit<
   PressableProps,
   "onPress" | "children"
 > & {
-  children: PressableProps["children"];
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { disabled: boolean },
+      ) => ReactNode);
 };
 
 export const ActionBarReload = ({
@@ -14,15 +23,18 @@ export const ActionBarReload = ({
   ...pressableProps
 }: ActionBarReloadProps) => {
   const { reload, disabled } = useActionBarReload();
+  const isDisabled = disabledProp ?? disabled;
 
   return (
     <Pressable
       onPress={reload}
-      disabled={disabledProp ?? disabled}
+      disabled={isDisabled}
       accessibilityRole="button"
       {...pressableProps}
     >
-      {children}
+      {typeof children === "function"
+        ? (state) => children({ ...state, disabled: isDisabled })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/actionBar/ActionBarSpeak.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import {
+  Pressable,
+  type PressableProps,
+  type PressableStateCallbackType,
+} from "react-native";
+import { useActionBarSpeak } from "@assistant-ui/core/react";
+
+export type ActionBarSpeakProps = Omit<
+  PressableProps,
+  "children" | "onPress"
+> & {
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { disabled: boolean },
+      ) => ReactNode);
+};
+
+export const ActionBarSpeak = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: ActionBarSpeakProps) => {
+  const { speak, disabled } = useActionBarSpeak();
+  const isDisabled = disabledProp ?? disabled;
+
+  return (
+    <Pressable
+      onPress={() => void speak()}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
+      {typeof children === "function"
+        ? (state) => children({ ...state, disabled: isDisabled })
+        : children}
+    </Pressable>
+  );
+};
+
+ActionBarSpeak.displayName = "ActionBarPrimitive.Speak";