@agent-native/toolkit 0.211.0 → 0.212.0-nightly-20261021010049

package/src/app/sharing/ShareDialog.spec.tsx

@@ -226,6 +226,56 @@ describe("ShareDialog primitive normalization", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it("keeps the Enter that picks Organization from pressing Cancel on the confirmation", async () => {
+    await renderDialog();
+    const trigger = document.querySelector<HTMLButtonElement>(
+      '[aria-label="share.generalAccess"]',
+    )!;
+    trigger.focus();
+    act(() => {
+      trigger.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "ArrowDown",
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    const organization = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="option"]'),
+    ).find((option) => option.textContent === "share.organization")!;
+    organization.focus();
+
+    const down = new KeyboardEvent("keydown", {
+      key: "Enter",
+      bubbles: true,
+      cancelable: true,
+    });
+    act(() => {
+      organization.dispatchEvent(down);
+    });
+    // The browser's keypress goes to whatever holds focus by then, and its
+    // default action presses a focused button unless it was prevented.
+    const target = document.activeElement ?? document.body;
+    if (!down.defaultPrevented) {
+      const keypress = new KeyboardEvent("keypress", {
+        key: "Enter",
+        bubbles: true,
+        cancelable: true,
+      });
+      act(() => {
+        target.dispatchEvent(keypress);
+      });
+      if (!keypress.defaultPrevented && target instanceof HTMLButtonElement) {
+        act(() => target.click());
+      }
+    }
+
+    const confirmation = document.querySelector('[role="alertdialog"]');
+    expect(confirmation).not.toBeNull();
+    expect(document.activeElement?.textContent).toBe("agentChat.common.cancel");
+  });
+
   it("closes when the overlay is pressed", async () => {
     const onClose = await renderDialog();
     const overlay = document.querySelector<HTMLElement>(

package/src/app/sharing/ShareDialog.tsx

@@ -27,10 +27,11 @@ import {
   IconUsersGroup,
   IconWorld,
 } from "@tabler/icons-react";
-import { type ReactNode } from "react";
+import { useRef, type ReactNode, type RefObject } from "react";
 
 import { AccessRequestsSection } from "./AccessRequestsSection.js";
 import { AgentShareSection } from "./AgentShareSection.js";
+import { ShareVisibilityConfirmDialog } from "./ShareVisibilityConfirmDialog.js";
 
 export interface ShareDialogProps {
   open: boolean;
@@ -43,6 +44,8 @@ export interface ShareDialogProps {
   embedUrl?: string;
   embedTabContent?: ReactNode;
   linkTabExtras?: ReactNode;
+  /** Resource-specific text added to the organization confirmation. */
+  visibilityConfirmDetail?: ReactNode;
 }
 
 const BUTTON_BASE =
@@ -73,7 +76,9 @@ export function ShareDialog({
   embedUrl,
   embedTabContent,
   linkTabExtras,
+  visibilityConfirmDetail,
 }: ShareDialogProps) {
+  const visibilityRef = useRef<HTMLElement>(null);
   const controller = useShareDialogController({
     open,
     onClose,
@@ -139,6 +144,7 @@ export function ShareDialog({
             <TabsContent value="link" className="m-0">
               <LinkTab
                 controller={controller}
+                visibilityRef={visibilityRef}
                 extras={linkTabExtras}
                 accessRequests={accessRequests}
               />
@@ -147,6 +153,7 @@ export function ShareDialog({
           {!controller.tabsEnabled || controller.activeTab === "invite" ? (
             <InviteTab
               controller={controller}
+              visibilityRef={visibilityRef}
               showVisibility={!controller.tabsEnabled}
               accessRequests={accessRequests}
             />
@@ -164,16 +171,23 @@ export function ShareDialog({
           />
         </div>
       </Tabs>
+      <ShareVisibilityConfirmDialog
+        transition={controller.visibility.transition}
+        detail={visibilityConfirmDetail}
+        returnFocusRef={visibilityRef}
+      />
     </DesignSystemDialog>
   );
 }
 
 function LinkTab({
   controller,
+  visibilityRef,
   extras,
   accessRequests,
 }: {
   controller: ShareDialogController;
+  visibilityRef: RefObject<HTMLElement | null>;
   extras?: ReactNode;
   accessRequests: ReactNode;
 }) {
@@ -200,7 +214,10 @@ function LinkTab({
             <Icon size={16} strokeWidth={1.75} />
           </span>
           <div className="min-w-0 flex-1">
-            <VisibilitySelect controller={controller} />
+            <VisibilitySelect
+              controller={controller}
+              pickerRef={visibilityRef}
+            />
             <div className="sr-only text-xs text-muted-foreground">
               {controller.visibility.description}
             </div>
@@ -209,6 +226,7 @@ function LinkTab({
       </div>
       <InviteTab
         controller={controller}
+        visibilityRef={visibilityRef}
         showVisibility={false}
         accessRequests={accessRequests}
       />
@@ -219,10 +237,12 @@ function LinkTab({
 
 function InviteTab({
   controller,
+  visibilityRef,
   showVisibility,
   accessRequests,
 }: {
   controller: ShareDialogController;
+  visibilityRef: RefObject<HTMLElement | null>;
   showVisibility: boolean;
   accessRequests: ReactNode;
 }) {
@@ -242,7 +262,10 @@ function InviteTab({
               <Icon size={16} strokeWidth={1.75} />
             </span>
             <div className="min-w-0 flex-1">
-              <VisibilitySelect controller={controller} />
+              <VisibilitySelect
+                controller={controller}
+                pickerRef={visibilityRef}
+              />
               <div className="sr-only text-xs text-muted-foreground">
                 {controller.visibility.description}
               </div>
@@ -487,22 +510,35 @@ function RoleSelect({ controller }: { controller: ShareDialogController }) {
 
 function VisibilitySelect({
   controller,
+  pickerRef,
 }: {
   controller: ShareDialogController;
+  pickerRef: RefObject<HTMLElement | null>;
 }) {
   return (
-    <Picker
-      mode="select"
-      options={controller.visibility.options}
-      value={controller.visibility.value}
-      onChange={(value) => {
-        if (value === "private" || value === "org" || value === "public") {
-          controller.visibility.set(value);
-        }
+    // React events from the picker's portaled list bubble to this wrapper
+    // after the option has selected. Enter may open a confirmation that takes
+    // focus; its keypress must not land on the button there.
+    <div
+      className="contents"
+      onKeyDown={(event) => {
+        if (event.key === "Enter") event.preventDefault();
       }}
-      disabled={controller.visibility.disabled}
-      aria-label={controller.labels.generalAccess}
-      className="-ms-1 w-auto"
-    />
+    >
+      <Picker
+        mode="select"
+        options={controller.visibility.options}
+        value={controller.visibility.value}
+        onChange={(value) => {
+          if (value === "private" || value === "org" || value === "public") {
+            controller.visibility.set(value);
+          }
+        }}
+        disabled={controller.visibility.disabled}
+        aria-label={controller.labels.generalAccess}
+        pickerRef={pickerRef}
+        className="-ms-1 w-auto"
+      />
+    </div>
   );
 }

package/src/app/sharing/ShareVisibilityConfirmDialog.spec.tsx

@@ -0,0 +1,138 @@
+// @vitest-environment happy-dom
+
+import type { ShareVisibilityTransition } from "@agent-native/core/client/sharing/useShareVisibilityTransition";
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ShareVisibilityConfirmDialog } from "./ShareVisibilityConfirmDialog.js";
+
+function makeTransition(
+  overrides: Partial<ShareVisibilityTransition> = {},
+): ShareVisibilityTransition {
+  return {
+    pending: { from: "private", to: "org" },
+    organizationName: null,
+    submitting: false,
+    error: null,
+    request: vi.fn(),
+    confirm: vi.fn(async () => undefined),
+    cancel: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("ShareVisibilityConfirmDialog", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  async function render(
+    transition: ShareVisibilityTransition,
+    props: { detail?: React.ReactNode } = {},
+  ) {
+    await act(async () => {
+      root.render(
+        <ShareVisibilityConfirmDialog transition={transition} {...props} />,
+      );
+    });
+  }
+
+  const dialog = () =>
+    document.body.querySelector<HTMLElement>('[role="alertdialog"]');
+  const button = (label: string) =>
+    Array.from(
+      document.body.querySelectorAll<HTMLButtonElement>(
+        '[role="alertdialog"] button',
+      ),
+    ).find((candidate) => candidate.textContent?.trim() === label);
+
+  it("renders nothing until a broadening change is pending", async () => {
+    await render(makeTransition({ pending: null }));
+
+    expect(dialog()).toBeNull();
+  });
+
+  it("names the organization only when it is known", async () => {
+    await render(makeTransition());
+    expect(dialog()?.textContent).toContain("Share with your organization?");
+    expect(dialog()?.textContent).toContain("Everyone in your organization");
+
+    await render(makeTransition({ organizationName: "Acme Co" }));
+    expect(dialog()?.textContent).toContain("Share with Acme Co?");
+    expect(dialog()?.textContent).toContain("Everyone in Acme Co");
+  });
+
+  it("covers every kind of content and adds resource-specific detail", async () => {
+    await render(makeTransition(), { detail: "This also shares the chat." });
+
+    expect(dialog()?.textContent).toContain(
+      "including any messages, files, and other content",
+    );
+    expect(dialog()?.textContent).toContain("This also shares the chat.");
+  });
+
+  it("opens with Cancel focused so Enter cannot widen access by accident", async () => {
+    await render(makeTransition());
+
+    expect(document.activeElement).toBe(button("Cancel"));
+  });
+
+  it("confirms only from the confirm button and cancels from Cancel and Escape", async () => {
+    const transition = makeTransition();
+    await render(transition);
+
+    act(() => button("Cancel")?.click());
+    expect(transition.cancel).toHaveBeenCalledOnce();
+    expect(transition.confirm).not.toHaveBeenCalled();
+
+    act(() => {
+      dialog()?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+    });
+    expect(transition.cancel).toHaveBeenCalledTimes(2);
+
+    act(() => button("Share with organization")?.click());
+    expect(transition.confirm).toHaveBeenCalledOnce();
+  });
+
+  it("shows progress, keeps the confirm button focusable, and blocks cancel", async () => {
+    await render(makeTransition({ submitting: true }));
+
+    const confirm = button("Sharing...");
+    expect(confirm?.getAttribute("aria-disabled")).toBe("true");
+    expect(confirm?.hasAttribute("disabled")).toBe(false);
+    expect(
+      (
+        document.body.querySelector(
+          '[role="alertdialog"] button',
+        ) as HTMLButtonElement | null
+      )?.disabled,
+    ).toBe(true);
+  });
+
+  it("shows the failure in the dialog and offers a retry", async () => {
+    const transition = makeTransition({ error: "Could not update sharing" });
+    await render(transition);
+
+    expect(
+      document.body.querySelector('[role="alertdialog"] [role="alert"]')
+        ?.textContent,
+    ).toBe("Could not update sharing");
+    act(() => button("Retry")?.click());
+    expect(transition.confirm).toHaveBeenCalledOnce();
+  });
+});

package/src/app/sharing/ShareVisibilityConfirmDialog.tsx

@@ -0,0 +1,124 @@
+import { useT } from "@agent-native/core/client/i18n";
+import type { ShareVisibilityTransition } from "@agent-native/core/client/sharing/useShareVisibilityTransition";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
+import type { ReactNode, RefObject } from "react";
+
+// ShareButton's nested overlays (the picker, member suggestions) sit at
+// z-[100020] over the popover (z-[2000]) and ShareDialog (z-[2010]); the
+// confirmation opens from the picker, so it goes just above them.
+const CONFIRM_Z_INDEX = 100030;
+
+export interface ShareVisibilityConfirmDialogProps {
+  transition: ShareVisibilityTransition;
+  /**
+   * What is specific to this resource, already translated by the caller, such
+   * as "Everyone will also see the conversation history." Shown under the
+   * generic text, which already covers messages, files and other content.
+   */
+  detail?: ReactNode;
+  /** Gets focus back when the confirmation closes (the visibility control). */
+  returnFocusRef?: RefObject<HTMLElement | null>;
+}
+
+/**
+ * Asks before a resource becomes visible to the whole organization. Pair it
+ * with the `transition` of a share controller; it renders nothing until a
+ * broadening change is waiting, and the change is saved only by Confirm.
+ */
+export function ShareVisibilityConfirmDialog({
+  transition,
+  detail,
+  returnFocusRef,
+}: ShareVisibilityConfirmDialogProps) {
+  const t = useT();
+  const { pending, organizationName, submitting, error } = transition;
+  const named = organizationName !== null;
+  const values = { organization: organizationName ?? "" };
+  const title = named
+    ? t("agentChat.share.confirmOrganizationTitleNamed", {
+        ...values,
+        defaultValue: "Share with {{organization}}?",
+      })
+    : t("agentChat.share.confirmOrganizationTitle", {
+        defaultValue: "Share with your organization?",
+      });
+  const description = named
+    ? t("agentChat.share.confirmOrganizationDescriptionNamed", {
+        ...values,
+        defaultValue:
+          "Everyone in {{organization}}, including new members, will be able to open this and see everything in it, including any messages, files, and other content. You can change this later.",
+      })
+    : t("agentChat.share.confirmOrganizationDescription", {
+        defaultValue:
+          "Everyone in your organization, including new members, will be able to open this and see everything in it, including any messages, files, and other content. You can change this later.",
+      });
+  const actionLabel = submitting
+    ? t("agentChat.share.confirmOrganizationSharing", {
+        defaultValue: "Sharing...",
+      })
+    : error
+      ? t("agentChat.common.retry", { defaultValue: "Retry" })
+      : t("agentChat.share.confirmOrganizationAction", {
+          defaultValue: "Share with organization",
+        });
+
+  return (
+    <AlertDialog
+      open={pending !== null}
+      onOpenChange={(open) => {
+        if (!open) transition.cancel();
+      }}
+    >
+      <AlertDialogContent
+        data-agent-native-share-overlay=""
+        style={{ zIndex: CONFIRM_Z_INDEX + 1 }}
+        overlayStyle={{ zIndex: CONFIRM_Z_INDEX }}
+        onCloseAutoFocus={(event) => {
+          const target = returnFocusRef?.current;
+          if (!target?.isConnected) return;
+          event.preventDefault();
+          target.focus();
+        }}
+      >
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+          {detail ? (
+            <div className="text-sm text-muted-foreground">{detail}</div>
+          ) : null}
+          {error ? (
+            <div
+              role="alert"
+              className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-start text-xs text-destructive"
+            >
+              {error}
+            </div>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={submitting}>
+            {t("agentChat.common.cancel", { defaultValue: "Cancel" })}
+          </AlertDialogCancel>
+          <Button
+            type="button"
+            aria-disabled={submitting || undefined}
+            onClick={() => {
+              void transition.confirm();
+            }}
+          >
+            {actionLabel}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}