@yuno-payments/dashboard-design-system 2.2.0 → 2.2.1-beta.2

package/dist/components/organisms/data-table/data-table.js

@@ -1,210 +1,222 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import * as c from "react";
-import { useReactTable as Y } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { DragDropProvider as Z } from "../../../node_modules/@dnd-kit/react/index.js";
-import { move as V } from "../../../node_modules/@dnd-kit/helpers/dist/index.js";
-import { Table as ee } from "../../../vendor/shadcn/table.js";
-import { cn as S } from "../../../lib/utils.js";
-import { DataTableLoading as oe } from "./components/states/data-table-loading.js";
-import { DataTableHeader as te } from "./components/data-table-header.js";
-import { DataTableBody as ne } from "./components/data-table-body.js";
-import { useDataTableColumns as re } from "./hooks/use-data-table-columns.js";
-import { useDataTableState as se } from "./hooks/use-data-table-state.js";
-import { ROW_HEIGHT_DEFAULT as ie } from "./utils/data-table-constants.js";
-import { getFilteredRowModel as le, getSortedRowModel as ae, getCoreRowModel as me } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
-import { Empty as ce } from "../../molecules/empty/empty.js";
-function Te({
-  columns: b,
-  data: l,
-  isLoading: T = !1,
-  empty: w,
-  checkboxSelection: h = !1,
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import * as l from "react";
+import { useReactTable as ee } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { DragDropProvider as te } from "../../../node_modules/@dnd-kit/react/index.js";
+import { move as oe } from "../../../node_modules/@dnd-kit/helpers/dist/index.js";
+import { Table as ne } from "../../../vendor/shadcn/table.js";
+import { cn as R } from "../../../lib/utils.js";
+import { getDataTableTranslations as re } from "./data-table.types.js";
+import { DataTableLoading as se } from "./components/states/data-table-loading.js";
+import { DataTableHeader as ie } from "./components/data-table-header.js";
+import { DataTableBody as le } from "./components/data-table-body.js";
+import { useDataTableColumns as ae } from "./hooks/use-data-table-columns.js";
+import { useDataTableState as me } from "./hooks/use-data-table-state.js";
+import { ROW_HEIGHT_DEFAULT as ce } from "./utils/data-table-constants.js";
+import { getFilteredRowModel as ue, getSortedRowModel as de, getCoreRowModel as fe } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { Empty as ge } from "../../molecules/empty/empty.js";
+function Me({
+  columns: h,
+  data: a,
+  isLoading: E = !1,
+  empty: F,
+  checkboxSelection: x = !1,
   rowSelection: u,
-  onRowSelectionChange: a,
-  enableSorting: E = !0,
-  manualSorting: R = !1,
-  sorting: F,
-  onSortingChange: M,
-  enableColumnFilters: O = !1,
+  onRowSelectionChange: m,
+  enableSorting: M = !0,
+  manualSorting: O = !1,
+  sorting: A,
+  onSortingChange: k,
+  enableColumnFilters: L = !1,
   enableColumnResizing: f = !0,
-  columnResizeMode: N = "onChange",
-  enableColumnPinning: k = !0,
-  onRowClick: A,
+  columnResizeMode: P = "onChange",
+  enableColumnPinning: B = !0,
+  onRowClick: H,
   actions: g,
-  height: L,
-  rowHeight: x = ie,
-  className: P,
-  persistKey: B,
-  initialSettings: H,
-  onUpdate: I,
-  enableColumnDragDrop: p = !1
+  height: I,
+  rowHeight: y = ce,
+  className: N,
+  persistKey: W,
+  initialSettings: _,
+  onUpdate: $,
+  enableColumnDragDrop: p = !1,
+  lang: j,
+  translations: D
 }) {
-  const W = re({
-    columns: b,
-    checkboxSelection: h,
+  const C = l.useMemo(
+    () => ({
+      ...re(j),
+      ...D
+    }),
+    [j, D]
+  ), z = ae({
+    columns: h,
+    checkboxSelection: x,
     actions: g
   }), {
-    sorting: y,
-    setSorting: j,
-    columnFilters: _,
-    setColumnFilters: $,
-    columnVisibility: z,
-    setColumnVisibility: G,
+    sorting: T,
+    setSorting: v,
+    columnFilters: G,
+    setColumnFilters: U,
+    columnVisibility: q,
+    setColumnVisibility: J,
     rowSelection: i,
-    setRowSelection: U,
-    columnPinning: q,
-    handleColumnPinningChange: J,
+    setRowSelection: K,
+    columnPinning: Q,
+    handleColumnPinningChange: X,
     columnOrder: d,
-    setColumnOrder: m
-  } = se({
-    persistKey: B,
+    setColumnOrder: c
+  } = me({
+    persistKey: W,
     hasActions: !!g,
-    externalSorting: F,
-    onExternalSortingChange: M,
+    externalSorting: A,
+    onExternalSortingChange: k,
     externalRowSelection: u,
-    initialSettings: H,
-    onUpdate: I,
+    initialSettings: _,
+    onUpdate: $,
     enableColumnDragDrop: p
-  }), r = Y({
-    data: l,
-    columns: W,
-    getCoreRowModel: me(),
+  }), r = ee({
+    data: a,
+    columns: z,
+    getCoreRowModel: fe(),
     enableColumnResizing: f,
-    columnResizeMode: N,
-    enableColumnPinning: k,
+    columnResizeMode: P,
+    enableColumnPinning: B,
+    meta: {
+      translations: C
+    },
     defaultColumn: {
       enableSorting: !1,
       minSize: 50
     },
-    ...E && {
+    ...M && {
       onSortingChange: (e) => {
-        j(typeof e == "function" ? e(y) : e);
+        v(typeof e == "function" ? e(T) : e);
       },
-      getSortedRowModel: ae(),
-      manualSorting: R
+      getSortedRowModel: de(),
+      manualSorting: O
     },
-    ...O && {
-      onColumnFiltersChange: $,
-      getFilteredRowModel: le()
+    ...L && {
+      onColumnFiltersChange: U,
+      getFilteredRowModel: ue()
     },
-    onColumnVisibilityChange: G,
+    onColumnVisibilityChange: J,
     onRowSelectionChange: (e) => {
-      const o = typeof e == "function" ? e(i) : e;
-      if (U(o), a && u !== void 0) {
-        const s = Object.keys(o).filter((n) => o[n]).map((n) => l[parseInt(n)]).filter(Boolean);
-        a(o, s);
+      const t = typeof e == "function" ? e(i) : e;
+      if (K(t), m && u !== void 0) {
+        const s = Object.keys(t).filter((n) => t[n]).map((n) => a[parseInt(n)]).filter(Boolean);
+        m(t, s);
       }
     },
-    onColumnPinningChange: J,
-    onColumnOrderChange: m,
+    onColumnPinningChange: X,
+    onColumnOrderChange: c,
     state: {
-      sorting: y,
-      columnFilters: _,
-      columnVisibility: z,
+      sorting: T,
+      columnFilters: G,
+      columnVisibility: q,
       rowSelection: i,
-      columnPinning: q,
+      columnPinning: Q,
       columnOrder: d
     }
   });
-  c.useEffect(() => {
-    if (a && u === void 0) {
-      const e = Object.keys(i).filter((o) => i[o]).map((o) => l[parseInt(o)]).filter(Boolean);
-      a(i, e);
+  l.useEffect(() => {
+    if (m && u === void 0) {
+      const e = Object.keys(i).filter((t) => i[t]).map((t) => a[parseInt(t)]).filter(Boolean);
+      m(i, e);
     }
-  }, [i, a, l, u]);
-  const v = c.useRef([]), K = c.useCallback(() => {
-    v.current = d.length > 0 ? [...d] : r.getAllLeafColumns().map((e) => e.id);
-  }, [d, r]), Q = c.useCallback(
+  }, [i, m, a, u]);
+  const S = l.useRef([]), Y = l.useCallback(() => {
+    S.current = d.length > 0 ? [...d] : r.getAllLeafColumns().map((e) => e.id);
+  }, [d, r]), Z = l.useCallback(
     (e) => {
-      m((o) => {
-        const s = o.length > 0 ? o : r.getAllLeafColumns().map((C) => C.id);
-        return V({ columns: s }, e).columns;
+      c((t) => {
+        const s = t.length > 0 ? t : r.getAllLeafColumns().map((b) => b.id);
+        return oe({ columns: s }, e).columns;
       });
     },
-    [r, m]
-  ), X = c.useCallback(
+    [r, c]
+  ), V = l.useCallback(
     (e) => {
-      e.operation.canceled && m(v.current);
+      e.operation.canceled && c(S.current);
     },
-    [m]
+    [c]
   );
-  if (T)
-    return /* @__PURE__ */ t.jsx(
-      oe,
+  if (E)
+    return /* @__PURE__ */ o.jsx(
+      se,
       {
-        columns: b,
-        checkboxSelection: h,
+        columns: h,
+        checkboxSelection: x,
         actions: g,
-        rowHeight: x
+        rowHeight: y
       }
     );
-  if (l.length === 0) {
-    const e = w || {}, {
-      title: o = "No results",
-      description: s = "No data available",
+  if (a.length === 0) {
+    const e = F || {}, {
+      title: t,
+      description: s,
       media: n,
-      actions: C
+      actions: b
     } = e;
-    return /* @__PURE__ */ t.jsx(
-      ce,
+    return /* @__PURE__ */ o.jsx(
+      ge,
       {
         media: n,
-        title: o,
-        description: s,
-        actions: C
+        title: t ?? C.noResults,
+        description: s ?? C.noDataAvailable,
+        actions: b
       }
     );
   }
-  const D = /* @__PURE__ */ t.jsx("div", { className: S("yuno-data-table space-y-4", P), children: /* @__PURE__ */ t.jsx(
+  const w = /* @__PURE__ */ o.jsx("div", { className: R("yuno-data-table space-y-4", N), children: /* @__PURE__ */ o.jsx(
     "div",
     {
       className: "yuno-data-table rounded-md border overflow-x-auto",
-      style: { height: L || "auto" },
-      children: /* @__PURE__ */ t.jsxs(ee, { className: S("table-fixed"), children: [
-        /* @__PURE__ */ t.jsx("colgroup", { children: r.getHeaderGroups()[0]?.headers.map((e) => {
-          const o = e.column.columnDef.enableResizing === !1, s = e.column.id === "_spacer", n = e.column.getSize();
-          return s ? /* @__PURE__ */ t.jsx("col", { style: { width: "auto" } }, e.id) : /* @__PURE__ */ t.jsx(
+      style: { height: I || "auto" },
+      children: /* @__PURE__ */ o.jsxs(ne, { className: R("table-fixed"), children: [
+        /* @__PURE__ */ o.jsx("colgroup", { children: r.getHeaderGroups()[0]?.headers.map((e) => {
+          const t = e.column.columnDef.enableResizing === !1, s = e.column.id === "_spacer", n = e.column.getSize();
+          return s ? /* @__PURE__ */ o.jsx("col", { style: { width: "auto" } }, e.id) : /* @__PURE__ */ o.jsx(
             "col",
             {
               style: {
-                width: o ? `${n}px` : "auto",
-                minWidth: o ? `${n}px` : void 0,
-                maxWidth: o ? `${n}px` : void 0
+                width: t ? `${n}px` : "auto",
+                minWidth: t ? `${n}px` : void 0,
+                maxWidth: t ? `${n}px` : void 0
               }
             },
             e.id
           );
         }) }),
-        /* @__PURE__ */ t.jsx(
-          te,
+        /* @__PURE__ */ o.jsx(
+          ie,
           {
             table: r,
             enableColumnResizing: f,
             enableColumnDragDrop: p
           }
         ),
-        /* @__PURE__ */ t.jsx(
-          ne,
+        /* @__PURE__ */ o.jsx(
+          le,
           {
             table: r,
             enableColumnResizing: f,
-            onRowClick: A,
-            rowHeight: x
+            onRowClick: H,
+            rowHeight: y
           }
         )
       ] })
     }
   ) });
-  return p ? /* @__PURE__ */ t.jsx(
-    Z,
+  return p ? /* @__PURE__ */ o.jsx(
+    te,
     {
-      onDragStart: K,
-      onDragOver: Q,
-      onDragEnd: X,
-      children: D
+      onDragStart: Y,
+      onDragOver: Z,
+      onDragEnd: V,
+      children: w
     }
-  ) : D;
+  ) : w;
 }
 export {
-  Te as DataTable
+  Me as DataTable
 };

package/dist/components/organisms/data-table/data-table.types.d.ts

@@ -1,9 +1,77 @@
 import { ColumnDef, RowData, SortingState, VisibilityState, ColumnFiltersState, PaginationState, RowSelectionState, Table, Column, CellContext, HeaderContext } from '@tanstack/react-table';
 import { IconName } from '../../atoms/icon';
 import { EmptyProps } from '../../molecules';
+/**
+ * Supported languages for DataTable translations
+ */
+export type DataTableLanguage = "en" | "es" | "ja" | "ar" | "fr" | "pt" | "tr" | "ru" | "de" | "zh";
+/**
+ * Translation strings for the DataTable column menu and dialogs.
+ * All fields are optional with English defaults.
+ */
+export interface DataTableTranslations {
+    /** @default "Ascending" */
+    ascending?: string;
+    /** @default "Descending" */
+    descending?: string;
+    /** @default "Clear sorting" */
+    clearSorting?: string;
+    /** @default "Pin to the left" */
+    pinToLeft?: string;
+    /** @default "Pin to the right" */
+    pinToRight?: string;
+    /** @default "Unpin" */
+    unpin?: string;
+    /** @default "Hide" */
+    hide?: string;
+    /** @default "(Last column)" */
+    lastColumn?: string;
+    /** @default "Manage columns" */
+    manageColumns?: string;
+    /** @default "Hide all" */
+    hideAll?: string;
+    /** @default "Show all" */
+    showAll?: string;
+    /** @default "Search columns..." */
+    searchColumns?: string;
+    /** @default "No columns found" */
+    noColumnsFound?: string;
+    /** @default "No results" */
+    noResults?: string;
+    /** @default "No data available" */
+    noDataAvailable?: string;
+    /** @default "Sort ascending" */
+    sortAscending?: string;
+    /** @default "Sort descending" */
+    sortDescending?: string;
+    /** @default "Pinned column" */
+    pinnedColumn?: string;
+    /** @default "Menu" */
+    menu?: string;
+    /** @default "Actions" */
+    actions?: string;
+    /** @default "Select all" */
+    selectAll?: string;
+    /** @default "Select row" */
+    selectRow?: string;
+}
+/**
+ * Default English translations for DataTable
+ */
+export declare const DEFAULT_DATA_TABLE_TRANSLATIONS: Required<DataTableTranslations>;
+/**
+ * All DataTable translations by language code
+ */
+export declare const DATA_TABLE_TRANSLATIONS: Record<DataTableLanguage, Required<DataTableTranslations>>;
+/**
+ * Get translations for a specific language
+ * Falls back to English if language not found
+ */
+export declare function getDataTableTranslations(lang?: DataTableLanguage): Required<DataTableTranslations>;
 declare module "@tanstack/react-table" {
     interface TableMeta<TData extends RowData> {
         updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
+        translations?: Required<DataTableTranslations>;
     }
 }
 export interface DataTableActionsConfig<TData> {