@algorithm-shift/design-system 1.2.86 → 1.2.87

package/dist/index.mjs

@@ -226,12 +226,17 @@ function Repeater({
   render,
   emptyFallback = null,
   wrapper,
-  className
+  className,
+  loading = false,
+  loadingText = "Loading..."
 }) {
   const list = React3.useMemo(
     () => typeof count === "number" ? items.slice(0, count) : items,
     [items, count]
   );
+  if (loading) {
+    return /* @__PURE__ */ jsx10("div", { className, children: loadingText });
+  }
   if (!list.length) {
     return emptyFallback ? /* @__PURE__ */ jsx10(Fragment2, { children: emptyFallback }) : /* @__PURE__ */ jsx10("div", { className, children: "No items to display." });
   }
@@ -27717,6 +27722,31 @@ function useLazyDropdown(config) {
       setLoading(false);
     }
   }, [fetchApiData, transformToOptions]);
+  const fetchValueItem = async () => {
+    if (!configRef.current.apiUrl) return [];
+    try {
+      setLoading(true);
+      const res = await axios.get(configRef.current.apiUrl, {
+        params: { [configRef.current.dataKey]: configRef.current.value },
+        withCredentials: true
+      });
+      if (res.data?.success && Array.isArray(res.data.data) && res.data.data.length > 0) {
+        const fetched = transformToOptions(res.data.data);
+        setOptions((prev) => [...fetched, ...prev]);
+      }
+    } catch (err) {
+      console.warn("\u26A0\uFE0F Failed to fetch default value for dropdown:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect13(() => {
+    const cfg = configRef.current;
+    if (!cfg.enabled || !cfg.value || cfg.dataSource !== "api" || !cfg.apiUrl) return;
+    const valueExists = options.some((opt) => opt.value === cfg.value);
+    if (valueExists) return;
+    fetchValueItem();
+  }, [config.value, config.dataKey, config.apiUrl, config.dataSource, transformToOptions]);
   const loadMore = useCallback2(() => {
     if (!loading && hasMore) {
       loadPage(page + 1, searchTerm);
@@ -27793,7 +27823,8 @@ function LazySelectDropdown({
     pageSize: pageSize || 10,
     dataKey,
     dataLabel,
-    initialData: options || []
+    initialData: options || [],
+    value
   });
   const selectedOption = lazyOptions.find((opt) => opt.value === value);
   useEffect14(() => {
@@ -27858,7 +27889,7 @@ function LazySelectDropdown({
       "div",
       {
         onMouseDown: (e) => e.stopPropagation(),
-        className: "absolute z-[9999] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
+        className: "absolute z-[900] w-fit mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto",
         style: {
           width: dropdownRef.current?.offsetWidth,
           top: dropdownRef.current ? dropdownRef.current.getBoundingClientRect().bottom + window.scrollY : 0,
@@ -29235,7 +29266,10 @@ var useDynamicColumns = (config, customRenderers = {}, customFormatters = {}) =>
           col.format,
           customFormatters
         );
-      }
+      },
+      enableSorting: col.enableSorting,
+      enableColumnFilter: col.enableColumnFilter,
+      meta: col.meta
     });
   });
 };
@@ -29258,37 +29292,13 @@ function DataTable({
   globalSearch,
   onCellClick,
   onDeleteRow,
-  enableDelete
+  rowActions
 }) {
   const [columnFilters, setColumnFilters] = React9.useState([]);
   const [columnVisibility, setColumnVisibility] = React9.useState({});
   const [manualSort, setManualSort] = React9.useState(null);
   const [searchTerm, setSearchTerm] = React9.useState("");
-  const deleteColumn = React9.useMemo(() => ({
-    id: "delete",
-    header: "Actions",
-    cell: ({ row }) => /* @__PURE__ */ jsx53(
-      "button",
-      {
-        className: "px-3 py-1 text-[12px] bg-red-800 text-white rounded hover:bg-neutral-600 cursor-pointer",
-        onClick: (event) => {
-          event.stopPropagation();
-          if (onDeleteRow) {
-            onDeleteRow(row.original, "delete");
-          }
-        },
-        children: "Delete"
-      }
-    ),
-    meta: { isClickable: true }
-  }), [onDeleteRow]);
-  const combinedColumns = React9.useMemo(() => {
-    if (enableDelete) {
-      return [...columns, deleteColumn];
-    }
-    return columns;
-  }, [columns, enableDelete, deleteColumn]);
-  const dynamicCols = useDynamicColumns({ columns: combinedColumns });
+  const dynamicCols = useDynamicColumns({ columns });
   const table = useReactTable({
     data,
     columns: dynamicCols,
@@ -29414,7 +29424,7 @@ function DataTable({
       ] })
     ] }),
     /* @__PURE__ */ jsxs31(Table3, { children: [
-      /* @__PURE__ */ jsx53(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx53(TableRow, { children: hg.headers.map((header) => {
+      /* @__PURE__ */ jsx53(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx53(TableRow, { children: hg.headers.map((header, index) => {
         const canSort = header.column.getCanSort();
         const canFilter = header.column.getCanFilter();
         const sortDir = manualSort?.key === header.column.id ? manualSort.dir : null;
@@ -29494,26 +29504,49 @@ function DataTable({
               }
             )
           ] })
-        ] }) }, header.id);
-      }) }, hg.id)) }),
-      /* @__PURE__ */ jsx53(TableBody, { children: loading ? /* @__PURE__ */ jsx53(Fragment20, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx53(TableRow, { children: combinedColumns.map((_2, j) => /* @__PURE__ */ jsx53(TableCell, { className: "p-3", children: /* @__PURE__ */ jsx53("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx53(TableRow, { children: row.getVisibleCells().map((cell) => {
+        ] }) }, `header-${header.id}-${index}`);
+      }) }, `header-group-${hg.id}`)) }),
+      /* @__PURE__ */ jsx53(TableBody, { children: loading ? /* @__PURE__ */ jsx53(Fragment20, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx53(TableRow, { children: dynamicCols.map((_2, j) => /* @__PURE__ */ jsx53(TableCell, { className: "p-3", children: /* @__PURE__ */ jsx53("span", { className: "h-4 bg-gray-200 rounded w-3/4 block animate-pulse" }) }, j)) }, i)) }) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx53(TableRow, { children: row.getVisibleCells().map((cell, cellIndex, arr) => {
         const meta = cell.column.columnDef.meta || {};
         const isClickable = meta?.isClickable;
-        return /* @__PURE__ */ jsx53(
+        const isLastCell = cellIndex === arr.length - 1;
+        return /* @__PURE__ */ jsxs31(
           TableCell,
           {
-            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100" : ""}`,
+            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100" : ""} relative`,
             style: meta?.cellStyle,
             onClick: () => {
               if (isClickable && onCellClick) {
                 onCellClick(cell.row.original, cell.column.id);
               }
             },
-            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+            children: [
+              flexRender(cell.column.columnDef.cell, cell.getContext()),
+              isLastCell && rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx53("div", { className: "absolute bg-[#fff] p-1 px-4 inset-y-0 right-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-lg rounded", children: rowActions.map((action) => {
+                const isDelete = action.id === "delete" || action.icon === "delete";
+                return /* @__PURE__ */ jsx53(
+                  "button",
+                  {
+                    className: `ml-2 px-2 py-1 text-[12px] rounded cursor-pointer ${isDelete ? "bg-red-800 text-white hover:bg-neutral-600" : "bg-gray-300 hover:bg-gray-400"}`,
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      if (isDelete) {
+                        onDeleteRow?.(cell.row.original, "delete");
+                      } else {
+                        onCellClick?.(cell.row.original, cell.column.id);
+                      }
+                    },
+                    title: action.header,
+                    children: action.header
+                  },
+                  action.id
+                );
+              }) })
+            ]
           },
-          cell.id
+          `cell-${cell.id}-${cellIndex}`
         );
-      }) }, row.id)) : /* @__PURE__ */ jsx53(TableRow, { children: /* @__PURE__ */ jsx53(TableCell, { colSpan: combinedColumns.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx53("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
+      }) }, row.id)) : /* @__PURE__ */ jsx53(TableRow, { children: /* @__PURE__ */ jsx53(TableCell, { colSpan: dynamicCols.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx53("span", { className: "flex items-center justify-center py-10 w-full min-w-full text-gray-600 bg-gray-100", children: "No results." }) }) }) })
     ] }),
     pagination && /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between py-3 px-2 text-sm w-full", children: [
       /* @__PURE__ */ jsxs31("div", { children: [
@@ -29580,7 +29613,6 @@ var Table4 = ({
   totalRecords = 0,
   globalSearch = false,
   onCellClick,
-  enableDelete,
   onDeleteRow,
   ...props
 }) => {
@@ -29612,8 +29644,7 @@ var Table4 = ({
       },
       onDeleteRow: (cell) => {
         onDeleteRow?.(cell.id);
-      },
-      enableDelete
+      }
     }
   ) });
 };
@@ -29826,7 +29857,7 @@ var CustomPagination = ({
 var Pagination_default = CustomPagination;
 
 // src/components/Navigation/Tabs/Tabs.tsx
-import { useCallback as useCallback3, useMemo as useMemo5, useState as useState8 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo4, useState as useState8 } from "react";
 import Link5 from "next/link";
 import { useRouter } from "next/navigation";
 import { Fragment as Fragment21, jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -29863,7 +29894,7 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode, isBuil
     });
     return sortMenus(rootMenus);
   }
-  const rawTabs = useMemo5(() => {
+  const rawTabs = useMemo4(() => {
     if (!Array.isArray(tabs)) return [];
     if (source === "manual") return Array.isArray(tabs) ? tabs : [];
     return groupMenus(tabs);
@@ -30105,7 +30136,7 @@ import Link6 from "next/link";
 import Image4 from "next/image";
 import { useRouter as useRouter2 } from "next/navigation";
 import { DropdownMenuSeparator } from "@radix-ui/react-dropdown-menu";
-import { useCallback as useCallback4, useMemo as useMemo6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5, useState as useState9 } from "react";
 import { Fragment as Fragment22, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
 function Navbar({
   style,
@@ -30144,7 +30175,7 @@ function Navbar({
       router.push(pendingUrl);
     }
   };
-  const formatedMenu = useMemo6(() => {
+  const formatedMenu = useMemo5(() => {
     if (source === "state" && navList && navList.length) {
       return navList.map((i) => ({ ...i, header: i.name || "Menu" }));
     }
@@ -30322,7 +30353,7 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
 var BarChart_default = React12.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React13, { useEffect as useEffect25, useMemo as useMemo7, useState as useState10 } from "react";
+import React13, { useEffect as useEffect25, useMemo as useMemo6, useState as useState10 } from "react";
 import {
   PieChart,
   Pie,
@@ -30351,18 +30382,18 @@ var DonutChart = ({ className, style, loading, ...props }) => {
   const showLegends = props.showLegends ?? true;
   const labelType = props.labelType || "inside";
   const canvasMode = props.canvasMode;
-  const data = useMemo7(() => {
+  const data = useMemo6(() => {
     if (!Array.isArray(props.data)) return [];
     return props.data.map((item) => ({ ...item, color: getRandomColor() }));
   }, [props.data]);
-  const total = useMemo7(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const total = useMemo6(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const forceMobile = canvasMode === "mobile" || canvasMode === "tablet";
   const [mounted, setMounted] = useState10(false);
   useEffect25(() => {
     const timeout = setTimeout(() => setMounted(true), 100);
     return () => clearTimeout(timeout);
   }, []);
-  const renderLegends = useMemo7(() => {
+  const renderLegends = useMemo6(() => {
     if (!showLegends) return null;
     return /* @__PURE__ */ jsx66(Fragment23, { children: data.map((d) => /* @__PURE__ */ jsxs40(
       "div",