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

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

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

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

@@ -1,12 +1,18 @@
 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, }: UseDataTableStateProps): {
+export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, externalRowSelection, initialSettings, onUpdate, }: UseDataTableStateProps): {
     sorting: SortingState;
-    setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
+    setSorting: (sorting: SortingState) => void;
     columnFilters: ColumnFiltersState;
     setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
     columnVisibility: VisibilityState;

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

@@ -1,74 +1,109 @@
-import * as e from "react";
-function V({
-  persistKey: i,
-  hasActions: l = !1
+import * as i from "react";
+function $({
+  persistKey: r,
+  hasActions: s = !1,
+  externalSorting: P,
+  onExternalSortingChange: l,
+  externalRowSelection: y,
+  initialSettings: o,
+  onUpdate: m
 }) {
-  const [g, m] = e.useState([]), [S, b] = e.useState(
+  const [c, a] = i.useState([]), [w, I] = i.useState(
     []
-  ), [r, c] = e.useState({}), [h, P] = e.useState({}), [a, s] = e.useState({
+  ), [u, d] = i.useState({}), [V, C] = i.useState({}), [f, g] = i.useState({
     left: [],
-    right: l ? ["actions"] : []
-  });
-  e.useEffect(() => {
-    if (!i) return;
-    const n = localStorage.getItem(`datatable-${i}`);
-    if (n)
+    right: s ? ["actions"] : []
+  }), F = P ?? c, O = l ?? a, R = y ?? V, v = C;
+  i.useEffect(() => {
+    if (o) {
+      if (o.hide || o.show) {
+        const e = {};
+        o.hide?.forEach((t) => {
+          e[t] = !1;
+        }), d(e);
+      }
+      o.pinnedColumns && g({
+        left: o.pinnedColumns.left || [],
+        right: [
+          ...(o.pinnedColumns.right || []).filter(
+            (e) => e !== "actions"
+          ),
+          ...s ? ["actions"] : []
+        ]
+      }), !l && o.sorting && a(o.sorting);
+    }
+  }, [o, s, l]), i.useEffect(() => {
+    if (!r) return;
+    const e = localStorage.getItem(`datatable-${r}`);
+    if (e)
       try {
-        const t = JSON.parse(n);
-        t.columnVisibility && c(t.columnVisibility), t.columnPinning && s({
+        const t = JSON.parse(e);
+        t.columnVisibility && d(t.columnVisibility), t.columnPinning && g({
           left: t.columnPinning.left || [],
           right: [
             ...(t.columnPinning.right || []).filter(
-              (o) => o !== "actions"
+              (n) => n !== "actions"
             ),
-            ...l ? ["actions"] : []
+            ...s ? ["actions"] : []
           ]
-        });
+        }), !l && t.sorting && a(t.sorting);
       } catch (t) {
         console.error("Failed to load table state", t);
       }
-  }, [i, l]), e.useEffect(() => {
-    if (!i) return;
-    const n = {
-      columnVisibility: r,
-      columnPinning: a
+  }, [r, s, l]), i.useEffect(() => {
+    const e = Object.entries(u).filter(([, n]) => !n).map(([n]) => n), t = {
+      hide: e.length > 0 ? e : void 0,
+      pinnedColumns: {
+        left: f.left || [],
+        right: f.right || []
+      },
+      // Only include sorting if not controlled externally
+      ...!l && c.length > 0 && { sorting: c }
     };
-    localStorage.setItem(`datatable-${i}`, JSON.stringify(n));
-  }, [r, a, i]);
-  const d = e.useCallback(
-    (n) => {
-      s((t) => {
-        const o = typeof n == "function" ? n(t) : n, u = Array.isArray(o.left) ? o.left : [], f = Array.isArray(o.right) ? o.right : [];
-        if (l) {
-          const y = f.filter(
-            (C) => C !== "actions"
+    if (r) {
+      const n = {
+        columnVisibility: u,
+        columnPinning: f,
+        ...!l && { sorting: c }
+      };
+      localStorage.setItem(`datatable-${r}`, JSON.stringify(n));
+    }
+    m && m(t);
+  }, [u, f, c, r, l, m]);
+  const J = i.useCallback(
+    (e) => {
+      g((t) => {
+        const n = typeof e == "function" ? e(t) : e, h = Array.isArray(n.left) ? n.left : [], b = Array.isArray(n.right) ? n.right : [];
+        if (s) {
+          const N = b.filter(
+            (S) => S !== "actions"
           );
           return {
-            left: u,
-            right: [...y, "actions"]
+            left: h,
+            right: [...N, "actions"]
           };
         }
         return {
-          left: u,
-          right: f
+          left: h,
+          right: b
         };
       });
     },
-    [l]
+    [s]
   );
   return {
-    sorting: g,
-    setSorting: m,
-    columnFilters: S,
-    setColumnFilters: b,
-    columnVisibility: r,
-    setColumnVisibility: c,
-    rowSelection: h,
-    setRowSelection: P,
-    columnPinning: a,
-    handleColumnPinningChange: d
+    sorting: F,
+    setSorting: O,
+    columnFilters: w,
+    setColumnFilters: I,
+    columnVisibility: u,
+    setColumnVisibility: d,
+    rowSelection: R,
+    setRowSelection: v,
+    columnPinning: f,
+    handleColumnPinningChange: J
   };
 }
 export {
-  V as useDataTableState
+  $ as useDataTableState
 };

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

@@ -10,14 +10,20 @@ export declare const RESIZE_HANDLE_CONFIG: {
     readonly lineHeight: "h-5";
     readonly lineWidth: "w-[1px]";
 };
+export declare const CHECKBOX_COLUMN_CONFIG: {
+    readonly size: 50;
+    readonly minSize: 50;
+    readonly maxSize: 50;
+};
 export declare const ACTIONS_COLUMN_CONFIG: {
     readonly size: 50;
     readonly minSize: 50;
     readonly maxSize: 50;
 };
 export declare const CELL_BACKGROUND_COLORS: {
-    readonly header: "rgb(250 250 250)";
-    readonly body: "white";
+    readonly header: "hsl(var(--sidebar))";
+    readonly body: "hsl(var(--background))";
 };
 export declare const ROW_HEIGHT_DEFAULT = 66;
+export declare const COLUMN_MIN_SIZE_DEFAULT = 50;
 export declare const PINNED_SHADOW_CLASS = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";

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

@@ -1,4 +1,4 @@
-const t = {
+const _ = {
   height: "h-8",
   gap: "gap-1.5",
   roundedClass: "rounded-md",
@@ -8,19 +8,25 @@ const t = {
   width: "w-2",
   lineHeight: "h-5",
   lineWidth: "w-[1px]"
-}, _ = {
+}, t = {
   size: 50,
   minSize: 50,
   maxSize: 50
 }, i = {
-  header: "rgb(250 250 250)",
-  body: "white"
-}, n = 66, o = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
+  size: 50,
+  minSize: 50,
+  maxSize: 50
+}, n = {
+  header: "hsl(var(--sidebar))",
+  body: "hsl(var(--background))"
+}, o = 66, s = 50, C = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
 export {
-  _ as ACTIONS_COLUMN_CONFIG,
-  i as CELL_BACKGROUND_COLORS,
-  t as COLUMN_HEADER_CONFIG,
-  o as PINNED_SHADOW_CLASS,
+  i as ACTIONS_COLUMN_CONFIG,
+  n as CELL_BACKGROUND_COLORS,
+  t as CHECKBOX_COLUMN_CONFIG,
+  _ as COLUMN_HEADER_CONFIG,
+  s as COLUMN_MIN_SIZE_DEFAULT,
+  C as PINNED_SHADOW_CLASS,
   e as RESIZE_HANDLE_CONFIG,
-  n as ROW_HEIGHT_DEFAULT
+  o as ROW_HEIGHT_DEFAULT
 };