feat(ui): use native mobile confirmation sheets (#3621)

2026-09-12 14:58:49 +02:00
parent e598742110
commit 3f33ce0451
171 changed files with 7570 additions and 1428 deletions
@@ -0,0 +1,57 @@
+import { useRef, useState } from "react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { CommandPanelDialog } from "./command-panel-dialog";
+import { MobileActionConfirmation } from "./confirmation/mobile-action-confirmation";
+
+vi.mock("@/hooks/use-responsive-breakpoint", () => ({
+  useResponsiveBreakpoint: () => ({ isMobile: true }),
+}));
+afterEach(cleanup);
+
+it("keeps the command dialog and its query while presenting one explicit decision step", () => {
+  const onConfirm = vi.fn();
+  const onKeyDown = vi.fn();
+  function Panel() {
+    const [open, setOpen] = useState(false);
+    const trigger = useRef<HTMLButtonElement>(null);
+    return (
+      <CommandPanelDialog open>
+        <div onKeyDown={onKeyDown}>
+          <input aria-label="Query" defaultValue="archive" />
+          <button ref={trigger} onClick={() => setOpen(true)}>
+            Archive command
+          </button>
+          <MobileActionConfirmation
+            open={open}
+            onOpenChange={setOpen}
+            targetKey="task"
+            title="Archive task?"
+            subject="Selected task"
+            cancelLabel="Cancel"
+            confirmLabel="Archive"
+            variant="default"
+            onConfirm={onConfirm}
+            focusReturnRef={trigger}
+          />
+        </div>
+      </CommandPanelDialog>
+    );
+  }
+  render(<Panel />);
+  const dialog = screen.getByRole("dialog");
+  const query = screen.getByRole("textbox");
+  fireEvent.change(query, { target: { value: "my query" } });
+  fireEvent.click(screen.getByRole("button", { name: "Archive command" }));
+  expect(screen.getByRole("dialog", { name: "Archive task?" })).toBe(dialog);
+  expect(screen.getAllByRole("dialog", { hidden: true })).toHaveLength(1);
+  expect(screen.getAllByRole("heading")).toHaveLength(1);
+  expect(screen.queryByRole("textbox")).toBeNull();
+  fireEvent.keyDown(screen.getByRole("group"), { key: "Enter" });
+  expect(onConfirm).not.toHaveBeenCalled();
+  expect(onKeyDown).not.toHaveBeenCalled();
+  fireEvent.keyDown(document, { key: "Escape" });
+  expect(screen.getByRole("textbox")).toBe(query);
+  expect((query as HTMLInputElement).value).toBe("my query");
+  expect(screen.getByRole("dialog")).toBe(dialog);
+});