@suphark/ui 0.27.1 → 0.29.0

package/src/components/shared/selection-bar.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface SelectionAction {
+  label: string;
+  onClick: () => void;
+  icon?: ReactNode;
+  destructive?: boolean;
+  disabled?: boolean;
+}
+
+export interface SelectionBarProps {
+  /** จำนวนที่เลือก — 0 = ไม่แสดงอะไรเลย */
+  count: number;
+  /** ล้างการเลือก (เช่น `table.resetRowSelection`) */
+  onClear: () => void;
+  /** ปุ่มคำสั่งหมู่ — ใส่เป็น array หรือจะส่ง `children` เป็น element เองก็ได้ */
+  actions?: ReadonlyArray<SelectionAction>;
+  children?: ReactNode;
+  /** ข้อความนับ ใช้ `{count}` เช่น "เลือก {count} รายการ" (ไม่ส่ง = `UiText.selection.selected`) */
+  label?: string;
+  /** floating = แถบลอยกลางล่างจอ (ค่าเริ่มต้น) · inline = แถบในหน้า เหนือตาราง */
+  variant?: "floating" | "inline";
+  className?: string;
+}
+
+/**
+ * แถบคำสั่งหมู่ที่โผล่เมื่อเลือกหลายแถว — "เลือก N รายการ" + ปุ่มคำสั่ง + ปุ่มล้าง
+ * ใช้คู่ `DataTable` (`table.getFilteredSelectedRowModel().rows`) หรือ `SimpleTable` ที่แอปคุม state เอง
+ * คำสั่งที่ย้อนกลับไม่ได้ให้ส่ง element ของ `ConfirmActionButton`/`DeleteManyButton` ผ่าน `children`
+ *
+ *   <SelectionBar count={selected.length} onClear={() => table.resetRowSelection()}
+ *     actions={[{ label: "ส่งออก", onClick: exportRows }, { label: "ลบ", destructive: true, onClick: removeRows }]} />
+ */
+export function SelectionBar({
+  count,
+  onClear,
+  actions,
+  children,
+  label,
+  variant = "floating",
+  className,
+}: SelectionBarProps) {
+  const text = useUiText();
+  if (count <= 0) return null;
+
+  const template = label ?? text.selection?.selected ?? "เลือก {count} รายการ";
+  const message = template.replace("{count}", String(count));
+
+  return (
+    <div
+      data-slot="selection-bar"
+      // อ่านออกเสียงจำนวนที่เลือกให้ screen reader โดยไม่ขัดจังหวะ
+      aria-live="polite"
+      className={cn(
+        "flex items-center gap-2 rounded-xl border bg-card px-3 py-2 shadow-lg",
+        variant === "floating" &&
+          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 max-w-[calc(100vw-2rem)]",
+        className,
+      )}
+    >
+      <span className="shrink-0 font-medium text-sm tabular-nums">{message}</span>
+      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+        {actions?.map((action) => (
+          <Button
+            key={action.label}
+            size="sm"
+            variant={action.destructive ? "destructive" : "outline"}
+            disabled={action.disabled}
+            onClick={action.onClick}
+          >
+            {action.icon}
+            {action.label}
+          </Button>
+        ))}
+        {children}
+      </div>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label={text.selection?.clear ?? "ล้างการเลือก"}
+        onClick={onClear}
+        className="ml-auto shrink-0"
+      >
+        <XIcon />
+      </Button>
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -38,6 +39,10 @@ export function SimpleTable<T>({
   getRowKey,
   empty = "ไม่มีข้อมูล",
   onRowClick,
+  selected,
+  onSelectedChange,
+  selectLabel = "เลือกแถว",
+  selectAllLabel = "เลือกทั้งหมด",
   caption,
   className,
 }: {
@@ -45,6 +50,13 @@ export function SimpleTable<T>({
   rows: ReadonlyArray<T>;
   getRowKey: (row: T, index: number) => string | number;
   empty?: ReactNode;
+  /** คีย์ของแถวที่เลือก — ส่งคู่กับ `onSelectedChange` เพื่อเปิดช่องติ๊กหน้าแถว (ใช้คู่ `SelectionBar`) */
+  selected?: ReadonlyArray<string | number>;
+  onSelectedChange?: (selected: Array<string | number>) => void;
+  /** aria-label ของช่องติ๊กแต่ละแถว (ค่าเริ่มต้น "เลือกแถว") */
+  selectLabel?: string;
+  /** aria-label ของช่องติ๊กบนหัวตาราง (ค่าเริ่มต้น "เลือกทั้งหมด") */
+  selectAllLabel?: string;
   /** คลิกทั้งแถว (เช่นเปิดรายละเอียด) — ปุ่มในแถวควร stopPropagation เอง */
   onRowClick?: (row: T) => void;
   /** คำอธิบายตารางสำหรับ screen reader (sr-only) */
@@ -53,12 +65,37 @@ export function SimpleTable<T>({
 }) {
   const alignClass = (a?: "left" | "center" | "right") =>
     a === "right" ? "text-right tabular-nums" : a === "center" ? "text-center" : undefined;
+
+  const selectable = Boolean(onSelectedChange);
+  const selectedKeys = new Set(selected ?? []);
+  const allKeys = rows.map((row, i) => getRowKey(row, i));
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedKeys.has(k));
+  const someSelected = !allSelected && allKeys.some((k) => selectedKeys.has(k));
+
+  function toggleRow(key: string | number, checked: boolean) {
+    const next = new Set(selectedKeys);
+    if (checked) next.add(key);
+    else next.delete(key);
+    onSelectedChange?.([...next]);
+  }
   return (
     <div className={cn("overflow-hidden rounded-xl border bg-card", className)}>
       <Table>
         {caption && <caption className="sr-only">{caption}</caption>}
         <TableHeader>
           <TableRow>
+            {selectable && (
+              <TableHead className="w-10">
+                <Checkbox
+                  aria-label={selectAllLabel}
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  // ครึ่งหนึ่ง: ซ่อนเครื่องหมายถูก แสดงขีดแทน (ไฟล์ shadcn ไม่มีไอคอนขีด)
+                  className="data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-indeterminate:before:absolute data-indeterminate:before:h-0.5 data-indeterminate:before:w-2 data-indeterminate:before:rounded-full data-indeterminate:before:bg-current [&[data-indeterminate]_svg]:hidden"
+                  onCheckedChange={(checked) => onSelectedChange?.(checked ? allKeys : [])}
+                />
+              </TableHead>
+            )}
             {columns.map((c) => (
               <TableHead key={c.key} className={cn(alignClass(c.align), c.className)}>
                 {c.header}
@@ -68,14 +105,26 @@ export function SimpleTable<T>({
         </TableHeader>
         <TableBody>
           {rows.length === 0 ? (
-            <EmptyRow colSpan={columns.length}>{empty}</EmptyRow>
+            <EmptyRow colSpan={columns.length + (selectable ? 1 : 0)}>{empty}</EmptyRow>
           ) : (
             rows.map((row, i) => (
               <TableRow
                 key={getRowKey(row, i)}
                 onClick={onRowClick ? () => onRowClick(row) : undefined}
-                className={cn(onRowClick && "cursor-pointer")}
+                data-selected={selectedKeys.has(getRowKey(row, i)) || undefined}
+                className={cn(onRowClick && "cursor-pointer", "data-selected:bg-muted/50")}
               >
+                {selectable && (
+                  <TableCell className="w-10">
+                    <Checkbox
+                      aria-label={selectLabel}
+                      checked={selectedKeys.has(getRowKey(row, i))}
+                      onCheckedChange={(checked) => toggleRow(getRowKey(row, i), checked === true)}
+                      // คลิกช่องติ๊กไม่ให้ไปโดน onRowClick ของทั้งแถว
+                      onClick={(event) => event.stopPropagation()}
+                    />
+                  </TableCell>
+                )}
                 {columns.map((c) => (
                   <TableCell key={c.key} className={cn(alignClass(c.align), c.className)}>
                     {c.cell

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

@@ -8,7 +8,7 @@ import {
 } from "@suphark/ui/components/ui/accordion";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@suphark/ui/components/ui/tabs";
 import { cn } from "@suphark/ui/lib/utils";
-import type { ReactNode } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
 export interface SimpleTabItem {
   value: string;
@@ -49,6 +49,26 @@ export function SimpleTabs({
   className?: string;
   listClassName?: string;
 }) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const [edges, setEdges] = useState({ start: false, end: false });
+
+  const updateEdges = useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    // 4px กันเศษจากการปัดทศนิยม
+    setEdges({ start: el.scrollLeft > 4, end: el.scrollLeft < max - 4 });
+  }, []);
+
+  useEffect(() => {
+    updateEdges();
+    const el = listRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateEdges);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [updateEdges]);
+
   return (
     <Tabs
       value={value}
@@ -57,18 +77,39 @@ export function SimpleTabs({
       onValueChange={(v) => onValueChange?.(String(v))}
       className={className}
     >
-      <TabsList
-        variant={variant}
-        className={cn(fullWidth && "w-full", "max-w-full overflow-x-auto", listClassName)}
-      >
-        {items.map((item) => (
-          <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
-            {item.icon}
-            {item.label}
-            {item.badge}
-          </TabsTrigger>
-        ))}
-      </TabsList>
+      {/* แท็บเยอะเกินความกว้าง = เลื่อนแนวนอนได้ + เงาบอกว่ายังมีต่อ (ซ่อนแถบเลื่อน) */}
+      <div className="relative">
+        <TabsList
+          ref={listRef}
+          onScroll={updateEdges}
+          variant={variant}
+          className={cn(
+            fullWidth && "w-full",
+            "no-scrollbar max-w-full overflow-x-auto scroll-smooth",
+            listClassName,
+          )}
+        >
+          {items.map((item) => (
+            <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
+              {item.icon}
+              {item.label}
+              {item.badge}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {edges.start && (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-y-0 left-0 w-6 rounded-l-lg bg-gradient-to-r from-background to-transparent"
+          />
+        )}
+        {edges.end && (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-y-0 right-0 w-6 rounded-r-lg bg-gradient-to-l from-background to-transparent"
+          />
+        )}
+      </div>
       {items.map((item) => (
         <TabsContent key={item.value} value={item.value}>
           {item.content}

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

@@ -20,6 +20,33 @@ export interface UiText {
   confirmTitle?: string;
   /** RowActions/ConfirmActionButton: action โยน error (optional — ค่าเริ่มต้น "ดำเนินการไม่สำเร็จ") */
   actionFailed?: string;
+  /** InlineEdit: ปุ่มดินสอ (optional — "แก้ไข") */
+  edit?: string;
+  /** SortableList (optional) — ที่จับลาก + คำอธิบายสำหรับ screen reader */
+  sortable?: Partial<{
+    handle: string;
+    instructions: string;
+    /** ใช้ `{index}` / `{total}` */
+    started: string;
+    moved: string;
+    dropped: string;
+    cancelled: string;
+  }>;
+  /** SelectionBar (optional) — `selected` ใช้ `{count}` */
+  selection?: Partial<{ selected: string; clear: string }>;
+  /** DataTable (optional) — `rowsSelected` ใช้ `{selected}`/`{total}`, `pageOf` ใช้ `{page}`/`{pages}` */
+  table?: Partial<{
+    rowsPerPage: string;
+    pageOf: string;
+    rowsSelected: string;
+    noResults: string;
+    deleteTitle: string;
+    /** ใช้ `{name}` และ `{resource}` (ชื่อชนิดข้อมูลที่ส่งมาทาง `resourceName`) */
+    deleteDescription: string;
+    deleting: string;
+    deleted: string;
+    delete: string;
+  }>;
   /** DialogsProvider: ปุ่มปิดของ alert (optional — ค่าเริ่มต้น "ตกลง") */
   ok?: string;
   /** DialogsProvider: หัวกล่อง alert (optional — ค่าเริ่มต้น "แจ้งให้ทราบ") */
@@ -135,6 +162,27 @@ export const UI_TEXT_TH: UiText = {
   confirm: "ยืนยัน",
   confirmTitle: "ยืนยันการทำรายการ",
   actionFailed: "ดำเนินการไม่สำเร็จ",
+  edit: "แก้ไข",
+  selection: { selected: "เลือก {count} รายการ", clear: "ล้างการเลือก" },
+  sortable: {
+    handle: "ลากเพื่อจัดลำดับ",
+    instructions: "กด Space เพื่อเริ่มลาก ใช้ปุ่มลูกศรเลื่อน แล้วกด Space อีกครั้งเพื่อวาง (Esc = ยกเลิก)",
+    started: "เริ่มลากรายการที่ {index} จาก {total}",
+    moved: "ย้ายไปตำแหน่งที่ {index} จาก {total}",
+    dropped: "วางที่ตำแหน่งที่ {index} จาก {total}",
+    cancelled: "ยกเลิกการลาก",
+  },
+  table: {
+    rowsPerPage: "แถวต่อหน้า",
+    pageOf: "หน้า {page} จาก {pages}",
+    rowsSelected: "เลือก {selected} จาก {total} แถว",
+    noResults: "ไม่พบข้อมูล",
+    deleteTitle: "ยืนยันการลบ",
+    deleteDescription: "ลบ{resource} “{name}” แล้วกู้คืนไม่ได้",
+    deleting: "กำลังลบ{resource} “{name}”…",
+    deleted: "ลบ{resource} “{name}” แล้ว",
+    delete: "ลบ",
+  },
   ok: "ตกลง",
   alertTitle: "แจ้งให้ทราบ",
   promptTitle: "กรอกข้อมูล",
@@ -233,6 +281,28 @@ export const UI_TEXT_EN: UiText = {
   confirm: "Confirm",
   confirmTitle: "Please confirm",
   actionFailed: "Action failed",
+  edit: "Edit",
+  selection: { selected: "{count} selected", clear: "Clear selection" },
+  sortable: {
+    handle: "Drag to reorder",
+    instructions:
+      "Press Space to start dragging, use arrow keys to move, Space again to drop (Esc to cancel)",
+    started: "Picked up item {index} of {total}",
+    moved: "Moved to position {index} of {total}",
+    dropped: "Dropped at position {index} of {total}",
+    cancelled: "Dragging cancelled",
+  },
+  table: {
+    rowsPerPage: "Rows per page",
+    pageOf: "Page {page} of {pages}",
+    rowsSelected: "{selected} of {total} row(s) selected",
+    noResults: "No results",
+    deleteTitle: "Are you sure?",
+    deleteDescription: "Deleting{resource} “{name}” cannot be undone",
+    deleting: "Deleting{resource} “{name}”…",
+    deleted: "“{name}”{resource} deleted",
+    delete: "Delete",
+  },
   ok: "OK",
   alertTitle: "Notice",
   promptTitle: "Input required",