@yuno-payments/dashboard-design-system 1.4.0 → 1.4.2

package/dist/components/organisms/data-table/components/cells/data-table-draggable-header-cell.d.ts

@@ -0,0 +1,8 @@
+import { Header } from '@tanstack/react-table';
+interface DataTableDraggableHeaderCellProps<TData, TValue> {
+    header: Header<TData, TValue>;
+    index: number;
+    enableColumnResizing: boolean;
+}
+export declare function DataTableDraggableHeaderCell<TData, TValue>({ header, index, enableColumnResizing, }: DataTableDraggableHeaderCellProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/data-table/components/cells/data-table-draggable-header-cell.js

@@ -0,0 +1,51 @@
+import { j as t } from "../../../../../_virtual/jsx-runtime.js";
+import { flexRender as m } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useSortable as c } from "../../../../../node_modules/@dnd-kit/react/sortable.js";
+import { TableHead as p } from "../../../../../vendor/shadcn/table.js";
+import { cn as u } from "../../../../../lib/utils.js";
+import { getCellStyles as d } from "../../utils/data-table-styles.js";
+import { CELL_BACKGROUND_COLORS as f } from "../../utils/data-table-constants.js";
+import { DataTableResizeHandle as g } from "./data-table-resize-handle.js";
+function H({
+  header: e,
+  index: r,
+  enableColumnResizing: l
+}) {
+  const { style: s, className: i } = d(
+    e.column,
+    l,
+    f.header
+  ), { ref: n, isDragging: o } = c({
+    id: e.column.id,
+    index: r,
+    group: "columns"
+  }), a = {
+    ...s,
+    opacity: o ? 0.5 : 1,
+    zIndex: o ? 1 : void 0,
+    position: o ? "relative" : s?.position,
+    cursor: "grab"
+  };
+  return /* @__PURE__ */ t.jsxs(
+    p,
+    {
+      ref: n,
+      style: a,
+      className: u(i, o && "bg-muted/80"),
+      children: [
+        /* @__PURE__ */ t.jsx("div", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: e.isPlaceholder ? null : m(e.column.columnDef.header, e.getContext()) }),
+        l && e.column.getCanResize() && /* @__PURE__ */ t.jsx(
+          g,
+          {
+            onMouseDown: e.getResizeHandler(),
+            onTouchStart: e.getResizeHandler()
+          }
+        )
+      ]
+    },
+    e.id
+  );
+}
+export {
+  H as DataTableDraggableHeaderCell
+};

package/dist/components/organisms/data-table/components/cells/data-table-list-cell.js

@@ -4,12 +4,7 @@ import { cn as f } from "../../../../../lib/utils.js";
 import { TooltipProvider as c, Tooltip as i, TooltipTrigger as o, TooltipContent as m } from "../../../../../vendor/shadcn/tooltip.js";
 import { Badge as g } from "../../../../atoms/badge/badge.js";
 const N = u(
-  ({
-    items: n,
-    maxLength: a = 7,
-    showRemainingCount: x = !0,
-    className: d
-  }, h) => {
+  ({ items: n, maxLength: a = 7, showRemainingCount: x = !0, className: d }, h) => {
     if (!n || n.length === 0) return null;
     const s = n[0], l = n.slice(1), t = s.name.length > a && a > 0, p = t ? `${s.name.slice(0, a)}...` : s.name;
     return /* @__PURE__ */ e.jsxs(

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

@@ -1,19 +1,8 @@
 import { Table } from '@tanstack/react-table';
-/**
- * Props for the DataTableHeader component
- */
 interface DataTableHeaderProps<TData> {
-    /**
-     * TanStack Table instance
-     */
     table: Table<TData>;
-    /**
-     * Whether column resizing is enabled
-     */
     enableColumnResizing?: boolean;
+    enableColumnDragDrop?: boolean;
 }
-/**
- * Renders the table header with sortable and resizable columns
- */
-export declare function DataTableHeader<TData>({ table, enableColumnResizing, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableHeader<TData>({ table, enableColumnResizing, enableColumnDragDrop, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,19 +1,37 @@
-import { j as e } from "../../../../_virtual/jsx-runtime.js";
-import { TableHeader as s, TableRow as t } from "../../../../vendor/shadcn/table.js";
-import { DataTableHeaderCell as i } from "./cells/data-table-header-cell.js";
-function p({
+import { j as a } from "../../../../_virtual/jsx-runtime.js";
+import "react";
+import { TableHeader as r, TableRow as m } from "../../../../vendor/shadcn/table.js";
+import { DataTableHeaderCell as o } from "./cells/data-table-header-cell.js";
+import { DataTableDraggableHeaderCell as d } from "./cells/data-table-draggable-header-cell.js";
+function b({
   table: l,
-  enableColumnResizing: m
+  enableColumnResizing: i,
+  enableColumnDragDrop: t = !1
 }) {
-  return /* @__PURE__ */ e.jsx(s, { children: l.getHeaderGroups().map((a) => /* @__PURE__ */ e.jsx(t, { className: "bg-muted", children: a.headers.map((r) => /* @__PURE__ */ e.jsx(
-    i,
+  return t ? /* @__PURE__ */ a.jsx(r, { children: l.getHeaderGroups().map((s) => /* @__PURE__ */ a.jsx(m, { className: "bg-muted", children: s.headers.map((e, n) => e.column.id === "select" || e.column.id === "actions" || e.column.id === "_spacer" ? /* @__PURE__ */ a.jsx(
+    o,
     {
-      header: r,
-      enableColumnResizing: m ?? !1
+      header: e,
+      enableColumnResizing: i ?? !1
     },
-    r.id
-  )) }, a.id)) });
+    e.id
+  ) : /* @__PURE__ */ a.jsx(
+    d,
+    {
+      header: e,
+      index: n,
+      enableColumnResizing: i ?? !1
+    },
+    e.id
+  )) }, s.id)) }) : /* @__PURE__ */ a.jsx(r, { children: l.getHeaderGroups().map((s) => /* @__PURE__ */ a.jsx(m, { className: "bg-muted", children: s.headers.map((e) => /* @__PURE__ */ a.jsx(
+    o,
+    {
+      header: e,
+      enableColumnResizing: i ?? !1
+    },
+    e.id
+  )) }, s.id)) });
 }
 export {
-  p as DataTableHeader
+  b as DataTableHeader
 };

package/dist/components/organisms/data-table/components/dialogs/data-table-manage-columns-dialog.js

@@ -15,9 +15,13 @@ function D({
   }, o = l.filter((e) => c(e).toLowerCase().includes(a.toLowerCase())), u = () => {
     l.forEach((e) => e.toggleVisibility(!0));
   }, p = () => {
-    const e = l.filter((i) => i.getIsVisible());
+    const e = l.filter(
+      (i) => i.getIsVisible()
+    );
     e.length <= 1 || e.slice(1).forEach((i) => i.toggleVisibility(!1));
-  }, f = l.every((e) => e.getIsVisible()), b = t <= 1;
+  }, f = l.every(
+    (e) => e.getIsVisible()
+  ), b = t <= 1;
   return /* @__PURE__ */ s.jsx(
     y,
     {

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

@@ -110,42 +110,28 @@ export interface DataTableProps<TData, TValue> {
      * Callback when table settings change (for syncing to backend)
      */
     onUpdate?: (settings: import('./data-table.types').DataTableSettings) => void;
+    /**
+     * Whether to enable drag-and-drop column reordering.
+     * When enabled, column headers can be dragged to reorder.
+     * Order persists via persistKey (localStorage) and onUpdate callback.
+     * @default false
+     */
+    enableColumnDragDrop?: boolean;
 }
 /**
  * Advanced data table component built on TanStack Table.
- * Features sorting, filtering, column resizing, row selection, and loading/empty states.
+ * Features sorting, filtering, column resizing, row selection, column drag-and-drop reordering, and loading/empty states.
  * Supports column pinning, visibility control, and state persistence.
  *
  * @example
  * ```tsx
- * // Uncontrolled selection
- * <DataTable
- *   columns={[
- *     { accessorKey: 'name', header: 'Name' },
- *     { accessorKey: 'email', header: 'Email' }
- *   ]}
- *   data={users}
- *   checkboxSelection
- *   onRowSelectionChange={(rowSelectionState, selectedRows) => {
- *     console.log('Selected rows:', selectedRows);
- *   }}
- *   actions={{
- *     items: [{ label: 'Edit', onClick: (row) => editUser(row) }]
- *   }}
- * />
- *
- * // Controlled selection
- * const [rowSelection, setRowSelection] = useState({});
+ * // Column drag-and-drop reordering
  * <DataTable
  *   columns={columns}
- *   data={users}
- *   checkboxSelection
- *   rowSelection={rowSelection}
- *   onRowSelectionChange={(newRowSelection, selectedRows) => {
- *     setRowSelection(newRowSelection);
- *     console.log('Selected rows:', selectedRows);
- *   }}
+ *   data={data}
+ *   enableColumnDragDrop
+ *   persistKey="my-table"
  * />
  * ```
  */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/organisms/data-table/hooks/use-data-table-state.d.ts

@@ -1,4 +1,4 @@
-import { ColumnFiltersState, SortingState, VisibilityState, RowSelectionState, ColumnPinningState } from '@tanstack/react-table';
+import { ColumnFiltersState, ColumnOrderState, SortingState, VisibilityState, RowSelectionState, ColumnPinningState } from '@tanstack/react-table';
 import { DataTableSettings } from '../data-table.types';
 import * as React from "react";
 interface UseDataTableStateProps {
@@ -9,8 +9,9 @@ interface UseDataTableStateProps {
     externalRowSelection?: RowSelectionState;
     initialSettings?: DataTableSettings;
     onUpdate?: (settings: DataTableSettings) => void;
+    enableColumnDragDrop?: boolean;
 }
-export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, externalRowSelection, initialSettings, onUpdate, }: UseDataTableStateProps): {
+export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, externalRowSelection, initialSettings, onUpdate, enableColumnDragDrop, }: UseDataTableStateProps): {
     sorting: SortingState;
     setSorting: (sorting: SortingState) => void;
     columnFilters: ColumnFiltersState;
@@ -21,5 +22,7 @@ export declare function useDataTableState({ persistKey, hasActions, externalSort
     setRowSelection: React.Dispatch<React.SetStateAction<RowSelectionState>>;
     columnPinning: ColumnPinningState;
     handleColumnPinningChange: (updater: React.SetStateAction<ColumnPinningState>) => void;
+    columnOrder: ColumnOrderState;
+    setColumnOrder: React.Dispatch<React.SetStateAction<ColumnOrderState>>;
 };
 export {};