@suphark/ui 0.59.1 → 0.60.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.59.1",
+  "version": "0.60.0",
   "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/data-table/data-table-filter-sections.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import { cn } from "@suphark/ui/lib/utils";
+import type { Table } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import type { FacetedFilterConfig } from "./types";
+
+/**
+ * `variant="quiet"`: ตัวกรองแบบรายการติ๊กในแผ่นตัวกรอง — หัวข้อเปิดไว้ตั้งแต่แรก แถวสูง 44px
+ * แต่ละค่ามีจำนวนแถวกำกับ (แทนปุ่ม popover ต่อคอลัมน์ของตัวกรองปกติ)
+ */
+export function DataTableFilterSections<TData>({
+  table,
+  filters,
+}: {
+  table: Table<TData>;
+  filters: FacetedFilterConfig[];
+}) {
+  return (
+    <div className="flex flex-col">
+      {filters.map((filter) => (
+        <FilterSection key={filter.columnId} table={table} filter={filter} />
+      ))}
+    </div>
+  );
+}
+
+function FilterSection<TData>({
+  table,
+  filter,
+}: {
+  table: Table<TData>;
+  filter: FacetedFilterConfig;
+}) {
+  const [open, setOpen] = React.useState(true);
+  const id = React.useId();
+  const column = table.getColumn(filter.columnId);
+  if (!column) return null;
+  // จำนวนต่อค่า: ใช้ที่แอปส่งมา (`getFacetedUniqueValues`) ถ้ามี ไม่งั้นนับเองจากแถวที่ผ่านตัวกรองคอลัมน์อื่น
+  const provided = column.getFacetedUniqueValues();
+  const counted = new Map<unknown, number>();
+  if (!provided || provided.size === 0) {
+    for (const row of column.getFacetedRowModel().rows) {
+      const key = String(row.getValue(filter.columnId));
+      counted.set(key, (counted.get(key) ?? 0) + 1);
+    }
+  }
+  const facets = provided && provided.size > 0 ? provided : counted;
+  const current = column.getFilterValue();
+  const selected = new Set(Array.isArray(current) ? current.map(String) : []);
+
+  const toggle = (value: string) => {
+    const next = new Set(selected);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    column.setFilterValue(next.size ? Array.from(next) : undefined);
+  };
+
+  return (
+    <section className="border-b last:border-b-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => setOpen((value) => !value)}
+        className="flex h-11 w-full items-center justify-between text-muted-foreground text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+      >
+        <span>
+          {filter.title}
+          {selected.size > 0 && (
+            <span className="ms-1.5 font-semibold text-foreground tabular-nums">
+              {selected.size}
+            </span>
+          )}
+        </span>
+        <ChevronDown
+          aria-hidden="true"
+          className={cn("size-4 transition-transform", open && "rotate-180")}
+        />
+      </button>
+      <div id={id} hidden={!open}>
+        {filter.options.map((option) => {
+          const value = String(option.value);
+          const count = facets?.get(option.value) ?? facets?.get(value);
+          return (
+            <label
+              key={value}
+              className="flex h-11 cursor-pointer items-center gap-3 border-t text-sm first:border-t-0"
+            >
+              <Checkbox
+                aria-label={option.label}
+                checked={selected.has(value)}
+                onCheckedChange={() => toggle(value)}
+              />
+              {option.icon && <option.icon className="size-4 text-muted-foreground" />}
+              <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              {count !== undefined && (
+                <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
+              )}
+            </label>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

@@ -26,6 +26,7 @@ import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import type { FacetedFilterConfig } from ".";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter";
+import { DataTableFilterSections } from "./data-table-filter-sections";
 import { DataTableViewOptions } from "./data-table-view-option";
 
 interface DataTableToolbarProps<TData> {
@@ -159,23 +160,47 @@ export function DataTableToolbar<TData>({
             {text.table?.filtersDescription ?? "เลือกได้หลายเงื่อนไข ผลลัพธ์จะอัปเดตทันที"}
           </SheetDescription>
           <SheetClose
-            render={<Button variant="ghost" size="icon-sm" className="absolute top-3 right-3" />}
+            render={
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="absolute top-3 right-3 pointer-coarse:h-11 pointer-coarse:w-11"
+              />
+            }
           >
             <X />
             <span className="sr-only">{text.table?.closeFilters ?? "ปิดตัวกรอง"}</span>
           </SheetClose>
         </SheetHeader>
         <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-4">
-          {renderFilterControls(true)}
+          {variant === "quiet" && facetedFilters ? (
+            <DataTableFilterSections table={table} filters={facetedFilters} />
+          ) : (
+            renderFilterControls(true)
+          )}
           {toolbarFilters}
         </div>
-        {isFiltered && (
-          <SheetFooter className="border-t">
-            <Button variant="secondary" onClick={resetUserFilters}>
-              <X />
-              ล้างตัวกรองทั้งหมด
+        {variant === "quiet" ? (
+          <SheetFooter className="grid grid-cols-2 gap-2 border-t">
+            <Button variant="outline" className="pointer-coarse:h-11" onClick={resetUserFilters}>
+              {text.table?.clearFilters ?? "ล้าง"}
             </Button>
+            <SheetClose render={<Button className="pointer-coarse:h-11" />}>
+              {(text.table?.showResults ?? "ดู {count} รายการ").replace(
+                "{count}",
+                String(table.getFilteredRowModel().rows.length),
+              )}
+            </SheetClose>
           </SheetFooter>
+        ) : (
+          isFiltered && (
+            <SheetFooter className="border-t">
+              <Button variant="secondary" onClick={resetUserFilters}>
+                <X />
+                ล้างตัวกรองทั้งหมด
+              </Button>
+            </SheetFooter>
+          )
         )}
       </SheetContent>
     </Sheet>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SelectionBar } from "@suphark/ui/components/shared/selection-bar";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
@@ -84,10 +85,26 @@ export function DataTable<TData, TValue>({
   variant = "default",
   defaultDensity = "comfortable",
   selectionActions,
+  densityStorageKey,
 }: DataTableProps<TData, TValue>) {
   const text = useUiText();
   const quiet = variant === "quiet";
-  const [density, setDensity] = React.useState<"comfortable" | "compact">(defaultDensity);
+  const [density, setDensityState] = React.useState<"comfortable" | "compact">(defaultDensity);
+  // จำความหนาแน่น: อ่านหลัง mount (กัน hydration mismatch) — localStorage ใช้ไม่ได้ก็ข้าม
+  React.useEffect(() => {
+    if (!densityStorageKey) return;
+    try {
+      const saved = localStorage.getItem(densityStorageKey);
+      if (saved === "compact" || saved === "comfortable") setDensityState(saved);
+    } catch {}
+  }, [densityStorageKey]);
+  const setDensity = (next: "comfortable" | "compact") => {
+    setDensityState(next);
+    if (!densityStorageKey) return;
+    try {
+      localStorage.setItem(densityStorageKey, next);
+    } catch {}
+  };
   const { table } = useDataTable({
     columns,
     data,
@@ -327,6 +344,7 @@ export function DataTable<TData, TValue>({
         table.getFilteredSelectedRowModel().rows.length > 0 && (
           <SelectionBar
             variant="pill"
+            label={text.table?.selectedPill ?? "{count} รายการ"}
             count={table.getFilteredSelectedRowModel().rows.length}
             onClear={() => table.resetRowSelection()}
           >
@@ -356,92 +374,233 @@ const QUIET_TABLE = [
 
 const SLOT_ORDER: DataTableMobileSlot[] = ["title", "end", "sub", "status", "meta"];
 
-/** `variant="quiet"` บนมือถือ: รายการแถวละ 3 บรรทัดจากคอลัมน์ที่ใส่ `meta.mobile` */
+const LONG_PRESS_MS = 500;
+const HINT_KEY = "ui:data-table:long-press-hint";
+
+/** กดค้าง (≥ 500 ms โดยไม่ขยับเกิน 8 px) → เรียก `onLongPress`; `fired` บอกว่า click ถัดไปคือแรงที่ตามหลังการกดค้าง */
+function useLongPress(onLongPress: () => void, enabled: boolean) {
+  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const origin = React.useRef<{ x: number; y: number } | null>(null);
+  const fired = React.useRef(false);
+  const cancel = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  React.useEffect(() => cancel, []);
+  const handlers = {
+    onPointerDown: (event: React.PointerEvent) => {
+      // ล้างธงของการกดค้างรอบก่อนทุกครั้งที่เริ่มแตะใหม่ (แม้ปิดการกดค้างอยู่)
+      fired.current = false;
+      cancel();
+      if (!enabled) return;
+      origin.current = { x: event.clientX, y: event.clientY };
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        fired.current = true;
+        onLongPress();
+      }, LONG_PRESS_MS);
+    },
+    onPointerMove: (event: React.PointerEvent) => {
+      const start = origin.current;
+      if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > 8) cancel();
+    },
+    onPointerUp: cancel,
+    onPointerCancel: cancel,
+    onPointerLeave: cancel,
+    // เมนูบริบทของเบราว์เซอร์มือถือเด้งตอนกดค้าง — กันไว้เฉพาะช่วงที่เพิ่งกดค้างสำเร็จ
+    onContextMenu: (event: React.MouseEvent) => {
+      if (fired.current) event.preventDefault();
+    },
+  };
+  return { fired, handlers };
+}
+
+/**
+ * `variant="quiet"` บนมือถือ: รายการแถวละ 3 บรรทัดจากคอลัมน์ที่ใส่ `meta.mobile`
+ * ช่องเลือก (คอลัมน์ `select`) ซ่อนจากสายตาจนกว่าจะเลือก — กดค้างที่แถวเพื่อเข้าโหมดเลือกหมู่,
+ * แตะแถวเพื่อสลับ · คีย์บอร์ด/โปรแกรมอ่านจอยังเข้าถึงช่องเลือกได้ตลอด
+ */
 function QuietMobileList<TData>({
   table,
 }: {
   table: import("@tanstack/react-table").Table<TData>;
 }) {
+  const text = useUiText();
   const slotOf = (column: { columnDef: { meta?: unknown } }) =>
     (column.columnDef.meta as { mobile?: DataTableMobileSlot } | undefined)?.mobile;
   const rows = table.getRowModel().rows;
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+  const selecting = selectedCount > 0;
+  const hasSelect = table.getAllLeafColumns().some((column) => column.id === "select");
+
+  // บรรทัดบอกใบ้: แสดงครั้งแรกครั้งเดียว (หายเองใน 6 วินาที หรือเมื่อกดค้างสำเร็จ) แล้วจำไว้
+  const [hint, setHint] = React.useState(false);
+  const markHintSeen = React.useCallback(() => {
+    setHint(false);
+    try {
+      localStorage.setItem(HINT_KEY, "1");
+    } catch {}
+  }, []);
+  React.useEffect(() => {
+    if (!hasSelect) return;
+    try {
+      if (localStorage.getItem(HINT_KEY)) return;
+    } catch {}
+    setHint(true);
+    const id = setTimeout(markHintSeen, 6000);
+    return () => clearTimeout(id);
+  }, [hasSelect, markHintSeen]);
+
   return (
-    <ul className="divide-y overflow-hidden rounded-xl border bg-card sm:hidden">
-      {rows.map((row) => {
-        const cells = row.getVisibleCells();
-        const pick = (slot: DataTableMobileSlot) =>
-          cells.filter((cell) => slotOf(cell.column) === slot);
-        const select = cells.find((cell) => cell.column.id === "select");
-        return (
-          <li
-            key={row.id}
-            data-state={row.getIsSelected() ? "selected" : undefined}
-            className="flex items-start gap-3 px-4 py-2.5 data-[state=selected]:bg-primary/[0.07] data-[state=selected]:shadow-[inset_3px_0_0_var(--primary)]"
+    <div className="flex flex-col gap-2 sm:hidden">
+      {selecting && (
+        <div
+          role="status"
+          aria-live="polite"
+          className="flex h-11 items-center justify-between px-1 text-sm"
+        >
+          <span className="font-semibold">
+            {(text.table?.selectedCount ?? "เลือก {count} รายการ").replace(
+              "{count}",
+              String(selectedCount),
+            )}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-primary pointer-coarse:h-11"
+            onClick={() => table.toggleAllPageRowsSelected(true)}
           >
-            {select && (
-              // ขยายพื้นที่แตะเป็น 44px (ช่องติ๊กจริงเล็ก 16px); แตะส่วนที่เกินช่องก็สลับการเลือก
-              // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดใช้ช่องติ๊กข้างใน
-              // biome-ignore lint/a11y/noStaticElementInteractions: เป็นแค่พื้นที่แตะเสริม
+            {text.table?.selectAll ?? "เลือกทั้งหมด"}
+          </Button>
+        </div>
+      )}
+      <ul className="divide-y overflow-hidden rounded-xl border bg-card">
+        {rows.map((row) => (
+          <QuietMobileRow
+            key={row.id}
+            row={row}
+            selecting={selecting}
+            canLongPress={hasSelect && row.getCanSelect()}
+            slotOf={slotOf}
+            onLongPress={() => {
+              row.toggleSelected(true);
+              markHintSeen();
+              try {
+                navigator.vibrate?.(10);
+              } catch {}
+            }}
+          />
+        ))}
+      </ul>
+      {!selecting && hint && (
+        <p className="text-center text-muted-foreground text-xs">
+          {text.table?.longPressHint ?? "กดค้างที่แถวเพื่อเลือกหมู่"}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function QuietMobileRow<TData>({
+  row,
+  selecting,
+  canLongPress,
+  slotOf,
+  onLongPress,
+}: {
+  row: import("@tanstack/react-table").Row<TData>;
+  selecting: boolean;
+  canLongPress: boolean;
+  slotOf: (column: { columnDef: { meta?: unknown } }) => DataTableMobileSlot | undefined;
+  onLongPress: () => void;
+}) {
+  const { fired, handlers } = useLongPress(onLongPress, canLongPress && !selecting);
+  const cells = row.getVisibleCells();
+  const pick = (slot: DataTableMobileSlot) => cells.filter((cell) => slotOf(cell.column) === slot);
+  const select = cells.find((cell) => cell.column.id === "select");
+  return (
+    <li
+      data-state={row.getIsSelected() ? "selected" : undefined}
+      {...handlers}
+      onClick={(event) => {
+        // click ที่ตามหลังการกดค้างสำเร็จ ไม่นับเป็นการแตะ (ไม่งั้นเลือกแล้วถูกยกเลิกทันที)
+        if (fired.current) {
+          fired.current = false;
+          return;
+        }
+        if (!selecting || !canLongPress) return;
+        if ((event.target as HTMLElement).closest("a,button,input,[role=checkbox]")) return;
+        row.toggleSelected();
+      }}
+      className={cn(
+        "flex items-start gap-3 px-4 py-2.5 data-[state=selected]:bg-primary/[0.07] data-[state=selected]:shadow-[inset_3px_0_0_var(--primary)]",
+        selecting && "cursor-pointer",
+      )}
+    >
+      {select && (
+        // ขยายพื้นที่แตะเป็น 44px (ช่องติ๊กจริงเล็ก 16px); แตะส่วนที่เกินช่องก็สลับการเลือก
+        // ยังไม่เลือก = ซ่อนจากสายตาแต่ยังโฟกัสด้วยคีย์บอร์ดได้ (sr-only + แสดงตอนโฟกัส)
+        // biome-ignore lint/a11y/useKeyWithClickEvents: คีย์บอร์ดใช้ช่องติ๊กข้างใน
+        // biome-ignore lint/a11y/noStaticElementInteractions: เป็นแค่พื้นที่แตะเสริม
+        <div
+          className={cn(
+            "-m-3.5 -mt-3 shrink-0 p-3.5",
+            !selecting && "sr-only focus-within:not-sr-only",
+          )}
+          onClick={(event) => {
+            if (event.target === event.currentTarget) row.toggleSelected();
+          }}
+        >
+          {flexRender(select.column.columnDef.cell, select.getContext())}
+        </div>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        {SLOT_ORDER.map((slot) => {
+          const found = pick(slot);
+          if (slot === "meta" || found.length === 0) return null;
+          const content = found.map((cell) => (
+            <span key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
+          ));
+          if (slot === "title") {
+            const end = pick("end");
+            return (
               <div
-                className="-m-3.5 -mt-3 shrink-0 p-3.5"
-                onClick={(event) => {
-                  if (event.target === event.currentTarget) row.toggleSelected();
-                }}
+                key={slot}
+                className="flex items-baseline justify-between gap-2 font-semibold text-sm"
               >
-                {flexRender(select.column.columnDef.cell, select.getContext())}
+                <span className="min-w-0 truncate">{content}</span>
+                <span className="shrink-0 tabular-nums">
+                  {end.map((cell) => (
+                    <span key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </span>
+                  ))}
+                </span>
               </div>
-            )}
-            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-              {SLOT_ORDER.map((slot) => {
-                const found = pick(slot);
-                if (slot === "meta" || found.length === 0) return null;
-                const content = found.map((cell) => (
-                  <span key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </span>
-                ));
-                if (slot === "title") {
-                  const end = pick("end");
-                  return (
-                    <div
-                      key={slot}
-                      className="flex items-baseline justify-between gap-2 font-semibold text-sm"
-                    >
-                      <span className="min-w-0 truncate">{content}</span>
-                      <span className="shrink-0 tabular-nums">
-                        {end.map((cell) => (
-                          <span key={cell.id}>
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </span>
-                        ))}
-                      </span>
-                    </div>
-                  );
-                }
-                if (slot === "end") return null;
-                if (slot === "sub") {
-                  return (
-                    <div key={slot} className="truncate text-muted-foreground text-sm">
-                      {content}
-                    </div>
-                  );
-                }
-                const meta = pick("meta");
-                return (
-                  <div key={slot} className="flex items-center gap-1.5 text-xs">
-                    {content}
-                    {meta.map((cell) => (
-                      <span key={cell.id} className="text-muted-foreground">
-                        · {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </span>
-                    ))}
-                  </div>
-                );
-              })}
+            );
+          }
+          if (slot === "end") return null;
+          if (slot === "sub") {
+            return (
+              <div key={slot} className="truncate text-muted-foreground text-sm">
+                {content}
+              </div>
+            );
+          }
+          const meta = pick("meta");
+          return (
+            <div key={slot} className="flex items-center gap-1.5 text-xs">
+              {content}
+              {meta.map((cell) => (
+                <span key={cell.id} className="text-muted-foreground">
+                  · {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </span>
+              ))}
             </div>
-          </li>
-        );
-      })}
-    </ul>
+          );
+        })}
+      </div>
+    </li>
   );
 }

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

@@ -117,6 +117,11 @@ export interface DataTableProps<TData, TValue> {
   variant?: "default" | "quiet";
   /** `quiet`: ความหนาแน่นเริ่มต้น (ผู้ใช้สลับได้ที่แถบเครื่องมือ) — ค่าเริ่มต้น comfortable */
   defaultDensity?: "comfortable" | "compact";
+  /**
+   * `quiet`: จำความหนาแน่นที่ผู้ใช้เลือกไว้ใน localStorage ด้วยคีย์นี้ (เช่น `"po-table-density"`) —
+   * ไม่ส่ง = ไม่จำ (กลับเป็น `defaultDensity` ทุกครั้ง) · localStorage ใช้ไม่ได้ก็ทำงานต่อโดยไม่จำ
+   */
+  densityStorageKey?: string;
   /** `quiet`: ปุ่มคำสั่งในแคปซูลเลือกหมู่ (ส่งออก/ลบ …) — ไม่ส่ง = แคปซูลมีแค่จำนวนที่เลือกและปุ่มล้าง */
   selectionActions?: (table: Table<TData>) => React.ReactNode;
 }

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

@@ -67,12 +67,20 @@ export function SelectionBar({
           ? "h-11 rounded-full bg-primary py-0 ps-4 pe-2 text-primary-foreground"
           : "rounded-xl border bg-card",
         variant !== "inline" &&
-          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 max-w-[calc(100vw-2rem)]",
+          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 w-max 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">
+      <div
+        className={cn(
+          "flex min-w-0 items-center gap-1.5",
+          // pill: บรรทัดเดียวเสมอ ปุ่มไม่ตัดคำ และปุ่มที่แอปส่งมาใช้สีตัวอักษรบนพื้นสีหลัก
+          pill
+            ? "[&_button]:whitespace-nowrap [&_button]:text-primary-foreground [&_button]:hover:bg-primary-foreground/15 pointer-coarse:[&_button]:h-11"
+            : "flex-wrap",
+        )}
+      >
         {actions?.map((action) => (
           <Button
             key={action.label}
@@ -98,6 +106,7 @@ export function SelectionBar({
         onClick={onClear}
         className={cn(
           "ml-auto shrink-0",
+          pill && "pointer-coarse:h-11 pointer-coarse:w-11",
           pill && "rounded-full hover:bg-primary-foreground/15 hover:text-primary-foreground",
         )}
       >

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

@@ -85,6 +85,14 @@ export interface UiText {
     rangeOf: string;
     shownOf: string;
     density: string;
+    /** `variant="quiet"` มือถือ — `{count}` */
+    selectedCount: string;
+    /** ข้อความในแคปซูลเลือกหมู่ (สั้นกว่า `selectedCount` เพราะหัวรายการมือถือบอก "เลือก N รายการ" อยู่แล้ว) */
+    selectedPill: string;
+    selectAll: string;
+    longPressHint: string;
+    clearFilters: string;
+    showResults: string;
     rowsSelected: string;
     noResults: string;
     deleteTitle: string;
@@ -323,6 +331,12 @@ export const UI_TEXT_TH: UiText = {
     rangeOf: "{from}–{to} จาก {total}",
     shownOf: "{shown} จาก {total} รายการ",
     density: "ความหนาแน่นของแถว",
+    selectedCount: "เลือก {count} รายการ",
+    selectedPill: "{count} รายการ",
+    selectAll: "เลือกทั้งหมด",
+    longPressHint: "กดค้างที่แถวเพื่อเลือกหมู่",
+    clearFilters: "ล้าง",
+    showResults: "ดู {count} รายการ",
     rowsSelected: "เลือก {selected} จาก {total} แถว",
     noResults: "ไม่พบข้อมูล",
     deleteTitle: "ยืนยันการลบ",
@@ -540,6 +554,12 @@ export const UI_TEXT_EN: UiText = {
     rangeOf: "{from}–{to} of {total}",
     shownOf: "{shown} of {total} items",
     density: "Row density",
+    selectedCount: "{count} selected",
+    selectedPill: "{count} items",
+    selectAll: "Select all",
+    longPressHint: "Press and hold a row to select several",
+    clearFilters: "Clear",
+    showResults: "Show {count} items",
     rowsSelected: "{selected} of {total} row(s) selected",
     noResults: "No results",
     deleteTitle: "Are you sure?",