@suphark/ui 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.4.2] — 2026-09-19
+
+### Added
+
+- **`ConfirmDialog`** (barrel) — กล่องยืนยันมาตรฐานบน `AlertDialog` ของแพ็กเกจ ใช้แทน `window.confirm` (webview/automation บางตัวปิด window.confirm ทิ้ง กดแล้วไม่เกิดอะไร และไม่เข้า design system): controlled `open`/`onOpenChange`, `title?` (ค่าเริ่มต้น `UiText.confirmTitle`), `description`, `confirmLabel?` (ค่าเริ่มต้น `UiText.confirm`), `cancelLabel?`, `destructive` (ปุ่มยืนยันสีแดง), `pending` (ปุ่มหมุน + ปิดไม่ได้ชั่วคราว), `onConfirm`; พร้อม type `ConfirmSpec` (= `string | { title?, description, confirmLabel?, cancelLabel? }`) และ `normalizeConfirm()`
+- **`ConfirmActionButton`** (`@suphark/ui/next`) — ปุ่มเดี่ยว + ConfirmDialog + server action ในตัว (`confirm`, `action`, `data`, `onDone?` + props ของ ActionButton เช่น `variant`/`icon`/`permission`) รอ action เสร็จแล้ว `router.refresh()` — ใช้แทน `<form action>` + window.confirm ที่ Pi Auth มี (ชื่อไม่ใช้ `ConfirmButton` เพราะมีปุ่มธรรมดาชื่อนั้นอยู่แล้วใน standard buttons)
+- `UiText.confirm` / `UiText.confirmTitle` (optional มีค่าเริ่มต้นไทย/อังกฤษ) — แอปที่ส่ง UiText เองไม่ต้องเพิ่ม
+- export type `RowActionItem` (รายการที่ไม่ใช่ separator)
+
+### Changed
+
+- **`RowActions` / `RowMenu` prop `confirm`** เปิด `ConfirmDialog` แทน `window.confirm` (ขอจาก Pi Auth ผ่าน Pi Mail) — รับ `ConfirmSpec`: string เดิมยังใช้ได้ (= description, title/ปุ่มค่าเริ่มต้น) หรือ object กำหนด `title`/`confirmLabel`/`cancelLabel`; ปุ่มยืนยันสีแดงเมื่อ `destructive`; dropdown ปิดก่อน dialog เปิด และ dialog render นอก DropdownMenu (กัน focus trap ของ Base UI ชนกัน); กดยืนยันแล้วค่อยรัน `href`/`onSelect`/`action` ใน transition เหมือนเดิม — โค้ดเรียกเดิมไม่ต้องแก้
+- ไม่มี `window.confirm` เหลือในแพ็กเกจ
+- showcase: หน้า `/components/confirm-dialog` (ConfirmDialog + ConfirmActionButton) และ `/components/row-actions` ใช้ confirm แบบ object
+
 ## [0.4.1] — 2026-09-19
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/shared/button/confirm-action-button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import {
+  ConfirmDialog,
+  type ConfirmSpec,
+  normalizeConfirm,
+} from "@suphark/ui/components/shared/confirm-dialog";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+
+/**
+ * ปุ่มเดี่ยวที่ถามยืนยัน (ConfirmDialog) ก่อนเรียก server action — ใช้แทน `<form action>` + window.confirm
+ * `confirm` เหมือน `RowAction.confirm`; `action` + `data` เหมือน RowAction; refresh หน้าเมื่อเสร็จ
+ * ต้องการ next/navigation → export จาก `@suphark/ui/next`
+ */
+export function ConfirmActionButton({
+  confirm,
+  action,
+  data,
+  onDone,
+  variant,
+  children,
+  ...props
+}: Omit<ActionButtonProps, "onClick" | "isLoading" | "type"> & {
+  confirm: ConfirmSpec;
+  action: (formData: FormData) => Promise<unknown>;
+  data?: Record<string, string>;
+  /** เรียกหลัง action สำเร็จ (ก่อน refresh) เช่น toast */
+  onDone?: () => void;
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [pending, start] = useTransition();
+  const spec = normalizeConfirm(confirm);
+  const destructive = variant === "destructive";
+  return (
+    <>
+      <ActionButton
+        type="button"
+        variant={variant}
+        isLoading={pending}
+        onClick={() => setOpen(true)}
+        {...props}
+      >
+        {children}
+      </ActionButton>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title={spec.title}
+        description={spec.description}
+        confirmLabel={spec.confirmLabel}
+        cancelLabel={spec.cancelLabel}
+        destructive={destructive}
+        pending={pending}
+        onConfirm={() => {
+          const fd = new FormData();
+          for (const [k, v] of Object.entries(data ?? {})) fd.set(k, v);
+          start(async () => {
+            await action(fd);
+            onDone?.();
+            setOpen(false);
+            router.refresh();
+          });
+        }}
+      />
+    </>
+  );
+}

package/src/components/shared/confirm-dialog.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@suphark/ui/components/ui/alert-dialog";
+import { Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
+import { useUiText } from "./ui-text";
+
+/** สเปกการยืนยัน — string = description อย่างเดียว (title/ปุ่มใช้ค่าเริ่มต้นจาก UiText) */
+export type ConfirmSpec =
+  | string
+  | {
+      title?: ReactNode;
+      description: ReactNode;
+      confirmLabel?: string;
+      cancelLabel?: string;
+    };
+
+/** แปลง ConfirmSpec เป็น object เสมอ */
+export function normalizeConfirm(spec: ConfirmSpec): Exclude<ConfirmSpec, string> {
+  return typeof spec === "string" ? { description: spec } : spec;
+}
+
+/**
+ * กล่องยืนยันมาตรฐานของแพ็กเกจ (AlertDialog) — ใช้แทน `window.confirm` ทุกที่
+ * (webview/automation บางตัวปิด window.confirm ทิ้ง กดแล้วไม่เกิดอะไร และไม่เข้า design system)
+ * controlled: `open`/`onOpenChange`; `pending` = กำลังรัน action → ปุ่มยืนยันหมุน ปิดไม่ได้ชั่วคราว
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  destructive = false,
+  pending = false,
+  onConfirm,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: ReactNode;
+  description: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** ปุ่มยืนยันสีแดง (ลบ/เพิกถอน) */
+  destructive?: boolean;
+  pending?: boolean;
+  onConfirm: () => void;
+}) {
+  const text = useUiText();
+  return (
+    <AlertDialog open={open} onOpenChange={(o) => !pending && onOpenChange(o)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title ?? text.confirmTitle ?? "ยืนยันการทำรายการ"}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>{cancelLabel ?? text.cancel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={destructive ? "destructive" : "default"}
+            disabled={pending}
+            onClick={onConfirm}
+          >
+            {pending && <Loader2 className="animate-spin" aria-hidden="true" />}
+            {confirmLabel ?? text.confirm ?? "ยืนยัน"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/shared/row-actions.tsx

@@ -11,83 +11,110 @@ import {
 import { MoreHorizontalIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
+import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
-export type RowAction =
-  | {
-      type?: "item";
-      label: string;
-      href?: string;
-      onSelect?: () => void;
-      destructive?: boolean;
-      confirm?: string;
-      action?: (formData: FormData) => Promise<unknown>;
-      data?: Record<string, string>;
-      disabled?: boolean;
-    }
-  | { type: "separator" };
+export type RowActionItem = {
+  type?: "item";
+  label: string;
+  href?: string;
+  onSelect?: () => void;
+  destructive?: boolean;
+  /** ถามยืนยันก่อน (ConfirmDialog ของแพ็กเกจ — ไม่ใช่ window.confirm): string = ข้อความ หรือ object กำหนด title/ปุ่ม */
+  confirm?: ConfirmSpec;
+  action?: (formData: FormData) => Promise<unknown>;
+  data?: Record<string, string>;
+  disabled?: boolean;
+};
+
+export type RowAction = RowActionItem | { type: "separator" };
 
 /**
  * เมนู "…" ท้ายแถว — รวมการกระทำรองไว้ที่เดียวแทนปุ่ม/ฟอร์มหลายอันในแถว
  * รายการเรียก server action ได้โดยตรง (`action` + `data`) หรือไปหน้าอื่น (`href`) หรือเปิด dialog (`onSelect`)
- * `confirm` = ถามยืนยันก่อน (ใช้กับสิ่งที่ย้อนกลับไม่ได้)
+ * `confirm` = ถามยืนยันก่อนด้วย ConfirmDialog (ใช้กับสิ่งที่ย้อนกลับไม่ได้) — dialog render นอก DropdownMenu กัน focus trap ชนกัน
  */
 export function RowActions({ items, label }: { items: RowAction[]; label?: string }) {
   const router = useRouter();
   const text = useUiText();
   const [pending, start] = useTransition();
   const [open, setOpen] = useState(false);
+  const [confirming, setConfirming] = useState<RowActionItem | null>(null);
+
+  function run(it: RowActionItem) {
+    if (it.href) {
+      router.push(it.href);
+      return;
+    }
+    if (it.onSelect) {
+      it.onSelect();
+      return;
+    }
+    if (it.action) {
+      const fd = new FormData();
+      for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
+      const act = it.action;
+      start(async () => {
+        await act(fd);
+        router.refresh();
+      });
+    }
+  }
+
+  const spec = confirming?.confirm ? normalizeConfirm(confirming.confirm) : null;
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger
-        render={
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label={label ?? text.actions}
-            disabled={pending}
-          />
-        }
-      >
-        <MoreHorizontalIcon />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-52">
-        {items.map((it, i) =>
-          it.type === "separator" ? (
-            // biome-ignore lint/suspicious/noArrayIndexKey: separator ไม่มี identity
-            <DropdownMenuSeparator key={`sep-${i}`} />
-          ) : (
-            <DropdownMenuItem
-              key={it.label}
-              variant={it.destructive ? "destructive" : "default"}
-              disabled={it.disabled}
-              onClick={() => {
-                setOpen(false);
-                if (it.confirm && !window.confirm(it.confirm)) return;
-                if (it.href) {
-                  router.push(it.href);
-                  return;
-                }
-                if (it.onSelect) {
-                  it.onSelect();
-                  return;
-                }
-                if (it.action) {
-                  const fd = new FormData();
-                  for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
-                  const run = it.action;
-                  start(async () => {
-                    await run(fd);
-                    router.refresh();
-                  });
-                }
-              }}
-            >
-              {it.label}
-            </DropdownMenuItem>
-          ),
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label={label ?? text.actions}
+              disabled={pending}
+            />
+          }
+        >
+          <MoreHorizontalIcon />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-52">
+          {items.map((it, i) =>
+            it.type === "separator" ? (
+              // biome-ignore lint/suspicious/noArrayIndexKey: separator ไม่มี identity
+              <DropdownMenuSeparator key={`sep-${i}`} />
+            ) : (
+              <DropdownMenuItem
+                key={it.label}
+                variant={it.destructive ? "destructive" : "default"}
+                disabled={it.disabled}
+                onClick={() => {
+                  setOpen(false);
+                  if (it.confirm) setConfirming(it);
+                  else run(it);
+                }}
+              >
+                {it.label}
+              </DropdownMenuItem>
+            ),
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {spec && confirming && (
+        <ConfirmDialog
+          open
+          onOpenChange={(o) => !o && setConfirming(null)}
+          title={spec.title}
+          description={spec.description}
+          confirmLabel={spec.confirmLabel}
+          cancelLabel={spec.cancelLabel}
+          destructive={confirming.destructive}
+          onConfirm={() => {
+            const it = confirming;
+            setConfirming(null);
+            run(it);
+          }}
+        />
+      )}
+    </>
   );
 }

package/src/components/shared/ui-text.tsx

@@ -14,6 +14,10 @@ export interface UiText {
   success: string;
   /** EnvSnippet: คัดลอกอัตโนมัติไม่ได้ (optional — มีค่าเริ่มต้นในตัว) */
   copyFailed?: string;
+  /** ConfirmDialog: ปุ่มยืนยัน (optional — ค่าเริ่มต้น "ยืนยัน") */
+  confirm?: string;
+  /** ConfirmDialog: หัวกล่อง (optional — ค่าเริ่มต้น "ยืนยันการทำรายการ") */
+  confirmTitle?: string;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -26,6 +30,8 @@ export const UI_TEXT_TH: UiText = {
   showOnce: "แสดงครั้งเดียว — คัดลอกเก็บไว้ทันที",
   success: "สำเร็จ",
   copyFailed: "คัดลอกอัตโนมัติไม่ได้ — เลือกข้อความให้แล้ว กด Ctrl+C / ⌘C",
+  confirm: "ยืนยัน",
+  confirmTitle: "ยืนยันการทำรายการ",
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -38,6 +44,8 @@ export const UI_TEXT_EN: UiText = {
   showOnce: "Shown once — copy it now",
   success: "Done",
   copyFailed: "Automatic copy is blocked — text selected, press Ctrl+C / ⌘C",
+  confirm: "Confirm",
+  confirmTitle: "Please confirm",
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/index.ts

@@ -16,6 +16,11 @@ export { toast } from "sonner";
 export * from "./components/shared/button";
 export { ClientRedirect } from "./components/shared/client-redirect";
 export { Combobox } from "./components/shared/combobox";
+export {
+  ConfirmDialog,
+  type ConfirmSpec,
+  normalizeConfirm,
+} from "./components/shared/confirm-dialog";
 export { DataList, DataRow } from "./components/shared/data-list";
 export { DateRangePicker } from "./components/shared/date/date-range-picker";
 export { DescriptionList } from "./components/shared/description-list";

package/src/next.ts

@@ -6,6 +6,7 @@
 // ---------- app shell (sidebar + header + เนื้อหา) ----------
 export * from "./components/app-shell";
 export { LinkButton, type LinkButtonProps } from "./components/shared/button/base/link-button";
+export { ConfirmActionButton } from "./components/shared/button/confirm-action-button";
 export { RefreshButton } from "./components/shared/button/refresh-button";
 export { FormDialog } from "./components/shared/form-dialog";
 export { PageShell } from "./components/shared/layout/page-shell";
@@ -14,7 +15,7 @@ export {
   PageBreadcrumb,
   type PageBreadcrumbItem,
 } from "./components/shared/navigation/page-breadcrumb";
-export { type RowAction, RowActions } from "./components/shared/row-actions";
+export { type RowAction, type RowActionItem, RowActions } from "./components/shared/row-actions";
 export { RowMenu, type RowMenuDialog, type RowMenuItem } from "./components/shared/row-menu";
 export {
   TABLE_PARAM,