@assistant-ui/react-native 0.1.41 → 0.1.43

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

@@ -0,0 +1,299 @@
+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>(),
+  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,
+    }),
+  };
+});
+
+(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.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");
+      });
+    });
+  }
+
+  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

@@ -6,18 +6,29 @@ 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"
+      {...pressableProps}
+    >
+      {typeof children === "function"
+        ? children({ isSubmitted, disabled })
+        : children}
     </Pressable>
   );
 };

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -6,18 +6,29 @@ 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"
+      {...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";

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

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

package/src/primitives/actionBar.ts

@@ -10,6 +10,14 @@ export {
   ActionBarReload as Reload,
   type ActionBarReloadProps as ReloadProps,
 } from "./actionBar/ActionBarReload";
+export {
+  ActionBarSpeak as Speak,
+  type ActionBarSpeakProps as SpeakProps,
+} from "./actionBar/ActionBarSpeak";
+export {
+  ActionBarStopSpeaking as StopSpeaking,
+  type ActionBarStopSpeakingProps as StopSpeakingProps,
+} from "./actionBar/ActionBarStopSpeaking";
 export {
   ActionBarFeedbackPositive as FeedbackPositive,
   type ActionBarFeedbackPositiveProps as FeedbackPositiveProps,

package/src/primitives/branchPicker/BranchPickerNext.test.tsx

@@ -8,9 +8,17 @@ const h = vi.hoisted(() => ({
   state: { disabled: false },
 }));
 
-vi.mock("@assistant-ui/core/react", () => ({
-  useBranchPickerNext: () => ({ next: h.next, disabled: h.state.disabled }),
-}));
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...actual,
+    useBranchPickerNext: () => ({
+      next: h.next,
+      disabled: h.state.disabled,
+    }),
+  };
+});
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -94,4 +102,45 @@ describe("BranchPickerNext", () => {
 
     expect(h.next).toHaveBeenCalledTimes(1);
   });
+
+  it("passes the hook disabled state and an explicit override to render children", async () => {
+    h.state.disabled = true;
+    let hookState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <BranchPickerNext testID="t">
+          {(state) => {
+            hookState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }}
+        </BranchPickerNext>,
+      );
+    });
+
+    expect(hookState).toMatchObject({ pressed: false, disabled: true });
+    expect(container.textContent).toBe("disabled");
+
+    let overrideState: unknown = null;
+
+    await act(async () => {
+      root.render(
+        <BranchPickerNext testID="t" disabled={false}>
+          {(state) => {
+            overrideState = state;
+            return state.disabled ? "disabled" : "enabled";
+          }}
+        </BranchPickerNext>,
+      );
+    });
+
+    expect(overrideState).toMatchObject({ pressed: false, disabled: false });
+    expect(container.textContent).toBe("enabled");
+  });
+
+  it("renders plain children", async () => {
+    const el = await mount();
+
+    expect(el.textContent).toBe("next");
+  });
 });

package/src/primitives/branchPicker/BranchPickerNext.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 { useBranchPickerNext } from "@assistant-ui/core/react";
 
 export type BranchPickerNextProps = Omit<
   PressableProps,
   "onPress" | "children"
 > & {
-  children: PressableProps["children"];
+  children:
+    | ReactNode
+    | ((
+        state: PressableStateCallbackType & { disabled: boolean },
+      ) => ReactNode);
 };
 
 export const BranchPickerNext = ({
@@ -14,15 +23,18 @@ export const BranchPickerNext = ({
   ...pressableProps
 }: BranchPickerNextProps) => {
   const { next, disabled } = useBranchPickerNext();
+  const isDisabled = disabledProp ?? disabled;
 
   return (
     <Pressable
       onPress={next}
-      disabled={disabledProp ?? disabled}
+      disabled={isDisabled}
       accessibilityRole="button"
       {...pressableProps}
     >
-      {children}
+      {typeof children === "function"
+        ? (state) => children({ ...state, disabled: isDisabled })
+        : children}
     </Pressable>
   );
 };