@rufous/ui 0.1.67 → 0.1.69

package/dist/DataGrid/DataGrid.cjs

@@ -36,24 +36,38 @@ module.exports = __toCommonJS(DataGrid_exports);
 var import_react = __toESM(require("react"), 1);
 var import_lucide_react = require("lucide-react");
 function DataGrid({
-  columns: initialColumns,
+  columns: initialColumnsProp,
   data,
   actions,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   title
 }) {
-  const [columns, setColumns] = (0, import_react.useState)(initialColumns);
+  const [columnOverrides, setColumnOverrides] = (0, import_react.useState)({});
+  const resolvedColumns = (0, import_react.useMemo)(() => {
+    return initialColumnsProp.map((col) => {
+      const field = String(col.field || col.key || "");
+      const override = columnOverrides[field] || {};
+      return {
+        ...col,
+        field,
+        headerName: col.headerName || col.header || "",
+        hidden: override.hidden !== void 0 ? override.hidden : col.hidden,
+        pinned: override.pinned !== void 0 ? override.pinned : col.pinned
+      };
+    });
+  }, [initialColumnsProp, columnOverrides]);
   const [columnWidths, setColumnWidths] = (0, import_react.useState)(() => {
     const widths = {};
-    initialColumns.forEach((col) => {
+    initialColumnsProp.forEach((col) => {
+      const field = String(col.field || col.key || "");
       const w = col.width || 200;
-      widths[String(col.key)] = typeof w === "number" ? w : parseInt(w);
+      widths[field] = typeof w === "number" ? w : parseInt(w);
     });
     return widths;
   });
   const [pageSize, setPageSize] = (0, import_react.useState)(initialPageSize);
-  const [sortKey, setSortKey] = (0, import_react.useState)(null);
+  const [sortField, setSortField] = (0, import_react.useState)(null);
   const [sortDirection, setSortDirection] = (0, import_react.useState)(null);
   const [filterText, setFilterText] = (0, import_react.useState)("");
   const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
@@ -66,14 +80,15 @@ function DataGrid({
   const menuRef = (0, import_react.useRef)(null);
   const [showManageColumns, setShowManageColumns] = (0, import_react.useState)(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react.useState)(false);
+  const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
   const [advancedFilters, setAdvancedFilters] = (0, import_react.useState)([
-    { column: String(initialColumns[0].key), operator: "contains", value: "", logic: "AND" }
+    { column: initialFilterCol, operator: "contains", value: "", logic: "AND" }
   ]);
   const [colSearch, setColSearch] = (0, import_react.useState)("");
   (0, import_react.useEffect)(() => {
     const handleMouseMove = (e) => {
       if (!resizingColumn) return;
-      const col = columns.find((c) => String(c.key) === resizingColumn);
+      const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
       const diff = e.clientX - startX;
       const minW = col?.minWidth ? typeof col.minWidth === "number" ? col.minWidth : parseInt(col.minWidth) : 80;
       const maxW = col?.maxWidth ? typeof col.maxWidth === "number" ? col.maxWidth : parseInt(col.maxWidth) : Infinity;
@@ -89,7 +104,7 @@ function DataGrid({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [resizingColumn, startX, startWidth, columns]);
+  }, [resizingColumn, startX, startWidth, resolvedColumns]);
   (0, import_react.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -99,32 +114,55 @@ function DataGrid({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handleSort = (key, dir) => {
+  (0, import_react.useEffect)(() => {
+    setColumnWidths((prev) => {
+      const next = { ...prev };
+      initialColumnsProp.forEach((col) => {
+        const field = String(col.field || col.key || "");
+        if (next[field] === void 0) {
+          const w = col.width || 200;
+          next[field] = typeof w === "number" ? w : parseInt(w);
+        }
+      });
+      return next;
+    });
+  }, [initialColumnsProp]);
+  const handleSort = (fieldKey, dir) => {
     if (dir !== void 0) {
-      setSortKey(key);
+      setSortField(fieldKey);
       setSortDirection(dir);
-    } else if (sortKey === key) {
+    } else if (sortField === fieldKey) {
       if (sortDirection === "asc") setSortDirection("desc");
       else {
-        setSortKey(null);
+        setSortField(null);
         setSortDirection(null);
       }
     } else {
-      setSortKey(key);
+      setSortField(fieldKey);
       setSortDirection("asc");
     }
     setActiveMenu(null);
   };
-  const togglePin = (key, side) => {
-    setColumns((prev) => prev.map(
-      (col) => String(col.key) === key ? { ...col, pinned: col.pinned === side ? void 0 : side } : col
-    ));
+  const togglePin = (fieldKey, side) => {
+    setColumnOverrides((prev) => {
+      const current = prev[fieldKey] || {};
+      return {
+        ...prev,
+        [fieldKey]: { ...current, pinned: current.pinned === side ? void 0 : side }
+      };
+    });
     setActiveMenu(null);
   };
-  const toggleHide = (key) => {
-    setColumns((prev) => prev.map(
-      (col) => String(col.key) === key ? { ...col, hidden: !col.hidden } : col
-    ));
+  const toggleHide = (fieldKey) => {
+    setColumnOverrides((prev) => {
+      const current = prev[fieldKey] || {};
+      const col = resolvedColumns.find((c) => String(c.field) === fieldKey);
+      if (col?.hideable === false) return prev;
+      return {
+        ...prev,
+        [fieldKey]: { ...current, hidden: !current.hidden }
+      };
+    });
     setActiveMenu(null);
   };
   const filteredData = (0, import_react.useMemo)(() => {
@@ -166,30 +204,30 @@ function DataGrid({
     });
   }, [data, filterText, advancedFilters]);
   const sortedData = (0, import_react.useMemo)(() => {
-    if (!sortKey || !sortDirection) return filteredData;
-    const col = columns.find((c) => c.key === sortKey);
+    if (!sortField || !sortDirection) return filteredData;
+    const col = resolvedColumns.find((c) => c.field === sortField);
     return [...filteredData].sort((a, b) => {
-      let aVal = a[sortKey];
-      let bVal = b[sortKey];
+      let aVal = a[sortField];
+      let bVal = b[sortField];
       if (col?.valueGetter) {
-        aVal = col.valueGetter({ value: aVal, row: a, field: String(sortKey) });
-        bVal = col.valueGetter({ value: bVal, row: b, field: String(sortKey) });
+        aVal = col.valueGetter({ value: aVal, row: a, field: String(sortField) });
+        bVal = col.valueGetter({ value: bVal, row: b, field: String(sortField) });
       }
       if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
       if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
       return 0;
     });
-  }, [filteredData, sortKey, sortDirection, columns]);
+  }, [filteredData, sortField, sortDirection, resolvedColumns]);
   const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
   const paginatedData = (0, import_react.useMemo)(() => {
     const start = (currentPage - 1) * pageSize;
     return sortedData.slice(start, start + pageSize);
   }, [sortedData, currentPage, pageSize]);
   const handleExport = () => {
-    const visibleCols = columns.filter((c) => !c.hidden);
-    const headers = visibleCols.map((c) => c.header).join(",");
+    const visibleCols = resolvedColumns.filter((c) => !c.hidden);
+    const headers = visibleCols.map((c) => c.headerName).join(",");
     const rows = sortedData.map(
-      (item) => visibleCols.map((c) => `"${String(item[c.key]).replace(/"/g, '""')}"`).join(",")
+      (item) => visibleCols.map((c) => `"${String(item[c.field]).replace(/"/g, '""')}"`).join(",")
     );
     const csv = [headers, ...rows].join("\n");
     const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
@@ -200,24 +238,24 @@ function DataGrid({
     link.click();
     document.body.removeChild(link);
   };
-  const handleMenuOpen = (e, key) => {
+  const handleMenuOpen = (e, keyStr) => {
     e.stopPropagation();
     const rect = e.currentTarget.getBoundingClientRect();
     setMenuPosition({ top: rect.bottom + 4, left: rect.left });
-    setActiveMenu(key);
+    setActiveMenu(keyStr);
   };
   const visibleColumns = (0, import_react.useMemo)(() => {
-    const left = columns.filter((c) => !c.hidden && c.pinned === "left");
-    const mid = columns.filter((c) => !c.hidden && !c.pinned);
-    const right = columns.filter((c) => !c.hidden && c.pinned === "right");
+    const left = resolvedColumns.filter((c) => !c.hidden && c.pinned === "left");
+    const mid = resolvedColumns.filter((c) => !c.hidden && !c.pinned);
+    const right = resolvedColumns.filter((c) => !c.hidden && c.pinned === "right");
     return [...left, ...mid, ...right];
-  }, [columns]);
+  }, [resolvedColumns]);
   const getLeftOffset = (col, idx) => {
     if (col.pinned !== "left") return void 0;
     let offset = 0;
     for (let i = 0; i < idx; i++) {
       if (visibleColumns[i].pinned === "left") {
-        offset += columnWidths[String(visibleColumns[i].key)] || 200;
+        offset += columnWidths[String(visibleColumns[i].field)] || 200;
       }
     }
     return offset;
@@ -251,14 +289,14 @@ function DataGrid({
     },
     /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Columns, { size: 16 })
   ), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", null, visibleColumns.map((col, idx) => {
-    const colKey = String(col.key);
-    const width = columnWidths[colKey] || 200;
+    const colField = String(col.field);
+    const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
-    const isSorted = sortKey === col.key;
+    const isSorted = sortField === col.field;
     return /* @__PURE__ */ import_react.default.createElement(
       "th",
       {
-        key: colKey,
+        key: colField,
         className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
         style: { width, minWidth: width, left: leftOffset, flex: col.flex }
       },
@@ -266,25 +304,25 @@ function DataGrid({
         "div",
         {
           className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
-          onClick: () => col.sortable !== false && handleSort(col.key)
+          onClick: () => col.sortable !== false && handleSort(col.field || "")
         },
-        col.header,
+        col.headerName,
         isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, { size: 12 }),
         isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, { size: 12 })
       ), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ import_react.default.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
-          onClick: (e) => handleMenuOpen(e, colKey)
+          onClick: (e) => handleMenuOpen(e, colField)
         },
         /* @__PURE__ */ import_react.default.createElement(import_lucide_react.MoreVertical, { size: 13 })
       ), /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: `dg-resizer${resizingColumn === colKey ? " resizing" : ""}`,
+          className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
           onMouseDown: (e) => {
             e.preventDefault();
-            setResizingColumn(colKey);
+            setResizingColumn(colField);
             setStartX(e.clientX);
             setStartWidth(width);
           }
@@ -292,19 +330,19 @@ function DataGrid({
       )))
     );
   }), actions && /* @__PURE__ */ import_react.default.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ import_react.default.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ import_react.default.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
-    const colKey = String(col.key);
-    const width = columnWidths[colKey] || 200;
+    const colField = String(col.field);
+    const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
     return /* @__PURE__ */ import_react.default.createElement(
       "td",
       {
-        key: `${item.id}-${colKey}`,
+        key: `${item.id}-${colField}`,
         className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
         style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
       },
       (() => {
-        const field = String(col.key);
-        const rawValue = item[col.key];
+        const field = String(col.field);
+        const rawValue = item[col.field || ""];
         let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
         const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
         if (col.renderCell) {
@@ -372,7 +410,27 @@ function DataGrid({
       value: colSearch,
       onChange: (e) => setColSearch(e.target.value)
     }
-  )), columns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase()) && c.hideable !== false).map((col) => /* @__PURE__ */ import_react.default.createElement("div", { key: String(col.key), className: "dg-col-row" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(String(col.key)) }, col.hidden ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14, style: { opacity: 0.4 } }))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => ({ ...c, hidden: false }))) }, "Show All"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => c.hideable !== false ? { ...c, hidden: true } : c)) }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react.default.createElement(
+  )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
+    const key = String(col.key);
+    const isUnhideable = col.hideable === false;
+    return /* @__PURE__ */ import_react.default.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.EyeOff, { size: 14, style: { opacity: 0.4 } })));
+  })), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
+    const next = { ...prev };
+    resolvedColumns.forEach((c) => {
+      const k = String(c.key);
+      next[k] = { ...next[k], hidden: false };
+    });
+    return next;
+  }) }, "Show All"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => {
+    const newOverrides = { ...columnOverrides };
+    resolvedColumns.forEach((c) => {
+      if (c.hideable !== false) {
+        const key = String(c.key);
+        newOverrides[key] = { ...newOverrides[key], hidden: true };
+      }
+    });
+    setColumnOverrides(newOverrides);
+  } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
@@ -393,7 +451,7 @@ function DataGrid({
       value: f.column,
       onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: e.target.value } : fi))
     },
-    columns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+    resolvedColumns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
   ), /* @__PURE__ */ import_react.default.createElement(
     "select",
     {
@@ -420,7 +478,7 @@ function DataGrid({
     {
       className: "dg-action-btn",
       style: { alignSelf: "flex-start", marginTop: 4 },
-      onClick: () => setAdvancedFilters((p) => [...p, { column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
+      onClick: () => setAdvancedFilters((p) => [...p, { column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
     },
     /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 14 }),
     " Add Filter"
@@ -428,7 +486,7 @@ function DataGrid({
     "button",
     {
       className: "dg-action-btn",
-      onClick: () => setAdvancedFilters([{ column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
+      onClick: () => setAdvancedFilters([{ column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
     },
     /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Trash2, { size: 14 }),
     " Reset"

package/dist/DataGrid/DataGrid.d.cts

@@ -3,6 +3,6 @@ import { DataGridProps } from './types.cjs';
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumns, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
 
 export { DataGrid, DataGrid as default };

package/dist/DataGrid/DataGrid.d.ts

@@ -3,6 +3,6 @@ import { DataGridProps } from './types.js';
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumns, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
 
 export { DataGrid, DataGrid as default };

package/dist/DataGrid/DataGrid.js

@@ -1,7 +1,7 @@
 import {
   DataGrid,
   DataGrid_default
-} from "../chunk-IKG2B6JQ.js";
+} from "../chunk-LG4EJGMI.js";
 import "../chunk-LI4N7JWK.js";
 export {
   DataGrid,