@squadbase/vantage 0.6.2-dev1.54bde93 → 0.6.2-dev1.56da87f

package/registry/ui/data-table.tsx

@@ -75,6 +75,140 @@ import { Input } from "@squadbase/vantage/ui"
 import { Skeleton } from "@squadbase/vantage/ui"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@squadbase/vantage/ui"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@squadbase/vantage/ui"
+import { useSyncExternalStore } from "react"
+
+/* ---------- inlined from @squadbase/squadkit registry/lib/locale.ts (internal to @squadbase/vantage) ---------- */
+
+/**
+ * The display language of the parts and the defaults that follow it.
+ *
+ * The language comes from `<html lang>`: a tag starting with `ja` reads Japanese, anything else English.
+ * Without a usable `lang` (missing, invalid, or no `document` — SSR, Node) the locale is `FALLBACK_LOCALE`
+ * (`en-US`). A `locale` passed explicitly (a prop, an argument) always wins.
+ *
+ * Parts read the locale through `useLocale` (`hooks/use-locale`) and pass it down; the pure helpers here
+ * and in `format` / `comparison` / `chart-*` take it as an argument and fall back to `documentLocale()`.
+ */
+
+/** The language of the built-in wording: Japanese or English. */
+type UiLanguage = "ja" | "en"
+
+/** The locale used when `<html lang>` gives none (and on the server). */
+const FALLBACK_LOCALE = "en-US"
+
+/** `"ja"` when `locale` starts with `ja` (`ja`, `ja-JP`), else `"en"`. A missing locale is `"en"`. */
+function uiLanguage(locale: string | null | undefined): UiLanguage {
+  return typeof locale === "string" && locale.trim().toLowerCase().startsWith("ja") ? "ja" : "en"
+}
+
+/** A BCP 47 tag in its canonical form (`en-gb` → `en-GB`), or `FALLBACK_LOCALE` when it is empty or invalid. */
+function normalizeLocale(tag: string | null | undefined): string {
+  const value = tag?.trim()
+  if (!value) return FALLBACK_LOCALE
+  try {
+    return Intl.getCanonicalLocales(value)[0] ?? FALLBACK_LOCALE
+  } catch {
+    return FALLBACK_LOCALE
+  }
+}
+
+/**
+ * The locale of the page: `document.documentElement.lang`, canonicalized. `FALLBACK_LOCALE` when it is empty or
+ * invalid, or there is no `document`. Parts read it through `useLocale`, never while rendering.
+ */
+function documentLocale(): string {
+  if (typeof document === "undefined") return FALLBACK_LOCALE
+  return normalizeLocale(document.documentElement?.getAttribute("lang"))
+}
+
+/** `locale` when given, else the page's locale (`documentLocale()`). */
+function resolveLocale(locale?: string | null): string {
+  return locale || documentLocale()
+}
+
+/** Picks the wording table of the locale's language. */
+function pickLocale<T>(table: { ja: T; en: T }, locale?: string | null): T {
+  return table[uiLanguage(resolveLocale(locale))]
+}
+
+/** The currency `format="currency"` uses without a `currency`: JPY for Japanese, USD otherwise. */
+function defaultCurrency(locale?: string | null): string {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? "JPY" : "USD"
+}
+
+/** The month a fiscal year starts in (1–12) when none is given: April for Japanese, January otherwise. */
+function defaultFiscalYearStartMonth(locale?: string | null): number {
+  return uiLanguage(resolveLocale(locale)) === "ja" ? 4 : 1
+}
+
+/** A day of the week, 0 = Sunday … 6 = Saturday (the `Date#getDay` / date-fns numbering). */
+type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+/** Locales whose week starts on Sunday when the runtime has no week data. */
+const SUNDAY_FIRST = new Set(["en", "en-US", "en-CA"])
+
+/**
+ * The first day of the week: Monday for Japanese; otherwise the locale's convention from `Intl.Locale`
+ * (`en-US` Sunday, `en-GB` Monday). Without week data in the runtime: Sunday for `en` / `en-US` / `en-CA`,
+ * Monday for the rest.
+ */
+function weekStartsOn(locale?: string | null): WeekDay {
+  const tag = normalizeLocale(resolveLocale(locale))
+  if (uiLanguage(tag) === "ja") return 1
+  try {
+    const info = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay: number }
+      weekInfo?: { firstDay: number }
+    }
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (typeof firstDay === "number" && firstDay >= 1 && firstDay <= 7) return (firstDay % 7) as WeekDay
+  } catch {
+    // Fall through to the table below.
+  }
+  return SUNDAY_FIRST.has(tag) ? 0 : 1
+}
+
+/* ---------- inlined from @squadbase/squadkit registry/hooks/use-locale.ts (internal to @squadbase/vantage) ---------- */
+
+const listeners = new Set<() => void>()
+let observer: MutationObserver | null = null
+
+/** One observer on `<html lang>` for every subscribed part. */
+function subscribe(onChange: () => void): () => void {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {}
+  listeners.add(onChange)
+  if (!observer) {
+    observer = new MutationObserver(() => {
+      for (const listener of [...listeners]) listener()
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] })
+  }
+  return () => {
+    listeners.delete(onChange)
+    if (listeners.size === 0 && observer) {
+      observer.disconnect()
+      observer = null
+    }
+  }
+}
+
+const serverLocale = () => FALLBACK_LOCALE
+
+/**
+ * The page's locale (`<html lang>`), following changes made while the page runs. On the server and during
+ * hydration it is `FALLBACK_LOCALE` (`en-US`), so the markup matches; it switches right after.
+ */
+function useDocumentLocale(): string {
+  return useSyncExternalStore(subscribe, documentLocale, serverLocale)
+}
+
+/** The locale a part renders in: its `locale` prop when given, else the page's (`useDocumentLocale`). */
+function useLocale(locale?: string | null): string {
+  const page = useDocumentLocale()
+  return locale || page
+}
+
+/* ---------- end of inlined code ---------- */
 
 /* ------------------------------------------------------------------- types */
 
@@ -164,6 +298,47 @@ declare module "@tanstack/react-table" {
   }
 }
 
+/* ------------------------------------------------------------ wording */
+
+const TEXT = {
+  ja: {
+    tones: { positive: "良好", warning: "注意", negative: "要対応", neutral: "中立" } as Record<ChartTone, string>,
+    toneNote: (label: string) => `（${label}）`,
+    selectAll: "全て選択",
+    selectRow: "行を選択",
+    trend: (points: number, first: string, last: string, min: string, max: string) =>
+      `${points}点の推移、${first}から${last}、最小${min}、最大${max}`,
+    noData: "データがありません",
+    pageSize: (size: number) => `${size}件`,
+    range: (total: number, start: number, end: number) => `${total}件中 ${start} - ${end} を表示`,
+    first: "最初",
+    previous: "前へ",
+    next: "次へ",
+    last: "最後",
+    columns: "表示する列",
+    exportCsv: "CSV を書き出す",
+  },
+  en: {
+    tones: { positive: "Good", warning: "Caution", negative: "Needs action", neutral: "Neutral" } as Record<ChartTone, string>,
+    toneNote: (label: string) => ` (${label})`,
+    selectAll: "Select all",
+    selectRow: "Select row",
+    trend: (points: number, first: string, last: string, min: string, max: string) =>
+      `Trend over ${points} points: ${first} to ${last}, min ${min}, max ${max}`,
+    noData: "No results.",
+    pageSize: (size: number) => `${size} / page`,
+    range: (total: number, start: number, end: number) => `Showing ${start}–${end} of ${total}`,
+    first: "First",
+    previous: "Previous",
+    next: "Next",
+    last: "Last",
+    columns: "Columns",
+    exportCsv: "Export CSV",
+  },
+} satisfies Record<UiLanguage, unknown>
+
+const useText = () => TEXT[uiLanguage(useLocale())]
+
 /* ------------------------------------------------------------ cell formatting */
 
 /** Resolve a column's `meta.format` for one row. */
@@ -187,29 +362,32 @@ function formatCellText<TData>(
   value: unknown,
   row: TData,
   meta: { format?: ValueFormat | ((row: TData) => ValueFormat); dateFormat?: DateStyle; timeZone?: string; nullLabel?: string },
+  locale: string,
 ): string {
   if (isMissingCell(value)) return meta.nullLabel ?? EMPTY_VALUE
   if (meta.dateFormat && (value instanceof Date || typeof value === "string" || typeof value === "number")) {
-    const text = formatDate(value, meta.dateFormat, undefined, { timeZone: meta.timeZone })
+    const text = formatDate(value, meta.dateFormat, locale, { timeZone: meta.timeZone })
     return text === EMPTY_VALUE ? String(value) : text
   }
   if (typeof value !== "number") return String(value)
-  return formatValue(value, resolveFormat(meta.format, row))
+  return formatValue(value, resolveFormat(meta.format, row), locale)
 }
 
 /** 意味色ごとの記号と色クラス。Tailwind が拾えるよう、クラスはリテラルで書く。 */
-const THRESHOLD_TONE_STYLES: Record<ChartTone, { Icon: LucideIcon; text: string; label: string }> = {
-  positive: { Icon: CircleCheck, text: "text-positive", label: "良好" },
-  warning: { Icon: TriangleAlert, text: "text-warning", label: "注意" },
-  negative: { Icon: CircleX, text: "text-negative", label: "要対応" },
-  neutral: { Icon: Minus, text: "text-neutral", label: "中立" },
+const THRESHOLD_TONE_STYLES: Record<ChartTone, { Icon: LucideIcon; text: string }> = {
+  positive: { Icon: CircleCheck, text: "text-positive" },
+  warning: { Icon: TriangleAlert, text: "text-warning" },
+  negative: { Icon: CircleX, text: "text-negative" },
+  neutral: { Icon: Minus, text: "text-neutral" },
 }
 
 /** `meta.thresholds` 列のセル。当たった規則の意味色と記号を値に添える（当たらなければ値だけ）。 */
 function ThresholdCell({ value, text, thresholds }: { value: unknown; text: string; thresholds: ChartThreshold[] }) {
+  const t = useText()
   const tone = typeof value === "number" ? toneForValue(value, thresholds) : undefined
   if (!tone) return <div className="text-right tabular-nums">{text}</div>
-  const { Icon, text: toneClass, label } = THRESHOLD_TONE_STYLES[tone]
+  const { Icon, text: toneClass } = THRESHOLD_TONE_STYLES[tone]
+  const label = t.tones[tone]
   return (
     <div
       data-slot="data-table-threshold-cell"
@@ -218,7 +396,7 @@ function ThresholdCell({ value, text, thresholds }: { value: unknown; text: stri
     >
       <Icon className="size-3.5 shrink-0" aria-hidden="true" />
       <span>{text}</span>
-      <span className="sr-only">（{label}）</span>
+      <span className="sr-only">{t.toneNote(label)}</span>
     </div>
   )
 }
@@ -367,7 +545,7 @@ export interface DataTableExportProps {
    * <DataTableExport scope="page" />
    */
   scope?: CsvScope
-  /** ボタンの文言。既定 `"CSV を書き出す"`。 */
+  /** ボタンの文言。既定はページの言語で `"CSV を書き出す"`（英語は `"Export CSV"`）。 */
   children?: ReactNode
   className?: string
 }
@@ -478,6 +656,8 @@ export function DataTable<TData, TValue>({
   className,
   children,
 }: DataTableProps<TData, TValue>) {
+  const locale = useLocale()
+  const t = TEXT[uiLanguage(locale)]
   const [sorting, setSorting] = useControlledState<SortingState>(sortingProp, [], onSortingChange)
 
   const [columnFilters, setColumnFilters] = useControlledState<ColumnFiltersState>(
@@ -526,7 +706,7 @@ export function DataTable<TData, TValue>({
         ...column,
         cell: ({ row, getValue }) => {
           const value = getValue()
-          const text = formatCellText(value, row.original, meta ?? {})
+          const text = formatCellText(value, row.original, meta ?? {}, locale)
           if (thresholds) return <ThresholdCell value={value} text={text} thresholds={thresholds} />
           if (aligned) return <div className="text-right tabular-nums">{text}</div>
           if (meta?.dateFormat) return <span className="tabular-nums">{text}</span>
@@ -543,14 +723,14 @@ export function DataTable<TData, TValue>({
           checked={table.getIsAllPageRowsSelected()}
           indeterminate={table.getIsSomePageRowsSelected()}
           onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
-          aria-label="全て選択"
+          aria-label={t.selectAll}
         />
       ),
       cell: ({ row }) => (
         <Checkbox
           checked={row.getIsSelected()}
           onCheckedChange={(checked) => row.toggleSelected(checked)}
-          aria-label="行を選択"
+          aria-label={t.selectRow}
         />
       ),
       enableSorting: false,
@@ -558,7 +738,7 @@ export function DataTable<TData, TValue>({
     }
 
     return [selectionColumn, ...formatted]
-  }, [columns, enableRowSelection])
+  }, [columns, enableRowSelection, locale, t])
 
   // TanStack's own `autoResetPageIndex` queues `resetPageIndex()` from inside a render-time memo, which
   // can fire before the component has mounted ("Can't perform a React state update on a component that
@@ -707,23 +887,31 @@ export function sparklineColumn<TData>({
       const raw = getValue() as readonly (number | null | undefined)[] | null
       const series = (raw ?? []).filter((v): v is number => typeof v === "number" && Number.isFinite(v))
       if (series.length < SPARKLINE_MIN_POINTS) return <span className="text-muted-foreground">{EMPTY_VALUE}</span>
-      const f = (v: number) => formatValue(v, format)
-      const first = series[0] as number
-      const last = series[series.length - 1] as number
       return (
         <div data-slot="data-table-sparkline-cell" className="flex h-5 items-center">
           <div aria-hidden="true" className="h-5 w-24 shrink-0">
             <Sparkline data={series.map((value) => ({ value }))} height={20} />
           </div>
-          <span className="sr-only">
-            {series.length}点の推移、{f(first)}から{f(last)}、最小{f(Math.min(...series))}、最大{f(Math.max(...series))}
-          </span>
+          <SparklineSummary series={series} format={format} />
         </div>
       )
     },
   }
 }
 
+/** The sparkline cell's screen-reader text, in the page's language. */
+function SparklineSummary({ series, format }: { series: number[]; format: ValueFormat }) {
+  const locale = useLocale()
+  const f = (v: number) => formatValue(v, format, locale)
+  const first = series[0] as number
+  const last = series[series.length - 1] as number
+  return (
+    <span className="sr-only">
+      {TEXT[uiLanguage(locale)].trend(series.length, f(first), f(last), f(Math.min(...series)), f(Math.max(...series)))}
+    </span>
+  )
+}
+
 /* ----------------------------------------------------------------- toolbar */
 
 export const DataTableToolbar = forwardRef<HTMLDivElement, DataTableToolbarProps>(
@@ -853,6 +1041,7 @@ function SortIcon({ sorted }: { sorted: false | "asc" | "desc" }) {
 export const DataTableContent = forwardRef<HTMLDivElement, DataTableContentProps>(
   ({ className, ...props }, ref) => {
     const { table, visibleColumnCount, isLoading, enablePagination } = useDataTable()
+    const t = useText()
     const { comparisonOf, comparisonIds } = pairComparisons(table.getVisibleLeafColumns())
 
     return (
@@ -967,7 +1156,7 @@ export const DataTableContent = forwardRef<HTMLDivElement, DataTableContentProps
                   colSpan={visibleColumnCount}
                   className="h-24 text-center text-muted-foreground"
                 >
-                  データがありません
+                  {t.noData}
                 </TableCell>
               </TableRow>
             )}
@@ -984,6 +1173,7 @@ DataTableContent.displayName = "DataTableContent"
 export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginationProps>(
   ({ pageSizeOptions = [10, 20, 50], className, ...props }, ref) => {
     const { table, isLoading } = useDataTable()
+    const t = useText()
 
     const totalRows =
       table.options.rowCount !== undefined
@@ -993,11 +1183,11 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
     const currentPageIndex = table.getState().pagination.pageIndex
     const rangeStart = currentPageIndex * currentPageSize + 1
     const rangeEnd = Math.min((currentPageIndex + 1) * currentPageSize, totalRows)
-    // One list feeds both the menu and `items`, so the trigger shows "10件"
+    // One list feeds both the menu and `items`, so the trigger shows "10 / page" (ja: "10件")
     // rather than the raw "10" under Base UI's SelectValue.
     const pageSizeItems = pageSizeOptions.map((size) => ({
       value: String(size),
-      label: `${size}件`,
+      label: t.pageSize(size),
     }))
 
     return (
@@ -1009,15 +1199,13 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
         {...props}
       >
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <span>
-            {totalRows}件中 {rangeStart} - {rangeEnd} を表示
-          </span>
+          <span>{t.range(totalRows, rangeStart, rangeEnd)}</span>
           <Select
             items={pageSizeItems}
             value={String(currentPageSize)}
             onValueChange={(value) => table.setPageSize(Number(value))}
           >
-            <SelectTrigger size="sm" className="w-[80px]">
+            <SelectTrigger size="sm" className="min-w-[80px]">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -1037,7 +1225,7 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             onClick={() => table.firstPage()}
             disabled={isLoading || !table.getCanPreviousPage()}
           >
-            最初
+            {t.first}
           </Button>
           <Button
             variant="outline"
@@ -1045,7 +1233,7 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             onClick={() => table.previousPage()}
             disabled={isLoading || !table.getCanPreviousPage()}
           >
-            前へ
+            {t.previous}
           </Button>
           <Button
             variant="outline"
@@ -1053,7 +1241,7 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             onClick={() => table.nextPage()}
             disabled={isLoading || !table.getCanNextPage()}
           >
-            次へ
+            {t.next}
           </Button>
           <Button
             variant="outline"
@@ -1061,7 +1249,7 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             onClick={() => table.lastPage()}
             disabled={isLoading || !table.getCanNextPage()}
           >
-            最後
+            {t.last}
           </Button>
         </div>
       </div>
@@ -1077,6 +1265,7 @@ export const DataTableColumnVisibility = forwardRef<
   DataTableColumnVisibilityProps
 >(({ columnLabels, className }, ref) => {
   const { table } = useDataTable()
+  const t = useText()
 
   const hideableColumns = table.getAllColumns().filter((column) => column.getCanHide())
 
@@ -1088,7 +1277,7 @@ export const DataTableColumnVisibility = forwardRef<
         ref={ref}
         render={<Button variant="outline" size="sm" className={cn(className)} />}
         data-slot="data-table-column-visibility"
-        aria-label="表示する列"
+        aria-label={t.columns}
       >
         <Columns3 className="size-4" aria-hidden="true" />
       </DropdownMenuTrigger>
@@ -1153,14 +1342,16 @@ export function toCsv(
 
 /**
  * 表の現在の状態から CSV を作る。行は画面と同じ並べ替え・絞り込み後の順、列は表示中の列のみ。
+ * `"display"` の書式のロケールは `locale`（既定はページのロケール、`<html lang>`）。
  *
  * @example
  * const csv = tableToCsv(table, { values: "raw", scope: "page" })
  */
 export function tableToCsv<TData>(
   table: TanstackTable<TData>,
-  { values = "display", scope = "filtered" }: { values?: CsvValues; scope?: CsvScope } = {},
+  { values = "display", scope = "filtered", locale: localeArg }: { values?: CsvValues; scope?: CsvScope; locale?: string } = {},
 ): string {
+  const locale = resolveLocale(localeArg)
   const columns = table.getVisibleLeafColumns().filter((column) => column.id !== "_select")
   const rows = scope === "page" ? table.getRowModel().rows : table.getSortedRowModel().rows
   const header = columns.map((column) =>
@@ -1170,7 +1361,7 @@ export function tableToCsv<TData>(
     columns.map((column): CsvCell => {
       const value = row.getValue(column.id)
       const meta = column.columnDef.meta
-      if (values === "display" && (meta?.format || meta?.dateFormat)) return formatCellText(value, row.original, meta)
+      if (values === "display" && (meta?.format || meta?.dateFormat)) return formatCellText(value, row.original, meta, locale)
       if (value === null || value === undefined) return ""
       if (typeof value === "number" || typeof value === "string") return value
       if (value instanceof Date) return value.toISOString()
@@ -1185,13 +1376,14 @@ export function DataTableExport({
   fileName = "export.csv",
   values = "display",
   scope = "filtered",
-  children = "CSV を書き出す",
+  children,
   className,
 }: DataTableExportProps) {
   const { table, isLoading } = useDataTable()
+  const locale = useLocale()
 
   const onClick = () => {
-    const csv = tableToCsv(table, { values, scope })
+    const csv = tableToCsv(table, { values, scope, locale })
     const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }))
     const a = document.createElement("a")
     a.href = url
@@ -1211,7 +1403,7 @@ export function DataTableExport({
       disabled={isLoading}
     >
       <Download className="size-4" aria-hidden="true" />
-      {children}
+      {children ?? TEXT[uiLanguage(locale)].exportCsv}
     </Button>
   )
 }