@yuno-payments/dashboard-design-system 0.0.138-beta.2 → 0.0.139

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

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

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

@@ -10,6 +10,11 @@ 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;
@@ -20,4 +25,5 @@ export declare const CELL_BACKGROUND_COLORS: {
     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,26 +1,32 @@
-const e = {
+const _ = {
   height: "h-8",
   gap: "gap-1.5",
   roundedClass: "rounded-md",
   fontSize: "text-sm",
   fontWeight: "font-medium"
-}, t = {
+}, e = {
   width: "w-2",
   lineHeight: "h-5",
   lineWidth: "w-[1px]"
-}, _ = {
+}, t = {
+  size: 50,
+  minSize: 50,
+  maxSize: 50
+}, i = {
   size: 50,
   minSize: 50,
   maxSize: 50
 }, n = {
   header: "hsl(var(--sidebar))",
   body: "hsl(var(--background))"
-}, o = 66, i = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
+}, o = 66, s = 50, C = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
 export {
-  _ as ACTIONS_COLUMN_CONFIG,
+  i as ACTIONS_COLUMN_CONFIG,
   n as CELL_BACKGROUND_COLORS,
-  e as COLUMN_HEADER_CONFIG,
-  i as PINNED_SHADOW_CLASS,
-  t as RESIZE_HANDLE_CONFIG,
+  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,
   o as ROW_HEIGHT_DEFAULT
 };