@rufous/ui 0.1.68 → 0.1.70

package/dist/main.cjs

@@ -30384,22 +30384,31 @@ function DataGrid({
   pageSizeOptions = [5, 10, 25, 50],
   title
 }) {
-  const initialColumns = (0, import_react18.useMemo)(() => initialColumnsProp.map((col) => ({
-    ...col,
-    key: col.key || col.field || "",
-    header: col.header || col.headerName || ""
-  })), [initialColumnsProp]);
-  const [columns, setColumns] = (0, import_react18.useState)(initialColumns);
+  const [columnOverrides, setColumnOverrides] = (0, import_react18.useState)({});
+  const resolvedColumns = (0, import_react18.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_react18.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_react18.useState)(initialPageSize);
-  const [sortKey, setSortKey] = (0, import_react18.useState)(null);
+  const [sortField, setSortField] = (0, import_react18.useState)(null);
   const [sortDirection, setSortDirection] = (0, import_react18.useState)(null);
   const [filterText, setFilterText] = (0, import_react18.useState)("");
   const [currentPage, setCurrentPage] = (0, import_react18.useState)(1);
@@ -30412,40 +30421,15 @@ function DataGrid({
   const menuRef = (0, import_react18.useRef)(null);
   const [showManageColumns, setShowManageColumns] = (0, import_react18.useState)(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react18.useState)(false);
+  const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
   const [advancedFilters, setAdvancedFilters] = (0, import_react18.useState)([
-    { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
+    { column: initialFilterCol, operator: "contains", value: "", logic: "AND" }
   ]);
-  (0, import_react18.useEffect)(() => {
-    setColumns((prevColumns) => {
-      return initialColumns.map((newCol) => {
-        const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
-        if (!prevCol) return newCol;
-        return {
-          ...newCol,
-          hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
-          pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
-        };
-      });
-    });
-  }, [initialColumns]);
-  (0, import_react18.useEffect)(() => {
-    setColumnWidths((prev) => {
-      const next = { ...prev };
-      initialColumns.forEach((col) => {
-        const key = String(col.key);
-        if (next[key] === void 0) {
-          const w = col.width || 200;
-          next[key] = typeof w === "number" ? w : parseInt(w);
-        }
-      });
-      return next;
-    });
-  }, [initialColumns]);
   const [colSearch, setColSearch] = (0, import_react18.useState)("");
   (0, import_react18.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;
@@ -30461,7 +30445,7 @@ function DataGrid({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [resizingColumn, startX, startWidth, columns]);
+  }, [resizingColumn, startX, startWidth, resolvedColumns]);
   (0, import_react18.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -30471,32 +30455,55 @@ function DataGrid({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handleSort = (key, dir) => {
+  (0, import_react18.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_react18.useMemo)(() => {
@@ -30538,30 +30545,30 @@ function DataGrid({
     });
   }, [data, filterText, advancedFilters]);
   const sortedData = (0, import_react18.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_react18.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;" });
@@ -30572,24 +30579,34 @@ function DataGrid({
     link2.click();
     document.body.removeChild(link2);
   };
-  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);
+    let position2 = {
+      top: rect.bottom + 4,
+      left: rect.left
+    };
+    if (rect.left + 150 > window.innerWidth) {
+      position2 = {
+        top: rect.bottom + 4,
+        right: window.innerWidth - rect.right
+      };
+    }
+    setMenuPosition(position2);
+    setActiveMenu(keyStr);
   };
   const visibleColumns = (0, import_react18.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 offset2 = 0;
     for (let i = 0; i < idx; i++) {
       if (visibleColumns[i].pinned === "left") {
-        offset2 += columnWidths[String(visibleColumns[i].key)] || 200;
+        offset2 += columnWidths[String(visibleColumns[i].field)] || 200;
       }
     }
     return offset2;
@@ -30623,14 +30640,14 @@ function DataGrid({
     },
     /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Columns, { size: 16 })
   ), /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ import_react18.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react18.default.createElement("thead", null, /* @__PURE__ */ import_react18.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_react18.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 }
       },
@@ -30638,25 +30655,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_react18.default.createElement(import_lucide_react.ChevronUp, { size: 12 }),
         isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.ChevronDown, { size: 12 })
       ), /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ import_react18.default.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
-          onClick: (e) => handleMenuOpen(e, colKey)
+          onClick: (e) => handleMenuOpen(e, colField)
         },
         /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.MoreVertical, { size: 13 })
       ), /* @__PURE__ */ import_react18.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);
           }
@@ -30664,19 +30681,19 @@ function DataGrid({
       )))
     );
   }), actions && /* @__PURE__ */ import_react18.default.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ import_react18.default.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ import_react18.default.createElement("tr", null, /* @__PURE__ */ import_react18.default.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ import_react18.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_react18.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) {
@@ -30723,8 +30740,11 @@ function DataGrid({
     /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.ArrowUp, { size: 14 }), " Sort ascending"),
     /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.ArrowDown, { size: 14 }), " Sort descending"),
     /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-menu-divider" }),
-    /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"),
-    /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"),
+    (() => {
+      const col = resolvedColumns.find((c) => c.field === activeMenu);
+      if (!col) return null;
+      return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
+    })(),
     /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-menu-divider" }),
     /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowAdvancedFilter(true);
@@ -30744,7 +30764,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_react18.default.createElement("div", { key: String(col.key), className: "dg-col-row" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(String(col.key)) }, col.hidden ? /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.EyeOff, { size: 14, style: { opacity: 0.4 } }))))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => ({ ...c, hidden: false }))) }, "Show All"), /* @__PURE__ */ import_react18.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_react18.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react18.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react18.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react18.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_react18.default.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.EyeOff, { size: 14 }) : /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.EyeOff, { size: 14, style: { opacity: 0.4 } })));
+  })), /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react18.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_react18.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_react18.default.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ import_react18.default.createElement("h3", null, "Filters"), /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.X, { size: 18 }))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ import_react18.default.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ import_react18.default.createElement(
     "button",
     {
       className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
@@ -30765,7 +30805,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_react18.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+    resolvedColumns.map((c) => /* @__PURE__ */ import_react18.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
   ), /* @__PURE__ */ import_react18.default.createElement(
     "select",
     {
@@ -30779,20 +30819,25 @@ function DataGrid({
     /* @__PURE__ */ import_react18.default.createElement("option", { value: "ends with" }, "ends with"),
     /* @__PURE__ */ import_react18.default.createElement("option", { value: "is empty" }, "is empty"),
     /* @__PURE__ */ import_react18.default.createElement("option", { value: "is not empty" }, "is not empty")
-  ), /* @__PURE__ */ import_react18.default.createElement(
-    "input",
-    {
-      className: "dg-filter-input",
-      placeholder: "Value\u2026",
-      value: f.value,
-      onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
-    }
-  )))), /* @__PURE__ */ import_react18.default.createElement(
+  ), (() => {
+    const col = resolvedColumns.find((c) => String(c.field) === f.column);
+    const isDate = col?.type === "date";
+    return /* @__PURE__ */ import_react18.default.createElement(
+      "input",
+      {
+        type: isDate ? "date" : "text",
+        className: "dg-filter-input",
+        placeholder: "Value\u2026",
+        value: f.value,
+        onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
+      }
+    );
+  })()))), /* @__PURE__ */ import_react18.default.createElement(
     "button",
     {
       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_react18.default.createElement(import_lucide_react.Plus, { size: 14 }),
     " Add Filter"
@@ -30800,7 +30845,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_react18.default.createElement(import_lucide_react.Trash2, { size: 14 }),
     " Reset"

package/dist/main.css

@@ -443,7 +443,6 @@
   padding: 0;
   font-size: 0.72rem;
   font-weight: 700;
-  text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-secondary);
   position: relative;

package/dist/main.js

@@ -1,10 +1,7 @@
 import {
   BaseDialog_default
-} from "./chunk-4GPYGFPP.js";
+} from "./chunk-K6626C4D.js";
 import "./chunk-E5RTHYCU.js";
-import {
-  unsubscribeIcon_default
-} from "./chunk-EZI3QGYJ.js";
 import {
   uploadIcon_default
 } from "./chunk-QTGVW36I.js";
@@ -17,9 +14,6 @@ import {
 import {
   workItemIcon_default
 } from "./chunk-QJPQC544.js";
-import {
-  softSkillsIcon_default
-} from "./chunk-3Y6QBRGD.js";
 import {
   subscribeIcon_default
 } from "./chunk-JVN6QVET.js";
@@ -42,8 +36,8 @@ import {
   unArchivedIcon_default
 } from "./chunk-ZJAV3FEQ.js";
 import {
-  questionTypeSingleIcon_default
-} from "./chunk-Q4DHI3B5.js";
+  unsubscribeIcon_default
+} from "./chunk-EZI3QGYJ.js";
 import {
   refreshIcon_default
 } from "./chunk-YTVUM76D.js";
@@ -66,8 +60,8 @@ import {
   sidebarIcon_default
 } from "./chunk-DK3DA5LH.js";
 import {
-  qualificationsIcon_default
-} from "./chunk-UTBCFDOX.js";
+  softSkillsIcon_default
+} from "./chunk-3Y6QBRGD.js";
 import {
   questionStatusAllIcon_default
 } from "./chunk-4Y7SQ5EP.js";
@@ -90,8 +84,8 @@ import {
   questionTypeMultipleIcon_default
 } from "./chunk-Z7USRFM2.js";
 import {
-  industryIcon_default
-} from "./chunk-4BTXGP7U.js";
+  questionTypeSingleIcon_default
+} from "./chunk-Q4DHI3B5.js";
 import {
   invoiceIcon_default
 } from "./chunk-6SUKO6QW.js";
@@ -114,8 +108,8 @@ import {
   projectIcon_default
 } from "./chunk-DLJHWFNG.js";
 import {
-  editChatIcon_default
-} from "./chunk-XCE3QE6Q.js";
+  qualificationsIcon_default
+} from "./chunk-UTBCFDOX.js";
 import {
   editIcon_default
 } from "./chunk-H372BAXA.js";
@@ -135,8 +129,8 @@ import {
   inactiveGroupIcon_default
 } from "./chunk-77QDKDFI.js";
 import {
-  copyIcon_default
-} from "./chunk-6FEUS4CQ.js";
+  industryIcon_default
+} from "./chunk-4BTXGP7U.js";
 import {
   difficultyAllIcon_default
 } from "./chunk-5XKFPQLH.js";
@@ -158,6 +152,22 @@ import {
 import {
   downloadPdfIcon_default
 } from "./chunk-N26C33E6.js";
+import {
+  editChatIcon_default
+} from "./chunk-XCE3QE6Q.js";
+import {
+  AddressLookup_default
+} from "./chunk-M5GFOGY5.js";
+import {
+  RufousThemeProvider,
+  useRufousTheme
+} from "./chunk-BOE27BFQ.js";
+import {
+  APP_THEMES
+} from "./chunk-S7BNFVQO.js";
+import {
+  FloatingInput
+} from "./chunk-UPCMMCPQ.js";
 import {
   activateUserIcon_default
 } from "./chunk-AH6RCYDL.js";
@@ -171,22 +181,12 @@ import {
   closeIcon_default
 } from "./chunk-Q5XKCUE3.js";
 import {
-  AddressLookup_default
-} from "./chunk-EB6MPFGC.js";
-import {
-  FloatingInput
-} from "./chunk-UPCMMCPQ.js";
+  copyIcon_default
+} from "./chunk-6FEUS4CQ.js";
+import "./chunk-GJGRMMAQ.js";
 import {
   Checkbox
 } from "./chunk-X357WQOT.js";
-import "./chunk-7KRG7VNW.js";
-import {
-  DataGrid
-} from "./chunk-B6EOV25J.js";
-import "./chunk-GJGRMMAQ.js";
-import {
-  RichTextEditor
-} from "./chunk-66HHM7VI.js";
 import "./chunk-QPGJCRBS.js";
 import {
   addButton_default
@@ -203,13 +203,13 @@ import {
 import {
   circularProgress_default
 } from "./chunk-CTBYVXFP.js";
+import "./chunk-7KRG7VNW.js";
 import {
-  RufousThemeProvider,
-  useRufousTheme
-} from "./chunk-BOE27BFQ.js";
+  DataGrid
+} from "./chunk-7OMS6IWF.js";
 import {
-  APP_THEMES
-} from "./chunk-S7BNFVQO.js";
+  RichTextEditor
+} from "./chunk-66HHM7VI.js";
 import "./chunk-LI4N7JWK.js";
 export {
   APP_THEMES,

package/dist/style.css

@@ -443,7 +443,6 @@
   padding: 0;
   font-size: 0.72rem;
   font-weight: 700;
-  text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-secondary);
   position: relative;

package/dist/styles/datagrid.css

@@ -114,7 +114,6 @@
   padding: 0;
   font-size: 0.72rem;
   font-weight: 700;
-  text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-secondary);
   position: relative;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.68",
+  "version": "0.1.70",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/style.css",

package/dist/{chunk-4GPYGFPP.js → chunk-K6626C4D.js}

@@ -1,9 +1,9 @@
-import {
-  closeIcon_default
-} from "./chunk-Q5XKCUE3.js";
 import {
   useRufousTheme
 } from "./chunk-BOE27BFQ.js";
+import {
+  closeIcon_default
+} from "./chunk-Q5XKCUE3.js";
 
 // lib/Dialogs/BaseDialog.tsx
 import * as React from "react";

package/dist/{chunk-EB6MPFGC.js → chunk-M5GFOGY5.js}

@@ -1,12 +1,12 @@
+import {
+  useRufousTheme
+} from "./chunk-BOE27BFQ.js";
 import {
   FloatingInput
 } from "./chunk-UPCMMCPQ.js";
 import {
   circularProgress_default
 } from "./chunk-CTBYVXFP.js";
-import {
-  useRufousTheme
-} from "./chunk-BOE27BFQ.js";
 
 // lib/TextFields/AddressLookup.tsx
 import React, { useState, useRef, useEffect } from "react";