@suphark/ui 0.25.0 → 0.26.0

package/src/components/shared/settings-layout.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@suphark/ui/lib/utils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react";
+import { type ReactNode, useId, useMemo, useRef, useState } from "react";
 import { SearchInput } from "./form/search-input";
 import { useUiText } from "./ui-text";
 
@@ -53,6 +53,7 @@ export function SettingsLayout({
   const [mobileDetail, setMobileDetail] = useState(false);
   const [query, setQuery] = useState("");
   const headingRef = useRef<HTMLHeadingElement>(null);
+  const navRef = useRef<HTMLElement>(null);
 
   const visible = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -71,12 +72,20 @@ export function SettingsLayout({
     if (valueProp === undefined) setInner(id);
     onValueChange?.(id);
     setMobileDetail(true);
+    // มือถือ: รายการหัวข้อถูกซ่อน → ย้ายโฟกัสไปหัวข้อ ให้ screen reader รู้ว่าเนื้อหาเปลี่ยน
+    // (จอกว้างเห็นทั้งสองฝั่ง โฟกัสอยู่ที่รายการต่อได้ — ไม่ย้าย)
+    if (!window.matchMedia?.("(min-width: 48rem)").matches) {
+      requestAnimationFrame(() => headingRef.current?.focus({ preventScroll: true }));
+    }
   };
 
-  // เข้าหน้าหัวข้อบนมือถือ → ย้ายโฟกัสไปหัวข้อ ให้ screen reader รู้ว่าเนื้อหาเปลี่ยน
-  useEffect(() => {
-    if (mobileDetail) headingRef.current?.focus({ preventScroll: true });
-  }, [mobileDetail]);
+  /** มือถือ: กลับไปรายการ — ปุ่ม "กลับ" ถูกซ่อน จึงคืนโฟกัสให้หัวข้อที่เพิ่งเปิด (ไม่งั้นโฟกัสหลุดไป body) */
+  const back = (id: string) => {
+    setMobileDetail(false);
+    requestAnimationFrame(() =>
+      navRef.current?.querySelector<HTMLElement>(`[data-section-id="${CSS.escape(id)}"]`)?.focus(),
+    );
+  };
 
   if (!current) return null;
 
@@ -87,6 +96,7 @@ export function SettingsLayout({
       className={cn("grid gap-6 md:grid-cols-[14rem_minmax(0,1fr)] lg:gap-8", className)}
     >
       <nav
+        ref={navRef}
         aria-label={text.settings?.label ?? "หัวข้อการตั้งค่า"}
         className={cn(
           "flex flex-col gap-3 md:sticky md:top-20 md:self-start",
@@ -108,6 +118,7 @@ export function SettingsLayout({
                 <li key={s.id}>
                   <button
                     type="button"
+                    data-section-id={s.id}
                     onClick={() => select(s.id)}
                     aria-current={selected ? "page" : undefined}
                     className={cn(
@@ -144,7 +155,7 @@ export function SettingsLayout({
       >
         <button
           type="button"
-          onClick={() => setMobileDetail(false)}
+          onClick={() => back(current.id)}
           className="-ml-1 flex w-fit items-center gap-1 rounded-md px-1 py-1 text-muted-foreground text-sm outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring md:hidden"
         >
           <ChevronLeft className="size-4" aria-hidden />

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

@@ -26,12 +26,17 @@ const CONTROLS = "input, select, textarea";
  */
 function reportSection(section: HTMLElement | null): true | false | string {
   if (!section) return true;
-  for (const el of section.querySelectorAll<HTMLInputElement>(CONTROLS)) {
+  const controls = [...section.querySelectorAll<HTMLInputElement>(CONTROLS)];
+  for (const [i, el] of controls.entries()) {
     if (el.type === "hidden" || el.disabled) continue;
     if (!el.checkValidity()) {
       if (el.getAttribute("aria-hidden") === "true") {
-        // โฟกัสช่องที่มองเห็นในกลุ่มเดียวกัน (ถ้ามี)
-        el.parentElement?.querySelector<HTMLElement>("input:not([aria-hidden=true])")?.focus();
+        // input ซ่อนของ Base UI อยู่ถัดจากช่องที่มองเห็นของมัน → โฟกัสช่องที่มองเห็นตัวก่อนหน้าที่ใกล้ที่สุด
+        controls
+          .slice(0, i)
+          .reverse()
+          .find((c) => c.getAttribute("aria-hidden") !== "true" && c.type !== "hidden")
+          ?.focus();
         return el.validationMessage || "ค่าไม่ถูกต้อง";
       }
       el.reportValidity();
@@ -83,6 +88,10 @@ export function StepForm({
   const sectionRefs = useRef<(HTMLElement | null)[]>([]);
   const headingRefs = useRef<(HTMLHeadingElement | null)[]>([]);
   const moved = useRef(false);
+  /** กันส่งซ้ำแบบ synchronous (state pending อัปเดตไม่ทันดับเบิลคลิก) */
+  const busy = useRef(false);
+  /** เวลาที่เปลี่ยนขั้นล่าสุด — คลิกที่สองของดับเบิลคลิก "ถัดไป" ตกที่ปุ่ม "ส่ง" ตำแหน่งเดิม */
+  const movedAt = useRef(0);
   const last = steps.length - 1;
   const step = steps[current];
 
@@ -94,6 +103,7 @@ export function StepForm({
 
   const go = (index: number) => {
     moved.current = true;
+    movedAt.current = Date.now();
     setError(null);
     setCurrent(index);
     setReached((r) => Math.max(r, index));
@@ -121,7 +131,18 @@ export function StepForm({
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (pending) return;
+    if (busy.current) return;
+    // ปุ่ม "ถัดไป" กลายเป็น "ส่ง" ที่ตำแหน่งเดิม — คลิกที่มาเร็วเกินหลังเปลี่ยนขั้นไม่นับเป็นการส่ง (ผู้ใช้ยังไม่ได้เห็นหน้าตรวจทาน)
+    if (current === last && Date.now() - movedAt.current < 500) return;
+    busy.current = true;
+    try {
+      await submitStep();
+    } finally {
+      busy.current = false;
+    }
+  };
+
+  const submitStep = async () => {
     setError(null);
     if (current < last) {
       if (await check(current)) go(current + 1);

package/src/components/shared/time/client-date-formatter.tsx

@@ -4,7 +4,8 @@ import { useMounted } from "@suphark/ui/hooks/use-mounted";
 import { useTicker } from "@suphark/ui/hooks/use-ticker";
 import { getDateTimeFormat } from "@suphark/ui/lib/intl-cache";
 import { formatDistance, type Locale } from "date-fns";
-import { enUS, th } from "date-fns/locale";
+import { enUS } from "date-fns/locale/en-US";
+import { th } from "date-fns/locale/th";
 import { useMemo } from "react";
 
 interface ClientDateFormatterProps {

package/src/components/shared/tree-view.tsx

@@ -88,8 +88,12 @@ export function TreeView({
   className,
 }: TreeViewProps) {
   const [uncontrolledExpanded, setUncontrolledExpanded] = useState(() => toSet(defaultExpandedIds));
-  const expanded =
-    controlledExpanded !== undefined ? toSet(controlledExpanded) : uncontrolledExpanded;
+  // Set ใหม่ทุก render ทำให้ memo ของ rows คำนวณใหม่ทุกครั้ง — สร้างเมื่อ prop เปลี่ยนเท่านั้น
+  const controlledSet = useMemo(
+    () => (controlledExpanded !== undefined ? toSet(controlledExpanded) : null),
+    [controlledExpanded],
+  );
+  const expanded = controlledSet ?? uncontrolledExpanded;
   const [loaded, setLoaded] = useState<Map<string, TreeNode[]>>(() => new Map());
   const [loading, setLoading] = useState<Set<string>>(() => new Set());
   const [focusId, setFocusId] = useState<string | null>(null);

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

@@ -99,6 +99,7 @@ export interface UiText {
     now: string;
     clear: string;
     dateTimePlaceholder: string;
+    invalid: string;
   }>;
   /** TagsInput (optional) — remove ใช้ {tag}, duplicate ใช้ {tag}, max ใช้ {max} */
   tags?: Partial<{ placeholder: string; remove: string; duplicate: string; max: string }>;
@@ -185,6 +186,7 @@ export const UI_TEXT_TH: UiText = {
     now: "ตอนนี้",
     clear: "ล้าง",
     dateTimePlaceholder: "เลือกวันและเวลา",
+    invalid: "รูปแบบเวลาไม่ถูกต้อง (เช่น 14:30)",
   },
   tags: {
     placeholder: "พิมพ์แล้วกด Enter",
@@ -274,6 +276,7 @@ export const UI_TEXT_EN: UiText = {
     now: "Now",
     clear: "Clear",
     dateTimePlaceholder: "Pick date and time",
+    invalid: "Invalid time (e.g. 14:30)",
   },
   tags: {
     placeholder: "Type and press Enter",

package/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-body transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}

package/src/components/ui/native-select.tsx

@@ -19,7 +19,7 @@ function NativeSelect({ className, size = "default", ...props }: NativeSelectPro
       <select
         data-slot="native-select"
         data-size={size}
-        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-body transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
         {...props}
       />
       <ChevronDownIcon

package/src/components/ui/select.tsx

@@ -40,7 +40,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-body whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/components/ui/textarea.tsx

@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-body transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useMemo, useTransition } from "react";
+import { useCallback, useEffect, useMemo, useRef, useTransition } from "react";
 
 /**
  * เก็บ state ของตาราง (หน้า, ขนาดหน้า, การเรียง, คำค้น, ตัวกรอง) ไว้ใน URL
@@ -71,10 +71,18 @@ export function useTableSearchParams(defaults?: { pageSize?: number }) {
     };
   }, [searchParams, defaults?.pageSize]);
 
+  // setter หลายตัวในจังหวะเดียว (เช่น setFilter แล้ว setSort) ต้องต่อจากค่าที่เพิ่งตั้ง ไม่ใช่ searchParams ตอน render
+  // (router.replace ยังไม่ทันเปลี่ยน URL → ตัวหลังเขียนทับตัวแรก) — ล้างเมื่อ URL เปลี่ยนจริงแล้ว
+  const latest = useRef<string | null>(null);
+  useEffect(() => {
+    latest.current = null;
+  }, [searchParams]);
+
   const push = useCallback(
     (mutate: (params: URLSearchParams) => void) => {
-      const params = new URLSearchParams(searchParams.toString());
+      const params = new URLSearchParams(latest.current ?? searchParams.toString());
       mutate(params);
+      latest.current = params.toString();
       startTransition(() => {
         router.replace(`${pathname}?${params.toString()}`, { scroll: false });
       });

package/src/hooks/use-ticker.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 /**
  * นาฬิกากลางต่อ interval — ทุก component ที่ขอ interval เท่ากันแชร์ `setInterval` ตัวเดียว
@@ -45,9 +45,15 @@ const zero = () => 0;
  */
 export function useTicker(intervalMs: number | undefined): number {
   const active = typeof intervalMs === "number" && intervalMs > 0;
-  return useSyncExternalStore(
-    active ? (l) => subscribe(intervalMs, l) : subscribeNoop,
-    active ? () => getTicker(intervalMs).tick : zero,
-    zero,
+  // subscribe ต้องคงที่ข้าม render — ฟังก์ชันใหม่ทุก render ทำให้ unsubscribe/subscribe ใหม่
+  // (ผู้ใช้ตัวเดียว = clearInterval แล้วเริ่มนับใหม่ทุกครั้งที่ parent render → ถ้า render บ่อยกว่า interval จะไม่ tick เลย)
+  const subscribeActive = useCallback(
+    (listener: () => void) => (active ? subscribe(intervalMs, listener) : subscribeNoop()),
+    [active, intervalMs],
   );
+  const getSnapshot = useCallback(
+    () => (active ? getTicker(intervalMs).tick : 0),
+    [active, intervalMs],
+  );
+  return useSyncExternalStore(subscribeActive, getSnapshot, zero);
 }

package/src/index.ts

@@ -90,6 +90,7 @@ export { EmptyState } from "./components/shared/empty-state";
 export { EnvSnippet, randomSecret } from "./components/shared/env-snippet";
 export { type FileKind, FileTypeIcon, getFileKind } from "./components/shared/file-type-icon";
 export { FilterBar, type FilterBarFilter } from "./components/shared/filter-bar";
+export { DateTimePicker } from "./components/shared/form/date-time-picker";
 export { FormFieldBoolean } from "./components/shared/form/form-field-boolean";
 export { FormFieldColorSelect } from "./components/shared/form/form-field-color-select";
 export { FormFieldCombobox } from "./components/shared/form/form-field-combobox";
@@ -117,7 +118,6 @@ export { SliderField, type SliderFieldProps } from "./components/shared/form/sli
 export { TagsInput } from "./components/shared/form/tags-input";
 export { TextareaField } from "./components/shared/form/textarea-field";
 export {
-  DateTimePicker,
   parseTimeInput,
   TimeColumns,
   TimePicker,

package/src/lib/formatters.ts

@@ -1,5 +1,5 @@
 import { differenceInCalendarDays, formatDistanceToNow } from "date-fns";
-import { th } from "date-fns/locale";
+import { th } from "date-fns/locale/th";
 
 /**
  * ฟอร์แมตวันที่แบบไทยที่ primitives ใช้ร่วมกัน (DatePicker, RelativeDate)

package/src/lib/month.ts

@@ -29,8 +29,20 @@ export function toMonthKey(date: Date): MonthKey {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
 }
 
-export function currentMonthKey(now: Date = new Date()): MonthKey {
-  return toMonthKey(now);
+/**
+ * เดือนปัจจุบัน — ไม่ส่ง `timeZone` = โซนเวลาของเครื่อง
+ * ส่ง `timeZone` (เช่น "Asia/Bangkok") เมื่อค่าถูกคำนวณทั้งบน server (UTC) และ browser แล้วต้องตรงกัน (กัน hydration mismatch ต้นเดือน)
+ */
+export function currentMonthKey(now: Date = new Date(), timeZone?: string): MonthKey {
+  if (!timeZone) return toMonthKey(now);
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+  }).formatToParts(now);
+  const year = parts.find((p) => p.type === "year")?.value ?? String(now.getFullYear());
+  const month = parts.find((p) => p.type === "month")?.value ?? "01";
+  return `${year}-${month}`;
 }
 
 /** เลื่อนเดือน (ลบ = ย้อนหลัง) ข้ามปีให้เอง: shiftMonth("2026-01", -1) → "2025-12" */