@suphark/ui 0.24.0 → 0.25.1

package/CHANGELOG.md

@@ -2,6 +2,66 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.25.1] — 2026-10-02
+
+แก้ตามผลรีวิว codebase (bug / security / performance) — ไม่เปลี่ยน props
+
+### Fixed
+
+- **`NumberInput`**: input ซ่อนของ Base UI (ที่ส่งค่าใน FormData) ได้ `step` ไปด้วย → browser ปฏิเสธค่าทศนิยม/ค่าที่ไม่ลง step นับจาก `min` แล้ว **บล็อก submit เงียบ ๆ** (เช่น 1500.5 เมื่อ step=1, 150 เมื่อ min=0 step=100 — DueBell เจอ) → input ซ่อนใช้ `step="any"` (ปุ่ม −/+ ยังเลื่อนตาม `step`; min/max ยังตรวจ)
+- **`TimePicker`**: พิมพ์ผิดรูปแบบแล้วกดส่ง ฟอร์มเคยส่งค่าเดิมไปเงียบ ๆ → ช่องเป็น invalid จริง (`setCustomValidity`, ข้อความ `UiText.time.invalid`) ฟอร์มไม่ส่งจนแก้
+- **`DateTimePicker`**: แยกไฟล์ (`form/date-time-picker.tsx`); ข้อความวัน/เวลาและค่าใน input ซ่อนคำนวณหลัง hydrate (เดิม server UTC กับ browser ต่างกัน 7 ชม. = hydration mismatch เมื่อมีค่าเริ่มต้น); **`name` ส่ง `"YYYY-MM-DDTHH:mm+07:00"` (มี offset)** แทนค่าที่ไม่มีโซนเวลา → `new Date(formData.get(name))` บน server ได้เวลาที่ถูก (เดิมคลาด 7 ชม.)
+- `TimeColumns`: เลื่อนเฉพาะในคอลัมน์ (เดิม `scrollIntoView` เลื่อนทั้งหน้าทุกครั้งที่เลือก)
+- **`MonthStepper` / `useMonthCursor`**: "เดือนนี้" คิดตามเวลาไทย (`Asia/Bangkok`) ให้ server กับ browser ตรงกัน — เดิมช่วง 00:00–06:59 ของวันที่ 1 ทุกเดือน server (UTC) เห็นเดือนก่อน = hydration mismatch; `currentMonthKey(now?, timeZone?)` รับโซนเวลาได้ (ไม่ส่ง = เครื่องเหมือนเดิม)
+- **`StepForm`**: ดับเบิลคลิกปุ่มส่ง/ถัดไปเคยเรียก `onSubmit` 2 ครั้ง หรือข้ามหน้าตรวจทาน (คลิกที่สองตกที่ปุ่ม "ส่ง" ตำแหน่งเดิม) → กันซ้ำแบบ synchronous + ไม่นับคลิกภายใน 500 ms หลังเปลี่ยนขั้น; input ซ่อนของ Base UI ผิด → โฟกัสช่องที่มองเห็นของมันเอง (เดิมโฟกัสช่องแรกของขั้น)
+- **`RowActions` / `ConfirmActionButton`**: action ที่คืน `FormState` `{ ok: false, error }` (ไม่ได้ throw) เคยถูกถือว่าสำเร็จ (ปิด dialog + refresh ไม่มีข้อความ) → toast error + คง dialog ไว้ (`failedResult`)
+- **`ActionMenu`**: รายการที่มี `href` + `confirm` เคยไปเลยโดยไม่ถาม → ถามก่อนแล้วค่อยไป; `onClick` ที่ throw/reject แสดง toast และคง dialog ไว้ (เดิม unhandled rejection เงียบ)
+- `ChatThread`: `onSend` ล้มเหลว = toast + คงข้อความในช่องไว้ให้ลองใหม่
+- `CommandPalette`: คีย์ลัดเทียบ `e.code` — แป้นภาษาไทย Ctrl+K ใช้ได้แล้ว (เดิม `e.key` = "า")
+- `SettingsLayout`: มือถือกด "กลับ" แล้วคืนโฟกัสไปหัวข้อเดิม (เดิมหลุดไป body); จอกว้างไม่ย้ายโฟกัสไปหัวข้อ (เดิมย้ายแค่ครั้งแรก)
+- `TagsInput`: วางหลายค่าแทรกที่ cursor ของข้อความที่พิมพ์ค้าง (เดิมทิ้งข้อความนั้น)
+- `ProviderButtons`: ปุ่มที่ `pendingId` ตรงแสดง spinner และกดซ้ำไม่ได้ (รวมแบบ `href`)
+- `useTicker`: subscribe คงที่ข้าม render — เดิมสมัครใหม่ทุก render ทำให้ "x นาทีที่แล้ว" ไม่อัปเดตถ้า parent render บ่อยกว่า interval
+- `useTableSearchParams`: setter หลายตัวติดกัน (เช่น setFilter แล้ว setSort) ต่อจากค่าที่เพิ่งตั้ง (เดิมตัวหลังทับตัวแรก)
+- `useDataTable`: sync `columnFilters` ตามค่า (เดิมตามตัวอ้างอิง → array literal ทำให้ render ซ้ำ + ทับตัวกรองที่ผู้ใช้เพิ่งเลือก)
+
+### Security
+
+- `ClientRedirect`: รับเฉพาะ http(s)/path — ปฏิเสธ `javascript:`/`data:` (`location.replace` ไม่มีตัวกันแบบ `<a href>`/router)
+- showcase: `/login` ใช้ `safeNextPath` (`src/lib/safe-next.ts`) กัน open redirect `next=/%09/evil.com` (WHATWG URL ตัด tab → `//evil.com`); production (`VERCEL_ENV=production`) ที่ไม่มี env ของ Pi Auth หรือตั้ง `PI_AUTH_DISABLED` = build ล้ม แทนเปิดเว็บสาธารณะเงียบ ๆ — ตัว `safeNextPath` ของ `@suphark/auth-client` แก้ใน repo auth แล้ว (0.6.1 รอ publish)
+
+### Performance
+
+- **`DataTable`**: ส่วนลากเรียง (dnd-kit ~16 kB gzip) แยกเป็น `data-table-sortable.tsx` โหลดแบบ lazy เฉพาะเมื่อส่ง `onReorder` — เดิมทุกตารางพกไปด้วย
+- **`FormFieldInput`**: variant `autocomplete` (cmdk + Radix Dialog ที่ cmdk พ่วงมา) แยกเป็น `form-field-autocomplete.tsx` โหลดแบบ lazy — เดิมทุกฟอร์มที่ใช้ช่องข้อความธรรมดาพก cmdk
+- `DataTable` ช่องค้นหา: ส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms (Enter = ทันที) — เดิมกรอง/เรียง/render ทุกแถว (และ `router.replace` ถ้าผูก URL) ทุกตัวอักษร
+- `TimePicker` ไม่พา react-day-picker มาด้วยแล้ว (แยก `DateTimePicker`); import locale ตรงไฟล์ (`date-fns/locale/th`, `date-fns/locale/en-US`, `react-day-picker/locale/th`) — dev server ไม่ต้อง compile locale ทั้ง ~700 ไฟล์
+- `PullToRefresh`: ติดตั้ง `touchmove` แบบ non-passive เฉพาะตอนจอมือถือ + หน้าอยู่บนสุด (เดิมติดตลอด → browser ต้องรอ JS ก่อนเลื่อนทุกครั้ง)
+- `TreeView`: `expandedIds` แบบ controlled ไม่ทำให้ memo ของแถวคำนวณใหม่ทุก render
+- showcase: หน้า number-input อธิบาย step ตามพฤติกรรมใหม่
+- tests 12 กรณี (`fixes-0-25-1.test.tsx`, `lazy-parts.test.tsx` + StepForm/NumberInput ใน `inputs-0-25.test.tsx`)
+
+## [0.25.0] — 2026-10-02
+
+input ใหม่ตามแผนจาก shadcnstudio.com — เพิ่มอย่างเดียว
+
+### Added
+
+- **`NumberInput`** — ช่องตัวเลขพร้อมปุ่ม −/+ (Base UI NumberField): `min`/`max`/`step`/`largeStep` (Shift+ลูกศร), `format` (Intl เช่น ทศนิยม 2 ตำแหน่ง/สกุลเงิน), `locale` (ค่าเริ่มต้น th-TH), `prefix`/`suffix` (฿, %, ชิ้น), `hideButtons`, `size` sm|default, `name` ส่งค่าดิบใน FormData — แทน `<Input type="number">` + InputGroup + state
+- **`TimePicker`** — ช่องเวลา 24 ชม. ค่า `"HH:mm"`: พิมพ์ได้เลย (`"1430"`, `"9.15"`, `"14:30 น."` → แปลงตอน blur/Enter, ผิดรูปแบบ = `aria-invalid`) หรือกดไอคอนนาฬิกาเลือกจากคอลัมน์ชั่วโมง/นาที (`minuteStep`, ปุ่ม "ตอนนี้"); `name` ส่งใน FormData
+- **`DateTimePicker`** — ปฏิทิน (ภาษาไทย) + คอลัมน์เวลาในกล่องเดียว ค่า `Date | null`, `defaultTime` เมื่อเลือกวันครั้งแรก, ปุ่มล้าง; `name` ส่ง `"YYYY-MM-DDTHH:mm"` (เวลาท้องถิ่น แบบ datetime-local)
+- `TimeColumns` (คอลัมน์ listbox ใช้ลูกศร/Home/End), `parseTimeInput`, `toLocalDateTimeString`, `type TimeValue`
+- **`TagsInput`** — พิมพ์หลายค่าเป็นป้าย: Enter/จุลภาค (+ เว้นวรรคถ้า `splitOnSpace`) เพิ่ม, วางหลายค่าพร้อมกัน, Backspace ลบตัวสุดท้าย, ไม่รับค่าซ้ำ (`allowDuplicates`), `max`, `transform`, `validate` คืนข้อความ error (ค่าที่ไม่ผ่านคงอยู่ในช่องให้แก้), ปลอดภัยกับ IME ไทย; `name` ส่งทุกค่า → `formData.getAll(name)` — redirect URI/โดเมน/อีเมล
+- **`StepForm`** — ฟอร์มหลายขั้น (wizard) จาก array `steps` (`title`, `description`, `content`, `validate(formData)`): แถบขั้นตอน (ขั้นที่ผ่านแล้วกดย้อนได้, จอแคบแสดง "ขั้นที่ x จาก y"), ปุ่มย้อนกลับ/ถัดไป/ส่ง, "ถัดไป" ตรวจ required/pattern + `validate` ของขั้นนั้น, ส่ง = ตรวจทุกขั้นอีกครั้งแล้วพากลับไปขั้นที่ผิด, input ตัวแทนที่ซ่อนของ Base UI ผิด = แสดงข้อความใต้ฟอร์ม; ทุกขั้นอยู่ใน form เดียว → `onSubmit(formData)` ได้ค่าครบ (ส่ง server action ต่อได้), throw = แสดงข้อความ, ปุ่มหมุนระหว่างรอ, โฟกัสย้ายไปหัวข้อขั้นใหม่
+- `UiText` key ใหม่: `number`, `time`, `tags`, `stepForm`
+- showcase: หน้า `/components/{number-input,time-picker,tags-input,step-form}` (129 หน้า); tests 11 กรณี
+
+### Performance
+
+- **barrel ไม่ใช้ `export *` แล้ว** (`index.ts` 66 บรรทัด, `next.ts`, `data-table.ts`, `components/data-table/index.ts` → รายชื่อ export ชัด ๆ แยก `type`; รายชื่อ export เท่าเดิมทุกตัว ตรวจด้วย TypeScript แล้ว) — วัดบน showcase (Next 16.3 Turbopack): server component ที่ import จาก `@suphark/ui` แบบ `export *` ทำให้ client component แทบทั้งแพ็กเกจ (ปฏิทิน, date-fns, cmdk, input-otp, accordion, questionnaire …) ถูกส่งไปทุกหน้า — **root layout ที่ใช้แค่ `ThemeProvider`/`Toaster` ลดจาก 988 kB (gzip 311 kB) เหลือ 61 kB (gzip 18 kB)**, หน้า `/login` 991 → 114 kB; แอปไม่ต้องแก้โค้ด แค่ bump (`optimizePackageImports` / `turbopackRemoveUnused*` ไม่ช่วย — ลองแล้ว)
+- `scripts/barrel-exports.mjs`: `pnpm check:barrel` (ใน verify + CI — เจอ `export *` ใน `packages/ui/src` = ล้ม) และ `pnpm fix:barrel` (แปลงให้หลัง `shadcn add`)
+- หมายเหตุ: ตัวเลข date-fns 824 kB บน bundlephobia คือทั้งไลบรารี — ใน build จริงมีเฉพาะฟังก์ชันที่ใช้ + locale ไทย/อังกฤษ
+
 ## [0.24.0] — 2026-10-02
 
 เติมของเดิมตามที่สำรวจ shadcnstudio.com (หยิบเฉพาะ "หน้าที่" ที่ยังไม่มี ทำเป็นตัวเดียว + props) — เพิ่มอย่างเดียว ค่าเริ่มต้นหน้าตาเดิม

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "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/app-shell/command-palette.tsx

@@ -148,8 +148,15 @@ export function CommandPalette({
   useEffect(() => {
     if (!shortcut) return;
     const key = shortcut.toLowerCase();
+    // เทียบตำแหน่งปุ่ม (e.code) สำหรับตัวอักษร/ตัวเลข — แป้นไทย Ctrl+K ให้ e.key = "า" แต่ e.code ยังเป็น "KeyK"
+    const code = /^[a-z]$/.test(key)
+      ? `Key${key.toUpperCase()}`
+      : /^\d$/.test(key)
+        ? `Digit${key}`
+        : null;
     const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) {
+      const matches = e.key.toLowerCase() === key || (code !== null && e.code === code);
+      if ((e.metaKey || e.ctrlKey) && matches) {
         e.preventDefault();
         setOpenRef.current(!openRef.current);
       }

package/src/components/data-table/data-table-sortable.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+/**
+ * ส่วนลากเรียงแถวของ DataTable (dnd-kit) — แยกไฟล์และโหลดแบบ lazy เฉพาะเมื่อส่ง `onReorder`
+ * เดิม import ที่ data-table.tsx ทำให้ทุกตารางพก dnd-kit (~16 kB gzip) แม้แทบไม่มีตารางไหนลากเรียง
+ */
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { TableCell, TableRow } from "@suphark/ui/components/ui/table";
+import { cn } from "@suphark/ui/lib/utils";
+import { flexRender, type Row, type Table } from "@tanstack/react-table";
+import type { CSSProperties, ReactNode } from "react";
+import { toast } from "sonner";
+
+interface RowStyleProps<TData> {
+  enableColumnResizing?: boolean;
+  getRowClassName?: (row: Row<TData>) => string;
+  stickyEdgeColumns?: boolean;
+}
+
+function DraggableRow<TData>({
+  row,
+  enableColumnResizing,
+  getRowClassName,
+  stickyEdgeColumns,
+}: RowStyleProps<TData> & { row: Row<TData> }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: row.id,
+  });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+  };
+
+  return (
+    <TableRow
+      ref={setNodeRef}
+      style={style}
+      data-state={row.getIsSelected() && "selected"}
+      className={cn(stickyEdgeColumns && "group/row", getRowClassName?.(row))}
+    >
+      {row.getVisibleCells().map((cell) => {
+        const isDndColumn = cell.column.id === "dnd-handle";
+        return (
+          <TableCell
+            key={cell.id}
+            {...(isDndColumn ? { ...attributes, ...listeners } : {})}
+            style={{
+              width: enableColumnResizing ? cell.column.getSize() : undefined,
+            }}
+            className={cn(
+              stickyEdgeColumns &&
+                cell.column.id === "select" &&
+                "sticky left-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+              stickyEdgeColumns &&
+                cell.column.id === "actions" &&
+                "sticky right-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
+            )}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </TableCell>
+        );
+      })}
+    </TableRow>
+  );
+}
+
+/** แถวที่ลากได้ (อยู่ใน TableBody) */
+export function SortableTableRows<TData>({
+  rows,
+  ...rowProps
+}: RowStyleProps<TData> & { rows: Row<TData>[] }) {
+  return (
+    <SortableContext items={rows.map((row) => row.id)} strategy={verticalListSortingStrategy}>
+      {rows.map((row) => (
+        <DraggableRow key={row.id} row={row} {...rowProps} />
+      ))}
+    </SortableContext>
+  );
+}
+
+/** DndContext + sensor + คำนวณลำดับใหม่ (ครอบตารางทั้งตัว) */
+export function SortableTableProvider<TData>({
+  table,
+  data,
+  getRowId,
+  onReorder,
+  children,
+}: {
+  table: Table<TData>;
+  data: TData[];
+  getRowId?: (row: TData) => string;
+  onReorder: (data: TData[]) => void;
+  children: ReactNode;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    const state = table.getState();
+    const isFiltered = state.columnFilters.length > 0 || state.globalFilter;
+    const isSorted = state.sorting.length > 0;
+
+    if (isFiltered || isSorted) {
+      toast.warning("Cannot reorder while filtering or sorting is active.");
+      return;
+    }
+
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const idOf = (item: TData) =>
+        getRowId ? getRowId(item) : (item as { id?: string | number }).id;
+      const oldIndex = data.findIndex((item) => idOf(item) === active.id);
+      const newIndex = data.findIndex((item) => idOf(item) === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onReorder(arrayMove(data, oldIndex, newIndex));
+      }
+    }
+  }
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      {children}
+    </DndContext>
+  );
+}

package/src/components/data-table/data-table-toolbar.tsx

@@ -21,6 +21,7 @@ import {
 import type { Table } from "@tanstack/react-table";
 import { Search, SlidersHorizontal, X } from "lucide-react";
 import type React from "react";
+import { useEffect, useRef, useState } from "react";
 import type { FacetedFilterConfig } from ".";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter";
 import { DataTableViewOptions } from "./data-table-view-option";
@@ -43,6 +44,31 @@ export function DataTableToolbar<TData>({
   preservedFilterIds = [],
 }: DataTableToolbarProps<TData>) {
   const globalFilter = table.getState().globalFilter;
+  // ค้นหา: เก็บข้อความในช่องเอง แล้วส่งให้ตารางเมื่อหยุดพิมพ์ 250 ms — เดิมกรอง/เรียง/render ทุกแถวทุกตัวอักษร
+  // (และถ้าแอปผูก globalFilter กับ URL = router.replace ทุกตัวอักษร)
+  const [searchDraft, setSearchDraft] = useState<string>((globalFilter as string) ?? "");
+  const committed = useRef<string>((globalFilter as string) ?? "");
+  useEffect(() => {
+    // ค่าเปลี่ยนจากข้างนอก (ล้างตัวกรอง / URL) → ตามให้ตรง
+    const external = (globalFilter as string) ?? "";
+    if (external !== committed.current) {
+      committed.current = external;
+      setSearchDraft(external);
+    }
+  }, [globalFilter]);
+  useEffect(() => {
+    if (searchDraft === committed.current) return;
+    const timer = setTimeout(() => {
+      committed.current = searchDraft;
+      table.setGlobalFilter(searchDraft);
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [searchDraft, table]);
+  const commitSearch = (value: string) => {
+    setSearchDraft(value);
+    committed.current = value;
+    table.setGlobalFilter(value);
+  };
   const preservedFilterIdSet = new Set(preservedFilterIds);
   const userColumnFilters = table
     .getState()
@@ -88,15 +114,18 @@ export function DataTableToolbar<TData>({
               name="table-search"
               autoComplete="off"
               placeholder={globalFilterPlaceholder}
-              value={(globalFilter as string) ?? ""}
-              onChange={(event) => table.setGlobalFilter(String(event.target.value))}
+              value={searchDraft}
+              onChange={(event) => setSearchDraft(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") commitSearch(searchDraft);
+              }}
             />
-            {!!globalFilter && (
+            {!!searchDraft && (
               <InputGroupAddon align="inline-end">
                 <InputGroupButton
                   variant="ghost"
                   aria-label="ล้างคำค้นหา"
-                  onClick={() => table.setGlobalFilter("")}
+                  onClick={() => commitSearch("")}
                 >
                   <X aria-hidden="true" className="size-4" />
                 </InputGroupButton>

package/src/components/data-table/data-table.tsx

@@ -1,22 +1,5 @@
 "use client";
 
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import {
   TableBody,
   TableCell,
@@ -26,72 +9,22 @@ import {
   Table as UiTable,
 } from "@suphark/ui/components/ui/table";
 import { cn } from "@suphark/ui/lib/utils";
-import { flexRender, type Row } from "@tanstack/react-table";
-import type { CSSProperties } from "react";
+import { flexRender } from "@tanstack/react-table";
 import * as React from "react";
-import { toast } from "sonner";
 import { DataTablePagination } from "./data-table-pagination";
 import { DataTableToolbar } from "./data-table-toolbar";
 import type { DataTableProps } from "./types";
 import { useDataTable } from "./use-data-table";
 
-interface DraggableRowProps<TData> {
-  row: Row<TData>;
-  enableColumnResizing?: boolean;
-  getRowClassName?: (row: Row<TData>) => string;
-  stickyEdgeColumns?: boolean;
-}
-
-function DraggableRow<TData>({
-  row,
-  enableColumnResizing,
-  getRowClassName,
-  stickyEdgeColumns,
-}: DraggableRowProps<TData>) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: row.id,
-  });
-
-  const style: CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.8 : 1,
-    zIndex: isDragging ? 1 : 0,
-    position: "relative",
-  };
-
-  return (
-    <TableRow
-      ref={setNodeRef}
-      style={style}
-      data-state={row.getIsSelected() && "selected"}
-      className={cn(stickyEdgeColumns && "group/row", getRowClassName?.(row))}
-    >
-      {row.getVisibleCells().map((cell) => {
-        const isDndColumn = cell.column.id === "dnd-handle";
-        return (
-          <TableCell
-            key={cell.id}
-            {...(isDndColumn ? { ...attributes, ...listeners } : {})}
-            style={{
-              width: enableColumnResizing ? cell.column.getSize() : undefined,
-            }}
-            className={cn(
-              stickyEdgeColumns &&
-                cell.column.id === "select" &&
-                "sticky left-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
-              stickyEdgeColumns &&
-                cell.column.id === "actions" &&
-                "sticky right-0 z-10 bg-card group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
-            )}
-          >
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-          </TableCell>
-        );
-      })}
-    </TableRow>
-  );
-}
+// ส่วนลากเรียง (dnd-kit) โหลดเฉพาะตารางที่ส่ง onReorder
+// (React.lazy ทิ้ง generic ของ TData — cast กลับเป็นชนิดของต้นฉบับ)
+type SortableModule = typeof import("./data-table-sortable");
+const SortableTableProvider = React.lazy(() =>
+  import("./data-table-sortable").then((m) => ({ default: m.SortableTableProvider })),
+) as unknown as SortableModule["SortableTableProvider"];
+const SortableTableRows = React.lazy(() =>
+  import("./data-table-sortable").then((m) => ({ default: m.SortableTableRows })),
+) as unknown as SortableModule["SortableTableRows"];
 
 /**
  * DataTable
@@ -181,51 +114,7 @@ export function DataTable<TData, TValue>({
     enableRowSelection,
   });
 
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 5,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  function handleDragEnd(event: DragEndEvent) {
-    if (!onReorder) return;
-
-    const state = table.getState();
-    const isFiltered = state.columnFilters.length > 0 || state.globalFilter;
-    const isSorted = state.sorting.length > 0;
-
-    if (isFiltered || isSorted) {
-      toast.warning("Cannot reorder while filtering or sorting is active.");
-      return;
-    }
-
-    const { active, over } = event;
-    if (over && active.id !== over.id) {
-      const oldIndex = data.findIndex((item) => {
-        const id = getRowId ? getRowId(item) : (item as { id?: string | number }).id;
-        return id === active.id;
-      });
-      const newIndex = data.findIndex((item) => {
-        const id = getRowId ? getRowId(item) : (item as { id?: string | number }).id;
-        return id === over.id;
-      });
-
-      if (oldIndex !== -1 && newIndex !== -1) {
-        const newData = arrayMove(data, oldIndex, newIndex);
-        onReorder(newData);
-      }
-    }
-  }
-
-  const tableRows = table.getRowModel().rows;
-  const rowIds = React.useMemo(() => tableRows.map((row) => row.id), [tableRows]);
-
-  const tableContent = (
+  const renderTable = (sortable: boolean) => (
     <UiTable
       className={cn(
         "w-full border-collapse",
@@ -292,18 +181,13 @@ export function DataTable<TData, TValue>({
             </TableRow>
           ))
         ) : table.getRowModel().rows?.length ? (
-          onReorder ? (
-            <SortableContext items={rowIds} strategy={verticalListSortingStrategy}>
-              {table.getRowModel().rows.map((row) => (
-                <DraggableRow
-                  key={row.id}
-                  row={row}
-                  enableColumnResizing={enableColumnResizing}
-                  getRowClassName={getRowClassName}
-                  stickyEdgeColumns={stickyEdgeColumns}
-                />
-              ))}
-            </SortableContext>
+          sortable ? (
+            <SortableTableRows
+              rows={table.getRowModel().rows}
+              enableColumnResizing={enableColumnResizing}
+              getRowClassName={getRowClassName}
+              stickyEdgeColumns={stickyEdgeColumns}
+            />
           ) : (
             table.getRowModel().rows.map((row) => (
               <TableRow
@@ -374,15 +258,19 @@ export function DataTable<TData, TValue>({
         <>
           <div className="overflow-x-auto rounded-lg border bg-card shadow-sm max-sm:-mx-2 max-sm:rounded-none max-sm:border-x-0">
             {onReorder ? (
-              <DndContext
-                sensors={sensors}
-                collisionDetection={closestCenter}
-                onDragEnd={handleDragEnd}
-              >
-                {tableContent}
-              </DndContext>
+              // ระหว่างโหลดส่วนลากเรียง แสดงตารางปกติไปก่อน (ลากไม่ได้ชั่วคราว)
+              <React.Suspense fallback={renderTable(false)}>
+                <SortableTableProvider
+                  table={table}
+                  data={data}
+                  getRowId={getRowId}
+                  onReorder={onReorder}
+                >
+                  {renderTable(true)}
+                </SortableTableProvider>
+              </React.Suspense>
             ) : (
-              tableContent
+              renderTable(false)
             )}
           </div>
           {showPagination && (

package/src/components/data-table/index.ts

@@ -1,9 +1,9 @@
-export * from "./data-table";
-export * from "./data-table-column-header";
-export * from "./data-table-date-range-filter";
-export * from "./data-table-faceted-filter";
-export * from "./data-table-pagination";
-export * from "./data-table-toolbar";
-export * from "./data-table-view-option";
-export * from "./types";
-export * from "./use-data-table";
+export { DataTable } from "./data-table";
+export { DataTableColumnHeader } from "./data-table-column-header";
+export { DataTableDateRangeFilter } from "./data-table-date-range-filter";
+export { DataTableFacetedFilter } from "./data-table-faceted-filter";
+export { DataTablePagination } from "./data-table-pagination";
+export { DataTableToolbar } from "./data-table-toolbar";
+export { DataTableViewOptions } from "./data-table-view-option";
+export type { DataTableProps, FacetedFilterConfig } from "./types";
+export { useDataTable } from "./use-data-table";

package/src/components/data-table/use-data-table.ts

@@ -66,12 +66,15 @@ export function useDataTable<TData, TValue>({
     columnFiltersProp ?? initialColumnFilters,
   );
 
-  // Sync with prop if provided
+  // Sync with prop if provided — เทียบด้วยค่าเหมือน sorting/pagination: ผู้เรียกมักส่ง array literal ใหม่ทุก render
+  // ถ้าผูกกับตัวอ้างอิง effect จะรันทุก render → render ซ้ำ + ล้าง memo ของ row model + ทับตัวกรองที่ผู้ใช้เพิ่งเลือก
+  const columnFiltersKey = columnFiltersProp ? JSON.stringify(columnFiltersProp) : undefined;
   React.useEffect(() => {
-    if (columnFiltersProp !== undefined) {
-      setColumnFilters(columnFiltersProp);
-    }
-  }, [columnFiltersProp]);
+    if (columnFiltersKey === undefined) return;
+    setColumnFilters((current) =>
+      JSON.stringify(current) === columnFiltersKey ? current : JSON.parse(columnFiltersKey),
+    );
+  }, [columnFiltersKey]);
   const [sorting, setSorting] = React.useState<SortingState>(
     () => sortingProp ?? (initialState?.sorting as SortingState | undefined) ?? [],
   );

package/src/components/pwa/pull-to-refresh.tsx

@@ -113,11 +113,31 @@ export function PullToRefresh({
       window.setTimeout(() => setIsRefreshing(false), 700);
     };
 
+    // touchmove ต้อง non-passive (preventDefault ระหว่างดึง) ซึ่งทำให้ browser ต้องรอ JS ก่อนเลื่อนหน้าทุกครั้ง
+    // → ติดตั้งเฉพาะตอนที่ดึงได้จริง (จอมือถือ + หน้าอยู่บนสุด) ถอดออกเมื่อเลื่อนลงไปแล้ว
+    let moveAttached = false;
+    const syncMoveListener = () => {
+      const root = getRoot();
+      const want = isMobileViewport() && !!root && isRootAtTop(root);
+      if (want && !moveAttached) {
+        window.addEventListener("touchmove", handleTouchMove, { passive: false });
+        moveAttached = true;
+      } else if (!want && moveAttached && !isPullingRef.current) {
+        window.removeEventListener("touchmove", handleTouchMove);
+        moveAttached = false;
+      }
+    };
+    const root = getRoot();
+    syncMoveListener();
+    root?.addEventListener("scroll", syncMoveListener, { passive: true });
+    window.addEventListener("resize", syncMoveListener, { passive: true });
+
     window.addEventListener("touchstart", handleTouchStart, { passive: true });
-    window.addEventListener("touchmove", handleTouchMove, { passive: false });
     window.addEventListener("touchend", handleTouchEnd, { passive: true });
     window.addEventListener("touchcancel", resetPull, { passive: true });
     return () => {
+      root?.removeEventListener("scroll", syncMoveListener);
+      window.removeEventListener("resize", syncMoveListener);
       window.removeEventListener("touchstart", handleTouchStart);
       window.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("touchend", handleTouchEnd);