@yuno-payments/dashboard-design-system 0.0.167 → 0.0.170

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

@@ -1,173 +1,141 @@
 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,
+import { useReactTable as W } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { Table as _ } from "../../../vendor/shadcn/table.js";
+import { cn as f } from "../../../lib/utils.js";
+import { DataTableLoading as B } from "./components/states/data-table-loading.js";
+import { DataTableHeader as G } from "./components/data-table-header.js";
+import { DataTableBody as I } from "./components/data-table-body.js";
+import { useDataTableColumns as O } from "./hooks/use-data-table-columns.js";
+import { useDataTableState as U } from "./hooks/use-data-table-state.js";
+import { ROW_HEIGHT_DEFAULT as q } from "./utils/data-table-constants.js";
+import { getFilteredRowModel as J, getSortedRowModel as K, getCoreRowModel as Q } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { Empty as X } from "../../molecules/empty/empty.js";
+function ae({
+  columns: a,
   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
+  isLoading: c = !1,
+  empty: g,
+  checkboxSelection: m = !1,
+  onRowSelectionChange: o,
+  enableSorting: p = !0,
+  manualSorting: b = !1,
+  enableColumnFilters: C = !1,
+  enableColumnResizing: i = !0,
+  columnResizeMode: h = "onChange",
+  onRowClick: x,
+  actions: l,
+  height: w,
+  rowHeight: d = q,
+  className: T,
+  persistKey: j
 }) {
-  const H = Q({
-    columns: u,
-    checkboxSelection: d,
-    actions: c
+  const y = O({
+    columns: a,
+    checkboxSelection: m,
+    actions: l
   }), {
-    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({
+    sorting: R,
+    setSorting: S,
+    columnFilters: D,
+    setColumnFilters: F,
+    columnVisibility: M,
+    setColumnVisibility: E,
+    rowSelection: u,
+    setRowSelection: N,
+    columnPinning: v,
+    handleColumnPinningChange: P
+  } = U({
+    persistKey: j,
+    hasActions: !!l
+  }), t = W({
     data: s,
-    columns: H,
-    getCoreRowModel: V(),
-    enableColumnResizing: a,
-    columnResizeMode: v,
-    enableColumnPinning: D,
+    columns: y,
+    getCoreRowModel: Q(),
+    enableColumnResizing: i,
+    columnResizeMode: h,
+    enableColumnPinning: !0,
     defaultColumn: {
       enableSorting: !1,
       minSize: 50
     },
-    ...j && {
-      onSortingChange: (o) => {
-        b(typeof o == "function" ? o(g) : o);
-      },
-      getSortedRowModel: O(),
-      manualSorting: h
+    ...p && {
+      onSortingChange: S,
+      getSortedRowModel: K(),
+      manualSorting: b
     },
-    ...w && {
-      onColumnFiltersChange: P,
-      getFilteredRowModel: Z()
+    ...C && {
+      onColumnFiltersChange: F,
+      getFilteredRowModel: J()
     },
-    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);
-      }
-    },
-    onColumnPinningChange: A,
+    onColumnVisibilityChange: E,
+    onRowSelectionChange: N,
+    onColumnPinningChange: P,
     state: {
-      sorting: g,
-      columnFilters: I,
-      columnVisibility: W,
-      rowSelection: n,
-      columnPinning: z
+      sorting: R,
+      columnFilters: D,
+      columnVisibility: M,
+      rowSelection: u,
+      columnPinning: v
     }
   });
   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);
+    if (o) {
+      const r = t.getFilteredSelectedRowModel().rows.map((n) => n.original);
+      o(r);
     }
-  }, [n, l, s, m]), C)
+  }, [u, o, t]), c)
     return /* @__PURE__ */ e.jsx(
-      q,
+      B,
       {
-        columns: u,
-        checkboxSelection: d,
-        actions: c,
-        rowHeight: p
+        columns: a,
+        checkboxSelection: m,
+        actions: l,
+        rowHeight: d
       }
     );
   if (s.length === 0) {
-    const o = y || {}, {
-      title: t = "No results",
-      description: r = "No data available",
-      media: i,
-      actions: G
-    } = o;
+    const r = g || {}, {
+      title: n = "No results",
+      subtitle: V = "No data available",
+      media: A,
+      children: H
+    } = r;
     return /* @__PURE__ */ e.jsx(
-      oo,
+      X,
       {
-        media: i,
-        title: t,
-        description: r,
-        actions: G
+        media: A,
+        title: n,
+        description: V,
+        actions: H
       }
     );
   }
-  return /* @__PURE__ */ e.jsx("div", { className: x("yuno-data-table space-y-4", M), children: /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e.jsx("div", { className: f("space-y-4", T), children: /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "rounded-md border overflow-x-auto",
-      style: { height: E || "auto" },
+      style: { height: w || "auto" },
       children: /* @__PURE__ */ e.jsxs(
-        U,
+        _,
         {
-          className: x("table-fixed"),
+          className: f("table-fixed"),
+          style: { width: "max-content", minWidth: "100%" },
           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,
+              G,
               {
-                table: f,
-                enableColumnResizing: a
+                table: t,
+                enableColumnResizing: i
               }
             ),
             /* @__PURE__ */ e.jsx(
-              K,
+              I,
               {
-                table: f,
-                enableColumnResizing: a,
-                onRowClick: F,
-                rowHeight: p
+                table: t,
+                enableColumnResizing: i,
+                onRowClick: x,
+                rowHeight: d
               }
             )
           ]
@@ -177,5 +145,5 @@ function po({
   ) });
 }
 export {
-  po as DataTable
+  ae as DataTable
 };

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

@@ -1,6 +1,5 @@
-import { ColumnDef, RowData, SortingState, VisibilityState, ColumnFiltersState, PaginationState, RowSelectionState, Table, Column, CellContext, HeaderContext } from '@tanstack/react-table';
+import { ColumnDef, RowData, SortingState, VisibilityState, ColumnFiltersState, PaginationState, Table, Column, CellContext, HeaderContext } from '@tanstack/react-table';
 import { IconName } from '../../atoms/icon';
-import { EmptyProps } from '../../molecules';
 declare module "@tanstack/react-table" {
     interface TableMeta<TData extends RowData> {
         updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
@@ -14,6 +13,29 @@ export interface DataTableActionsConfig<TData> {
     /** Click handler for the default button (only used if render is not provided) */
     onClick?: (row: TData) => void;
 }
+/**
+ * Configuration for DataTable empty state
+ *
+ * @example
+ * ```tsx
+ * {
+ *   title: "No results",
+ *   subtitle: "No data available",
+ *   media: <EmptyIcon name="Wallet" />,
+ *   children: <Button>Create</Button>
+ * }
+ * ```
+ */
+export interface DataTableEmptyConfig {
+    /** Title text displayed prominently */
+    title?: string;
+    /** Optional subtitle/description text displayed below the title */
+    subtitle?: string;
+    /** Media content to display (icon, image, or any ReactNode). Use EmptyIcon component for styled icons. */
+    media?: React.ReactNode;
+    /** Optional actions (buttons, links, or any ReactNode) displayed below the description */
+    children?: React.ReactNode;
+}
 /**
  * Configuration for DataTableColumnHeader component
  *
@@ -77,41 +99,13 @@ export type DataTableColumn<TData> = ColumnDef<TData> & {
     enableSorting?: boolean;
     enableHiding?: boolean;
 };
-/**
- * Settings structure compatible with TableV2 format
- * Used for initialSettings and onUpdate callback
- */
-export interface DataTableSettings {
-    hide?: string[];
-    show?: string[];
-    width?: {
-        [key: string]: number;
-    };
-    pinnedColumns?: {
-        right: string[];
-        left: string[];
-    };
-    order?: string[];
-    sorting?: SortingState;
-}
 export interface DataTableProps<TData> {
     columns: DataTableColumn<TData>[];
     data: TData[];
     isLoading?: boolean;
-    empty?: EmptyProps;
+    empty?: DataTableEmptyConfig;
     checkboxSelection?: boolean;
-    /**
-     * Controlled row selection state (optional)
-     * If provided, component operates in controlled mode
-     */
-    rowSelection?: RowSelectionState;
-    /**
-     * Callback fired when row selection changes
-     * In controlled mode, you must update the rowSelection prop
-     * @param rowSelectionState - Object with row indices as keys (e.g., { "0": true, "2": true })
-     * @param selectedRows - Array of actual row data objects
-     */
-    onRowSelectionChange?: (rowSelectionState: RowSelectionState, selectedRows: TData[]) => void;
+    onRowSelectionChange?: (selectedRows: TData[]) => void;
     enablePagination?: boolean;
     pageSize?: number;
     pageIndex?: number;
@@ -125,15 +119,12 @@ export interface DataTableProps<TData> {
     enableColumnFilters?: boolean;
     columnFilters?: ColumnFiltersState;
     onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
-    enableColumnPinning?: boolean;
     columnVisibility?: VisibilityState;
     onColumnVisibilityChange?: (visibility: VisibilityState) => void;
     onRowClick?: (row: TData) => void;
     height?: string | number;
     rowHeight?: number;
     persistKey?: string;
-    initialSettings?: DataTableSettings;
-    onUpdate?: (settings: DataTableSettings) => void;
     renderToolbar?: () => React.ReactNode;
     renderActions?: () => React.ReactNode;
     className?: string;

package/dist/components/organisms/data-table/hooks/use-data-table-columns.js

@@ -1,82 +1,78 @@
-import { j as a } from "../../../../_virtual/jsx-runtime.js";
+import { j as n } from "../../../../_virtual/jsx-runtime.js";
 import * as C from "react";
-import { Button as b } from "../../../atoms/button/button.js";
-import { DataTableColumnHeader as S } from "../components/column-header/data-table-column-header.js";
-import { isHeaderConfig as h } from "../utils/data-table-utils.js";
-import { COLUMN_MIN_SIZE_DEFAULT as p, CHECKBOX_COLUMN_CONFIG as c, ACTIONS_COLUMN_CONFIG as g } from "../utils/data-table-constants.js";
-import { Checkbox as z } from "../../../atoms/checkbox/checkbox.js";
-function _({
-  columns: f,
+import { DataTableColumnHeader as f } from "../components/column-header/data-table-column-header.js";
+import { isHeaderConfig as S } from "../utils/data-table-utils.js";
+import { ACTIONS_COLUMN_CONFIG as c } from "../utils/data-table-constants.js";
+import { Checkbox as u } from "../../../atoms/checkbox/checkbox.js";
+import { Button as h } from "../../../atoms/button/button.js";
+function P({
+  columns: g,
   checkboxSelection: d = !1,
-  actions: l
+  actions: a
 }) {
   return C.useMemo(() => {
-    let n = f.map((t) => {
-      const { header: e, enablePinning: i = !0, ...r } = t, s = r.size !== void 0 ? { ...r, minSize: r.minSize ?? p } : r;
+    let l = g.map((r) => {
+      const { header: e, enablePinning: i = !0, ...t } = r, o = t.size !== void 0 ? { ...t, minSize: t.minSize ?? t.size } : t;
       return typeof e == "string" ? {
-        ...s,
+        ...o,
         enablePinning: i,
-        header: ({ column: o, table: m }) => /* @__PURE__ */ a.jsx(
-          S,
+        header: ({ column: s, table: m }) => /* @__PURE__ */ n.jsx(
+          f,
           {
-            column: o,
+            column: s,
             table: m,
             title: e
           }
         )
-      } : h(e) ? {
-        ...s,
+      } : S(e) ? {
+        ...o,
         enablePinning: i,
-        header: ({ column: o, table: m }) => /* @__PURE__ */ a.jsx(
-          S,
+        header: ({ column: s, table: m }) => /* @__PURE__ */ n.jsx(
+          f,
           {
-            column: o,
+            column: s,
             table: m,
             title: e.title,
             info: e.info,
             className: e.className
           }
         )
-      } : { ...s, header: e, enablePinning: i };
+      } : { ...o, header: e, enablePinning: i };
     });
-    if (d && (n = [{
+    if (d && (l = [{
       id: "select",
-      header: ({ table: e }) => /* @__PURE__ */ a.jsx(
-        z,
+      header: ({ table: e }) => /* @__PURE__ */ n.jsx(
+        u,
         {
           checked: e.getIsAllPageRowsSelected() || (e.getIsSomePageRowsSelected() ? "indeterminate" : !1),
-          onChange: (i) => e.toggleAllPageRowsSelected(i.target.checked),
+          onCheckedChange: (i) => e.toggleAllPageRowsSelected(!!i),
           "aria-label": "Select all"
         }
       ),
-      cell: ({ row: e }) => /* @__PURE__ */ a.jsx(
-        z,
+      cell: ({ row: e }) => /* @__PURE__ */ n.jsx(
+        u,
         {
           checked: e.getIsSelected(),
-          onChange: (i) => e.toggleSelected(i.target.checked),
+          onCheckedChange: (i) => e.toggleSelected(!!i),
           "aria-label": "Select row"
         }
       ),
       enableSorting: !1,
       enableHiding: !1,
-      enablePinning: !1,
-      enableResizing: !1,
-      size: c.size,
-      minSize: c.minSize,
-      maxSize: c.maxSize
-    }, ...n]), l) {
-      const t = {
+      enablePinning: !1
+    }, ...l]), a) {
+      const r = {
         id: "actions",
         header: "",
-        cell: ({ row: e }) => l.render ? /* @__PURE__ */ a.jsx(a.Fragment, { children: l.render(e.original) }) : /* @__PURE__ */ a.jsx(
-          b,
+        cell: ({ row: e }) => a.render ? /* @__PURE__ */ n.jsx(n.Fragment, { children: a.render(e.original) }) : /* @__PURE__ */ n.jsx(
+          h,
           {
             variant: "ghost",
             size: "icon",
             startIcon: "Eye",
             "aria-label": "Actions",
             onClick: (i) => {
-              i.stopPropagation(), l.onClick?.(e.original);
+              i.stopPropagation(), a.onClick?.(e.original);
             }
           }
         ),
@@ -84,27 +80,15 @@ function _({
         enableHiding: !1,
         enablePinning: !1,
         enableResizing: !1,
-        size: g.size,
-        minSize: g.minSize,
-        maxSize: g.maxSize
+        size: c.size,
+        minSize: c.minSize,
+        maxSize: c.maxSize
       };
-      n = [...n, t];
+      l = [...l, r];
     }
-    const u = {
-      id: "_spacer",
-      header: "",
-      cell: () => null,
-      enableSorting: !1,
-      enableHiding: !1,
-      enablePinning: !1,
-      enableResizing: !1,
-      size: 100,
-      // Arbitrary value, colgroup will override with auto
-      minSize: 0
-    };
-    return n = [...n, u], n;
-  }, [d, l, f]);
+    return l;
+  }, [d, a, g]);
 }
 export {
-  _ as useDataTableColumns
+  P as useDataTableColumns
 };

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

@@ -1,18 +1,12 @@
 import { ColumnFiltersState, SortingState, VisibilityState, RowSelectionState, ColumnPinningState } from '@tanstack/react-table';
-import { DataTableSettings } from '../data-table.types';
 import * as React from "react";
 interface UseDataTableStateProps {
     persistKey?: string;
     hasActions?: boolean;
-    externalSorting?: SortingState;
-    onExternalSortingChange?: (sorting: SortingState) => void;
-    externalRowSelection?: RowSelectionState;
-    initialSettings?: DataTableSettings;
-    onUpdate?: (settings: DataTableSettings) => void;
 }
-export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, externalRowSelection, initialSettings, onUpdate, }: UseDataTableStateProps): {
+export declare function useDataTableState({ persistKey, hasActions, }: UseDataTableStateProps): {
     sorting: SortingState;
-    setSorting: (sorting: SortingState) => void;
+    setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
     columnFilters: ColumnFiltersState;
     setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
     columnVisibility: VisibilityState;