@suphark/ui 0.26.0 → 0.27.0

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   Dialog,
   DialogClose,

package/src/components/shared/simple-pagination.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { cn } from "@suphark/ui/lib/utils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useUiText } from "./ui-text";

package/src/components/shared/simple-tooltip.tsx

@@ -11,12 +11,14 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ReactElement, ReactNode } from "react";
+import { ButtonTooltipSuppress } from "./button/button";
 
 type Side = "top" | "bottom" | "left" | "right";
 
 /**
  * tooltip สำเร็จรูป: ห่อ element เดียว + ข้อความ (แทน Tooltip/TooltipTrigger/TooltipContent 3 ชิ้น)
  * `content` ว่าง = ไม่มี tooltip (ไม่ต้องเขียนเงื่อนไขเอง) · ปุ่มไอคอนอย่างเดียวยังต้องมี aria-label ของตัวเอง
+ * ปุ่มไอคอน (`Button` + `aria-label`) **ไม่ต้องห่อตัวนี้แล้ว** ตั้งแต่ 0.27.0 — ห่อได้ถ้าอยากใช้ข้อความอื่น
  * คำอธิบายยาวหลังไอคอน (i) ใช้ `InfoHint`
  *
  *   <SimpleTooltip content="คัดลอกลิงก์"><Button size="icon" aria-label="คัดลอกลิงก์"><Copy /></Button></SimpleTooltip>
@@ -34,13 +36,16 @@ export function SimpleTooltip({
   className?: string;
 }) {
   if (content === null || content === undefined || content === "") return children;
+  // ลูกที่เป็น `Button` ของแพ็กเกจจะไม่สร้าง tooltip อัตโนมัติซ้อนขึ้นมาอีกชั้น
   return (
-    <Tooltip>
-      <TooltipTrigger render={children} />
-      <TooltipContent side={side} className={cn("max-w-xs text-pretty", className)}>
-        {content}
-      </TooltipContent>
-    </Tooltip>
+    <ButtonTooltipSuppress>
+      <Tooltip>
+        <TooltipTrigger render={children} />
+        <TooltipContent side={side} className={cn("max-w-xs text-pretty", className)}>
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </ButtonTooltipSuppress>
   );
 }
 

package/src/components/shared/step-form.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@suphark/ui/components/ui/button";
 import { Spinner } from "@suphark/ui/components/ui/spinner";
+import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { cn } from "@suphark/ui/lib/utils";
 import { CheckIcon } from "lucide-react";
 import { type FormEvent, type ReactNode, useEffect, useRef, useState } from "react";
@@ -19,6 +20,21 @@ export interface StepFormStep {
 
 const CONTROLS = "input, select, textarea";
 
+const FOCUSABLE = 'input, select, textarea, button, [tabindex]:not([tabindex="-1"])';
+
+/** สิ่งที่โฟกัสได้ (มองเห็น ไม่ใช่ตัวแทนที่ซ่อน) ตัวก่อนหน้าที่ใกล้ `el` ที่สุดในกล่อง */
+function precedingFocusable(section: HTMLElement, el: Element): HTMLElement | undefined {
+  const all = [...section.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(
+    (c) =>
+      c !== el &&
+      c.getAttribute("aria-hidden") !== "true" &&
+      (c as HTMLInputElement).type !== "hidden" &&
+      !(c as HTMLButtonElement).disabled &&
+      c.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING,
+  );
+  return all[all.length - 1];
+}
+
 /**
  * ตรวจ constraint ของ input ในกล่อง (required, pattern, min…) — แสดง bubble ของเบราว์เซอร์ที่ช่องแรกที่ผิด
  * input ที่ซ่อนไว้ (ตัวแทนของ Base UI เช่น NumberField, aria-hidden) แสดง bubble ไม่ได้ → คืนข้อความให้แสดงใต้ฟอร์มแทน
@@ -27,16 +43,13 @@ const CONTROLS = "input, select, textarea";
 function reportSection(section: HTMLElement | null): true | false | string {
   if (!section) return true;
   const controls = [...section.querySelectorAll<HTMLInputElement>(CONTROLS)];
-  for (const [i, el] of controls.entries()) {
+  for (const el of controls) {
     if (el.type === "hidden" || el.disabled) continue;
     if (!el.checkValidity()) {
       if (el.getAttribute("aria-hidden") === "true") {
-        // input ซ่อนของ Base UI อยู่ถัดจากช่องที่มองเห็นของมัน → โฟกัสช่องที่มองเห็นตัวก่อนหน้าที่ใกล้ที่สุด
-        controls
-          .slice(0, i)
-          .reverse()
-          .find((c) => c.getAttribute("aria-hidden") !== "true" && c.type !== "hidden")
-          ?.focus();
+        // input ซ่อนของ Base UI (NumberField/Select/Checkbox/Switch/Radio) อยู่ถัดจากตัวควบคุมที่มองเห็นของมัน
+        // → โฟกัสสิ่งที่โฟกัสได้ตัวก่อนหน้าที่ใกล้ที่สุด (ปุ่ม combobox/checkbox ก็นับ ไม่ใช่แค่ input)
+        precedingFocusable(section, el)?.focus();
         return el.validationMessage || "ค่าไม่ถูกต้อง";
       }
       el.reportValidity();
@@ -92,6 +105,8 @@ export function StepForm({
   const busy = useRef(false);
   /** เวลาที่เปลี่ยนขั้นล่าสุด — คลิกที่สองของดับเบิลคลิก "ถัดไป" ตกที่ปุ่ม "ส่ง" ตำแหน่งเดิม */
   const movedAt = useRef(0);
+  /** เวลาที่ส่งเสร็จล่าสุด — กันคลิกซ้ำเมื่อ onSubmit จบเร็ว */
+  const submittedAt = useRef(0);
   const last = steps.length - 1;
   const step = steps[current];
 
@@ -132,8 +147,10 @@ export function StepForm({
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (busy.current) return;
-    // ปุ่ม "ถัดไป" กลายเป็น "ส่ง" ที่ตำแหน่งเดิม — คลิกที่มาเร็วเกินหลังเปลี่ยนขั้นไม่นับเป็นการส่ง (ผู้ใช้ยังไม่ได้เห็นหน้าตรวจทาน)
-    if (current === last && Date.now() - movedAt.current < 500) return;
+    // คลิกที่สองของดับเบิลคลิก: หลังเปลี่ยนขั้น (ปุ่มเดิมกลายเป็น "ถัดไป"/"ส่ง" ของขั้นใหม่ — ข้ามขั้นหรือข้ามหน้าตรวจทาน)
+    // และหลังส่งเสร็จ (onSubmit ที่ sync/เร็ว ปล่อย busy ก่อนคลิกที่สองมาถึง) ไม่นับ
+    const now = Date.now();
+    if (now - movedAt.current < 500 || now - submittedAt.current < 500) return;
     busy.current = true;
     try {
       await submitStep();
@@ -174,13 +191,16 @@ export function StepForm({
     }
     if (!formRef.current) return;
     setPending(true);
+    const fallback = ui.actionFailed ?? "ดำเนินการไม่สำเร็จ";
     try {
-      await onSubmit(new FormData(formRef.current));
+      // server action ที่คืน { ok: false, error } (FormState) = ล้มเหลว เหมือน throw
+      const failed = failedResult(await onSubmit(new FormData(formRef.current)), fallback);
+      if (failed) setError(failed);
     } catch (err) {
-      setError(
-        err instanceof Error && err.message ? err.message : (ui.actionFailed ?? "ดำเนินการไม่สำเร็จ"),
-      );
+      // redirect() ใน server action = สำเร็จ (Next นำทางให้แล้ว)
+      if (!isNavigationError(err)) setError(errorMessage(err, fallback));
     } finally {
+      submittedAt.current = Date.now();
       setPending(false);
     }
   };

package/src/components/shared/theme/theme-switch.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";

package/src/components/shared/theme/theme-toggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -30,6 +31,8 @@ export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps)
     lastPersisted.current = persistedTheme;
   }, [persistedTheme]);
 
+  const text = useUiText();
+
   const handleThemeChange = async (newTheme: ThemeValue) => {
     setTheme(newTheme);
     await onThemeChange?.(newTheme);
@@ -43,13 +46,12 @@ export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps)
             variant="ghost"
             size="icon"
             className="relative h-9 w-9 rounded-md hover:bg-accent hover:text-accent-foreground"
-            title="Change theme"
+            aria-label={text.theme?.label ?? "Change theme"}
           />
         }
       >
         <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
         <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-        <span className="sr-only">Change theme</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-36">
         <DropdownMenuItem

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

@@ -81,8 +81,15 @@ export interface UiText {
   }>;
   /** ChatThread (optional) */
   chat?: Partial<{ placeholder: string; send: string; typing: string; scrollToLatest: string }>;
-  /** SimplePagination (optional) */
-  pagination?: Partial<{ previous: string; next: string; label: string; page: string }>;
+  /** SimplePagination / DataTablePagination (optional) */
+  pagination?: Partial<{
+    previous: string;
+    next: string;
+    first: string;
+    last: string;
+    label: string;
+    page: string;
+  }>;
   /** TableSkeleton/ListSkeleton/CardSkeleton (optional) — ข้อความสำหรับ screen reader */
   loading?: string;
   /** สถานะออนไลน์ของ UserIdentity/Initials (optional) */
@@ -174,7 +181,14 @@ export const UI_TEXT_TH: UiText = {
     typing: "กำลังพิมพ์…",
     scrollToLatest: "ไปข้อความล่าสุด",
   },
-  pagination: { previous: "ก่อนหน้า", next: "ถัดไป", label: "แบ่งหน้า", page: "หน้า" },
+  pagination: {
+    previous: "ก่อนหน้า",
+    next: "ถัดไป",
+    first: "หน้าแรก",
+    last: "หน้าสุดท้าย",
+    label: "แบ่งหน้า",
+    page: "หน้า",
+  },
   loading: "กำลังโหลด…",
   presence: { online: "ออนไลน์", away: "ไม่อยู่", busy: "ไม่ว่าง", offline: "ออฟไลน์" },
   characterCount: "พิมพ์แล้ว {count} จาก {max} ตัวอักษร",
@@ -264,7 +278,14 @@ export const UI_TEXT_EN: UiText = {
     typing: "Typing…",
     scrollToLatest: "Jump to latest",
   },
-  pagination: { previous: "Previous", next: "Next", label: "Pagination", page: "Page" },
+  pagination: {
+    previous: "Previous",
+    next: "Next",
+    first: "First page",
+    last: "Last page",
+    label: "Pagination",
+    page: "Page",
+  },
   loading: "Loading…",
   presence: { online: "Online", away: "Away", busy: "Busy", offline: "Offline" },
   characterCount: "{count} of {max} characters",

package/src/components/shared/upload-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { formatBytes } from "@suphark/ui/lib/formatters";
 import { cn } from "@suphark/ui/lib/utils";
 import { AlertCircle, Check, ChevronDown, RotateCcw, X } from "lucide-react";

package/src/hooks/use-table-search-params.ts

@@ -45,7 +45,8 @@ export function useTableSearchParams(defaults?: { pageSize?: number }) {
   const [isPending, startTransition] = useTransition();
 
   const state = useMemo<TableSearchState>(() => {
-    const filters: Record<string, string[]> = {};
+    // ไม่มี prototype: key จาก URL อย่าง "__proto__"/"constructor" เป็นแค่ตัวกรองชื่อหนึ่ง ไม่ไปทับ prototype
+    const filters: Record<string, string[]> = Object.create(null);
     for (const key of new Set(searchParams.keys())) {
       if (RESERVED.has(key)) continue;
       const values = searchParams
@@ -73,16 +74,20 @@ export function useTableSearchParams(defaults?: { pageSize?: number }) {
 
   // setter หลายตัวในจังหวะเดียว (เช่น setFilter แล้ว setSort) ต้องต่อจากค่าที่เพิ่งตั้ง ไม่ใช่ searchParams ตอน render
   // (router.replace ยังไม่ทันเปลี่ยน URL → ตัวหลังเขียนทับตัวแรก) — ล้างเมื่อ URL เปลี่ยนจริงแล้ว
-  const latest = useRef<string | null>(null);
+  // จำ URL ที่เราเพิ่งสั่ง (value) คู่กับ URL ตอนสั่ง (base) — ใช้ต่อเฉพาะเมื่อ URL ยังเป็น base เดิม
+  // (เดิมล้างตามตัวอ้างอิงของ searchParams ซึ่ง Next คืนตัวเดิมเมื่อ URL ไม่เปลี่ยน → ค่าเก่าค้าง)
+  const latest = useRef<{ base: string; value: string } | null>(null);
   useEffect(() => {
     latest.current = null;
   }, [searchParams]);
 
   const push = useCallback(
     (mutate: (params: URLSearchParams) => void) => {
-      const params = new URLSearchParams(latest.current ?? searchParams.toString());
+      const base = searchParams.toString();
+      const pending = latest.current?.base === base ? latest.current.value : base;
+      const params = new URLSearchParams(pending);
       mutate(params);
-      latest.current = params.toString();
+      latest.current = { base, value: params.toString() };
       startTransition(() => {
         router.replace(`${pathname}?${params.toString()}`, { scroll: false });
       });

package/src/index.ts

@@ -40,6 +40,12 @@ export {
   SaveButton,
   SubmitButton,
 } from "./components/shared/button";
+export {
+  Button,
+  type ButtonProps,
+  type ButtonTooltipSide,
+  ButtonTooltipSuppress,
+} from "./components/shared/button/button";
 export {
   type CalendarDayContext,
   type CalendarDayState,
@@ -296,7 +302,7 @@ export {
   BreadcrumbSeparator,
 } from "./components/ui/breadcrumb";
 export { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "./components/ui/bubble";
-export { Button, buttonVariants } from "./components/ui/button";
+export { buttonVariants } from "./components/ui/button";
 export {
   ButtonGroup,
   ButtonGroupSeparator,

package/src/lib/action-result.ts

@@ -0,0 +1,33 @@
+/**
+ * ตีความผลของ action (server action / async handler) ให้เหมือนกันทุก component — ไม่พึ่ง next
+ */
+
+/** ข้อความจาก error ที่ throw (ไม่มี = fallback) */
+export function errorMessage(err: unknown, fallback: string): string {
+  return err instanceof Error && err.message ? err.message : fallback;
+}
+
+/** action คืน `FormState` แบบ `{ ok: false, error }` (ไม่ได้ throw) = ล้มเหลว → ข้อความ error; อย่างอื่น = null */
+export function failedResult(result: unknown, fallback: string): string | null {
+  if (result && typeof result === "object" && "ok" in result && result.ok === false) {
+    const error = "error" in result ? result.error : undefined;
+    return typeof error === "string" && error ? error : fallback;
+  }
+  return null;
+}
+
+/**
+ * error ที่ Next ใช้สั่งนำทาง (`redirect()`, `notFound()`, `forbidden()`/`unauthorized()`) — ไม่ใช่ความล้มเหลว
+ * server action ที่ redirect ทำให้ promise ฝั่ง client reject ด้วย error นี้ขณะที่ router นำทางให้แล้ว
+ * → ห้ามแสดงเป็น toast "NEXT_REDIRECT" (ดูจาก `digest` จึงไม่ต้อง import next)
+ */
+export function isNavigationError(err: unknown): boolean {
+  if (!err || typeof err !== "object" || !("digest" in err)) return false;
+  const digest = (err as { digest: unknown }).digest;
+  return (
+    typeof digest === "string" &&
+    (digest.startsWith("NEXT_REDIRECT") ||
+      digest === "NEXT_NOT_FOUND" ||
+      digest.startsWith("NEXT_HTTP_ERROR_FALLBACK"))
+  );
+}

package/src/lib/safe-url.ts

@@ -0,0 +1,15 @@
+/**
+ * URL ที่นำทางด้วย script ได้อย่างปลอดภัย (`location.assign/replace`, `window.open`)
+ * — ช่องทางเหล่านี้ไม่มีตัวกัน `javascript:` แบบ `<a href>` ของ React หรือ router ของ Next
+ * รับเฉพาะ http(s) และ path ภายใน (relative); คืน URL ที่ resolve แล้ว หรือ null ถ้าไม่ปลอดภัย
+ * ไม่ได้กัน open redirect ไปโดเมนอื่น — ถ้าค่ามาจาก URL/ผู้ใช้ แอปต้องเช็กปลายทางเอง
+ */
+export function safeNavigableUrl(href: string | null | undefined): string | null {
+  if (!href || typeof window === "undefined") return null;
+  try {
+    const url = new URL(href, window.location.href);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}

package/src/styles.css

@@ -297,25 +297,28 @@
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 
-/* Global scrollbar styling */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb);
-  border-radius: 9999px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover);
-}
+/* Global scrollbar styling — อยู่ใน @layer base ให้ utility (no-scrollbar, scrollbar-thin, className ของแอป) ชนะได้
+   (เดิมไม่มี layer → `*{scrollbar-width:thin}` ทับ no-scrollbar ทุกที่ เช่นคอลัมน์ TimePicker แถบแท็บ) */
+@layer base {
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: 9999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+  }
 
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb) transparent;
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
 }
 
 html,