@yuno-payments/dashboard-design-system 0.0.151-beta.1 → 0.0.151-beta.2

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

@@ -28,10 +28,10 @@ export interface DataTableProps<TData, TValue> {
      */
     checkboxSelection?: boolean;
     /**
-     * Controlled row selection state (array of selected rows)
-     * When provided, component operates in controlled mode
+     * Key to force reset of row selection. Change this value to clear all selections.
+     * Useful when parent needs to programmatically clear selections.
      */
-    selectedRows?: TData[];
+    selectionResetKey?: string | number;
     /**
      * Callback fired when row selection changes
      */
@@ -131,4 +131,4 @@ export interface DataTableProps<TData, TValue> {
  * />
  * ```
  */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, selectedRows, 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, selectionResetKey, 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;

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

@@ -1,176 +1,168 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import * as S from "react";
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import * as b from "react";
 import { useReactTable as U } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { Table as V } from "../../../vendor/shadcn/table.js";
-import { cn as b } from "../../../lib/utils.js";
+import { cn as h } 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 k, getCoreRowModel as O } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
-import { Empty as ee } from "../../molecules/empty/empty.js";
-function de({
-  columns: d,
-  data: s,
-  isLoading: j = !1,
-  empty: y,
-  checkboxSelection: g = !1,
-  selectedRows: a,
-  onRowSelectionChange: u,
-  enableSorting: T = !0,
-  manualSorting: D = !1,
-  sorting: E,
-  onSortingChange: F,
-  enableColumnFilters: v = !1,
-  enableColumnResizing: c = !0,
-  columnResizeMode: w = "onChange",
-  enableColumnPinning: M = !0,
-  onRowClick: N,
-  actions: f,
-  height: R,
-  rowHeight: p = Y,
-  className: H,
-  persistKey: P,
-  initialSettings: W,
-  onUpdate: _
+import { DataTableBody as Q } from "./components/data-table-body.js";
+import { useDataTableColumns as X } from "./hooks/use-data-table-columns.js";
+import { useDataTableState as Y } from "./hooks/use-data-table-state.js";
+import { ROW_HEIGHT_DEFAULT as Z } from "./utils/data-table-constants.js";
+import { getFilteredRowModel as k, getSortedRowModel as K, getCoreRowModel as O } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { Empty as oo } from "../../molecules/empty/empty.js";
+function go({
+  columns: m,
+  data: d,
+  isLoading: S = !1,
+  empty: j,
+  checkboxSelection: u = !1,
+  selectionResetKey: c,
+  onRowSelectionChange: l,
+  enableSorting: w = !0,
+  manualSorting: y = !1,
+  sorting: T,
+  onSortingChange: R,
+  enableColumnFilters: D = !1,
+  enableColumnResizing: r = !0,
+  columnResizeMode: F = "onChange",
+  enableColumnPinning: v = !0,
+  onRowClick: E,
+  actions: s,
+  height: M,
+  rowHeight: f = Z,
+  className: N,
+  persistKey: H,
+  initialSettings: P,
+  onUpdate: W
 }) {
-  const $ = Q({
-    columns: d,
-    checkboxSelection: g,
-    actions: f
+  const _ = X({
+    columns: m,
+    checkboxSelection: u,
+    actions: s
   }), {
-    sorting: x,
-    setSorting: C,
-    columnFilters: z,
-    setColumnFilters: A,
-    columnVisibility: G,
-    setColumnVisibility: L,
-    rowSelection: h,
-    setRowSelection: m,
-    columnPinning: B,
-    handleColumnPinningChange: I
-  } = X({
-    persistKey: P,
-    hasActions: !!f,
-    externalSorting: E,
-    onExternalSortingChange: F,
-    initialSettings: W,
-    onUpdate: _
-  }), n = U({
-    data: s,
-    columns: $,
+    sorting: g,
+    setSorting: p,
+    columnFilters: $,
+    setColumnFilters: z,
+    columnVisibility: A,
+    setColumnVisibility: G,
+    rowSelection: x,
+    setRowSelection: C,
+    columnPinning: L,
+    handleColumnPinningChange: B
+  } = Y({
+    persistKey: H,
+    hasActions: !!s,
+    externalSorting: T,
+    onExternalSortingChange: R,
+    initialSettings: P,
+    onUpdate: W
+  }), i = U({
+    data: d,
+    columns: _,
     getCoreRowModel: O(),
-    enableColumnResizing: c,
-    columnResizeMode: w,
-    enableColumnPinning: M,
+    enableColumnResizing: r,
+    columnResizeMode: F,
+    enableColumnPinning: v,
     defaultColumn: {
       enableSorting: !1,
       minSize: 50
     },
-    ...T && {
-      onSortingChange: (e) => {
-        C(typeof e == "function" ? e(x) : e);
+    ...w && {
+      onSortingChange: (o) => {
+        p(typeof o == "function" ? o(g) : o);
       },
-      getSortedRowModel: k(),
-      manualSorting: D
+      getSortedRowModel: K(),
+      manualSorting: y
     },
-    ...v && {
-      onColumnFiltersChange: A,
-      getFilteredRowModel: Z()
+    ...D && {
+      onColumnFiltersChange: z,
+      getFilteredRowModel: k()
     },
-    onColumnVisibilityChange: L,
-    onRowSelectionChange: m,
-    onColumnPinningChange: I,
+    onColumnVisibilityChange: G,
+    onRowSelectionChange: C,
+    onColumnPinningChange: B,
     state: {
-      sorting: x,
-      columnFilters: z,
-      columnVisibility: G,
-      rowSelection: h,
-      columnPinning: B
+      sorting: g,
+      columnFilters: $,
+      columnVisibility: A,
+      rowSelection: x,
+      columnPinning: L
     }
   });
-  if (S.useEffect(() => {
-    if (a === void 0) return;
-    const e = {};
-    if (a.length === 0) {
-      m({});
-      return;
+  if (b.useEffect(() => {
+    c !== void 0 && C({});
+  }, [c]), b.useEffect(() => {
+    if (l) {
+      const o = i.getFilteredSelectedRowModel().rows.map((t) => t.original);
+      l(o);
     }
-    s.forEach((o, r) => {
-      a.some((l) => l === o ? !0 : l?.code && o?.code ? l.code === o.code : !1) && (e[r] = !0);
-    }), m(e);
-  }, [a, s, m]), S.useEffect(() => {
-    if (u) {
-      const e = n.getFilteredSelectedRowModel().rows.map((o) => o.original);
-      u(e);
-    }
-  }, [h, u, n]), j)
-    return /* @__PURE__ */ t.jsx(
+  }, [x, l, i]), S)
+    return /* @__PURE__ */ e.jsx(
       q,
       {
-        columns: d,
-        checkboxSelection: g,
-        actions: f,
-        rowHeight: p
+        columns: m,
+        checkboxSelection: u,
+        actions: s,
+        rowHeight: f
       }
     );
-  if (s.length === 0) {
-    const e = y || {}, {
-      title: o = "No results",
-      description: r = "No data available",
-      media: i,
-      actions: l
-    } = e;
-    return /* @__PURE__ */ t.jsx(
-      ee,
+  if (d.length === 0) {
+    const o = j || {}, {
+      title: t = "No results",
+      description: a = "No data available",
+      media: n,
+      actions: I
+    } = o;
+    return /* @__PURE__ */ e.jsx(
+      oo,
       {
-        media: i,
-        title: o,
-        description: r,
-        actions: l
+        media: n,
+        title: t,
+        description: a,
+        actions: I
       }
     );
   }
-  return /* @__PURE__ */ t.jsx("div", { className: b("yuno-data-table space-y-4", H), children: /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ e.jsx("div", { className: h("yuno-data-table space-y-4", N), children: /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "rounded-md border overflow-x-auto",
-      style: { height: R || "auto" },
-      children: /* @__PURE__ */ t.jsxs(
+      style: { height: M || "auto" },
+      children: /* @__PURE__ */ e.jsxs(
         V,
         {
-          className: b("table-fixed"),
+          className: h("table-fixed"),
           children: [
-            /* @__PURE__ */ t.jsx("colgroup", { children: n.getHeaderGroups()[0]?.headers.map((e) => {
-              const o = e.column.columnDef.enableResizing === !1, r = e.column.id === "_spacer", i = e.column.getSize();
-              return r ? /* @__PURE__ */ t.jsx("col", { style: { width: "auto" } }, e.id) : /* @__PURE__ */ t.jsx(
+            /* @__PURE__ */ e.jsx("colgroup", { children: i.getHeaderGroups()[0]?.headers.map((o) => {
+              const t = o.column.columnDef.enableResizing === !1, a = o.column.id === "_spacer", n = o.column.getSize();
+              return a ? /* @__PURE__ */ e.jsx("col", { style: { width: "auto" } }, o.id) : /* @__PURE__ */ e.jsx(
                 "col",
                 {
                   style: {
-                    width: o ? `${i}px` : "auto",
-                    minWidth: o ? `${i}px` : void 0,
-                    maxWidth: o ? `${i}px` : void 0
+                    width: t ? `${n}px` : "auto",
+                    minWidth: t ? `${n}px` : void 0,
+                    maxWidth: t ? `${n}px` : void 0
                   }
                 },
-                e.id
+                o.id
               );
             }) }),
-            /* @__PURE__ */ t.jsx(
+            /* @__PURE__ */ e.jsx(
               J,
               {
-                table: n,
-                enableColumnResizing: c
+                table: i,
+                enableColumnResizing: r
               }
             ),
-            /* @__PURE__ */ t.jsx(
-              K,
+            /* @__PURE__ */ e.jsx(
+              Q,
               {
-                table: n,
-                enableColumnResizing: c,
-                onRowClick: N,
-                rowHeight: p
+                table: i,
+                enableColumnResizing: r,
+                onRowClick: E,
+                rowHeight: f
               }
             )
           ]
@@ -180,5 +172,5 @@ function de({
   ) });
 }
 export {
-  de as DataTable
+  go as DataTable
 };

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

@@ -100,7 +100,7 @@ export interface DataTableProps<TData> {
     isLoading?: boolean;
     empty?: EmptyProps;
     checkboxSelection?: boolean;
-    selectedRows?: TData[];
+    selectionResetKey?: string | number;
     onRowSelectionChange?: (selectedRows: TData[]) => void;
     enablePagination?: boolean;
     pageSize?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.151-beta.1",
+  "version": "0.0.151-beta.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",