@rufous/ui 0.1.68 → 0.1.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/DataGrid/DataGrid.cjs +143 -98
  2. package/dist/DataGrid/DataGrid.js +1 -1
  3. package/dist/DataGrid/index.cjs +143 -98
  4. package/dist/DataGrid/index.js +1 -1
  5. package/dist/Dialogs/BaseDialog.css +0 -1
  6. package/dist/Dialogs/BaseDialog.js +16 -16
  7. package/dist/Dialogs/index.css +0 -1
  8. package/dist/Dialogs/index.js +16 -16
  9. package/dist/TextFields/AddressLookup.js +3 -3
  10. package/dist/{chunk-B6EOV25J.js → chunk-7OMS6IWF.js} +143 -98
  11. package/dist/icons/index.js +16 -16
  12. package/dist/main.cjs +143 -98
  13. package/dist/main.css +0 -1
  14. package/dist/main.js +35 -35
  15. package/dist/style.css +0 -1
  16. package/dist/styles/datagrid.css +0 -1
  17. package/package.json +1 -1
  18. package/dist/{chunk-4GPYGFPP.js → chunk-K6626C4D.js} +3 -3
  19. package/dist/{chunk-EB6MPFGC.js → chunk-M5GFOGY5.js} +3 -3
package/dist/DataGrid/DataGrid.cjs CHANGED
@@ -43,22 +43,31 @@ function DataGrid({
43
43
  pageSizeOptions = [5, 10, 25, 50],
44
44
  title
45
45
  }) {
46
- const initialColumns = (0, import_react.useMemo)(() => initialColumnsProp.map((col) => ({
47
- ...col,
48
- key: col.key || col.field || "",
49
- header: col.header || col.headerName || ""
50
- })), [initialColumnsProp]);
51
- const [columns, setColumns] = (0, import_react.useState)(initialColumns);
46
+ const [columnOverrides, setColumnOverrides] = (0, import_react.useState)({});
47
+ const resolvedColumns = (0, import_react.useMemo)(() => {
48
+ return initialColumnsProp.map((col) => {
49
+ const field = String(col.field || col.key || "");
50
+ const override = columnOverrides[field] || {};
51
+ return {
52
+ ...col,
53
+ field,
54
+ headerName: col.headerName || col.header || "",
55
+ hidden: override.hidden !== void 0 ? override.hidden : col.hidden,
56
+ pinned: override.pinned !== void 0 ? override.pinned : col.pinned
57
+ };
58
+ });
59
+ }, [initialColumnsProp, columnOverrides]);
52
60
  const [columnWidths, setColumnWidths] = (0, import_react.useState)(() => {
53
61
  const widths = {};
54
- initialColumns.forEach((col) => {
62
+ initialColumnsProp.forEach((col) => {
63
+ const field = String(col.field || col.key || "");
55
64
  const w = col.width || 200;
56
- widths[String(col.key)] = typeof w === "number" ? w : parseInt(w);
65
+ widths[field] = typeof w === "number" ? w : parseInt(w);
57
66
  });
58
67
  return widths;
59
68
  });
60
69
  const [pageSize, setPageSize] = (0, import_react.useState)(initialPageSize);
61
- const [sortKey, setSortKey] = (0, import_react.useState)(null);
70
+ const [sortField, setSortField] = (0, import_react.useState)(null);
62
71
  const [sortDirection, setSortDirection] = (0, import_react.useState)(null);
63
72
  const [filterText, setFilterText] = (0, import_react.useState)("");
64
73
  const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
@@ -71,40 +80,15 @@ function DataGrid({
71
80
  const menuRef = (0, import_react.useRef)(null);
72
81
  const [showManageColumns, setShowManageColumns] = (0, import_react.useState)(false);
73
82
  const [showAdvancedFilter, setShowAdvancedFilter] = (0, import_react.useState)(false);
83
+ const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
74
84
  const [advancedFilters, setAdvancedFilters] = (0, import_react.useState)([
75
- { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
85
+ { column: initialFilterCol, operator: "contains", value: "", logic: "AND" }
76
86
  ]);
77
- (0, import_react.useEffect)(() => {
78
- setColumns((prevColumns) => {
79
- return initialColumns.map((newCol) => {
80
- const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
81
- if (!prevCol) return newCol;
82
- return {
83
- ...newCol,
84
- hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
85
- pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
86
- };
87
- });
88
- });
89
- }, [initialColumns]);
90
- (0, import_react.useEffect)(() => {
91
- setColumnWidths((prev) => {
92
- const next = { ...prev };
93
- initialColumns.forEach((col) => {
94
- const key = String(col.key);
95
- if (next[key] === void 0) {
96
- const w = col.width || 200;
97
- next[key] = typeof w === "number" ? w : parseInt(w);
98
- }
99
- });
100
- return next;
101
- });
102
- }, [initialColumns]);
103
87
  const [colSearch, setColSearch] = (0, import_react.useState)("");
104
88
  (0, import_react.useEffect)(() => {
105
89
  const handleMouseMove = (e) => {
106
90
  if (!resizingColumn) return;
107
- const col = columns.find((c) => String(c.key) === resizingColumn);
91
+ const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
108
92
  const diff = e.clientX - startX;
109
93
  const minW = col?.minWidth ? typeof col.minWidth === "number" ? col.minWidth : parseInt(col.minWidth) : 80;
110
94
  const maxW = col?.maxWidth ? typeof col.maxWidth === "number" ? col.maxWidth : parseInt(col.maxWidth) : Infinity;
@@ -120,7 +104,7 @@ function DataGrid({
120
104
  document.removeEventListener("mousemove", handleMouseMove);
121
105
  document.removeEventListener("mouseup", handleMouseUp);
122
106
  };
123
- }, [resizingColumn, startX, startWidth, columns]);
107
+ }, [resizingColumn, startX, startWidth, resolvedColumns]);
124
108
  (0, import_react.useEffect)(() => {
125
109
  const handleClickOutside = (e) => {
126
110
  if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -130,32 +114,55 @@ function DataGrid({
130
114
  document.addEventListener("mousedown", handleClickOutside);
131
115
  return () => document.removeEventListener("mousedown", handleClickOutside);
132
116
  }, []);
133
- const handleSort = (key, dir) => {
117
+ (0, import_react.useEffect)(() => {
118
+ setColumnWidths((prev) => {
119
+ const next = { ...prev };
120
+ initialColumnsProp.forEach((col) => {
121
+ const field = String(col.field || col.key || "");
122
+ if (next[field] === void 0) {
123
+ const w = col.width || 200;
124
+ next[field] = typeof w === "number" ? w : parseInt(w);
125
+ }
126
+ });
127
+ return next;
128
+ });
129
+ }, [initialColumnsProp]);
130
+ const handleSort = (fieldKey, dir) => {
134
131
  if (dir !== void 0) {
135
- setSortKey(key);
132
+ setSortField(fieldKey);
136
133
  setSortDirection(dir);
137
- } else if (sortKey === key) {
134
+ } else if (sortField === fieldKey) {
138
135
  if (sortDirection === "asc") setSortDirection("desc");
139
136
  else {
140
- setSortKey(null);
137
+ setSortField(null);
141
138
  setSortDirection(null);
142
139
  }
143
140
  } else {
144
- setSortKey(key);
141
+ setSortField(fieldKey);
145
142
  setSortDirection("asc");
146
143
  }
147
144
  setActiveMenu(null);
148
145
  };
149
- const togglePin = (key, side) => {
150
- setColumns((prev) => prev.map(
151
- (col) => String(col.key) === key ? { ...col, pinned: col.pinned === side ? void 0 : side } : col
152
- ));
146
+ const togglePin = (fieldKey, side) => {
147
+ setColumnOverrides((prev) => {
148
+ const current = prev[fieldKey] || {};
149
+ return {
150
+ ...prev,
151
+ [fieldKey]: { ...current, pinned: current.pinned === side ? void 0 : side }
152
+ };
153
+ });
153
154
  setActiveMenu(null);
154
155
  };
155
- const toggleHide = (key) => {
156
- setColumns((prev) => prev.map(
157
- (col) => String(col.key) === key ? { ...col, hidden: !col.hidden } : col
158
- ));
156
+ const toggleHide = (fieldKey) => {
157
+ setColumnOverrides((prev) => {
158
+ const current = prev[fieldKey] || {};
159
+ const col = resolvedColumns.find((c) => String(c.field) === fieldKey);
160
+ if (col?.hideable === false) return prev;
161
+ return {
162
+ ...prev,
163
+ [fieldKey]: { ...current, hidden: !current.hidden }
164
+ };
165
+ });
159
166
  setActiveMenu(null);
160
167
  };
161
168
  const filteredData = (0, import_react.useMemo)(() => {
@@ -197,30 +204,30 @@ function DataGrid({
197
204
  });
198
205
  }, [data, filterText, advancedFilters]);
199
206
  const sortedData = (0, import_react.useMemo)(() => {
200
- if (!sortKey || !sortDirection) return filteredData;
201
- const col = columns.find((c) => c.key === sortKey);
207
+ if (!sortField || !sortDirection) return filteredData;
208
+ const col = resolvedColumns.find((c) => c.field === sortField);
202
209
  return [...filteredData].sort((a, b) => {
203
- let aVal = a[sortKey];
204
- let bVal = b[sortKey];
210
+ let aVal = a[sortField];
211
+ let bVal = b[sortField];
205
212
  if (col?.valueGetter) {
206
- aVal = col.valueGetter({ value: aVal, row: a, field: String(sortKey) });
207
- bVal = col.valueGetter({ value: bVal, row: b, field: String(sortKey) });
213
+ aVal = col.valueGetter({ value: aVal, row: a, field: String(sortField) });
214
+ bVal = col.valueGetter({ value: bVal, row: b, field: String(sortField) });
208
215
  }
209
216
  if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
210
217
  if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
211
218
  return 0;
212
219
  });
213
- }, [filteredData, sortKey, sortDirection, columns]);
220
+ }, [filteredData, sortField, sortDirection, resolvedColumns]);
214
221
  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
215
222
  const paginatedData = (0, import_react.useMemo)(() => {
216
223
  const start = (currentPage - 1) * pageSize;
217
224
  return sortedData.slice(start, start + pageSize);
218
225
  }, [sortedData, currentPage, pageSize]);
219
226
  const handleExport = () => {
220
- const visibleCols = columns.filter((c) => !c.hidden);
221
- const headers = visibleCols.map((c) => c.header).join(",");
227
+ const visibleCols = resolvedColumns.filter((c) => !c.hidden);
228
+ const headers = visibleCols.map((c) => c.headerName).join(",");
222
229
  const rows = sortedData.map(
223
- (item) => visibleCols.map((c) => `"${String(item[c.key]).replace(/"/g, '""')}"`).join(",")
230
+ (item) => visibleCols.map((c) => `"${String(item[c.field]).replace(/"/g, '""')}"`).join(",")
224
231
  );
225
232
  const csv = [headers, ...rows].join("\n");
226
233
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
@@ -231,24 +238,34 @@ function DataGrid({
231
238
  link.click();
232
239
  document.body.removeChild(link);
233
240
  };
234
- const handleMenuOpen = (e, key) => {
241
+ const handleMenuOpen = (e, keyStr) => {
235
242
  e.stopPropagation();
236
243
  const rect = e.currentTarget.getBoundingClientRect();
237
- setMenuPosition({ top: rect.bottom + 4, left: rect.left });
238
- setActiveMenu(key);
244
+ let position = {
245
+ top: rect.bottom + 4,
246
+ left: rect.left
247
+ };
248
+ if (rect.left + 150 > window.innerWidth) {
249
+ position = {
250
+ top: rect.bottom + 4,
251
+ right: window.innerWidth - rect.right
252
+ };
253
+ }
254
+ setMenuPosition(position);
255
+ setActiveMenu(keyStr);
239
256
  };
240
257
  const visibleColumns = (0, import_react.useMemo)(() => {
241
- const left = columns.filter((c) => !c.hidden && c.pinned === "left");
242
- const mid = columns.filter((c) => !c.hidden && !c.pinned);
243
- const right = columns.filter((c) => !c.hidden && c.pinned === "right");
258
+ const left = resolvedColumns.filter((c) => !c.hidden && c.pinned === "left");
259
+ const mid = resolvedColumns.filter((c) => !c.hidden && !c.pinned);
260
+ const right = resolvedColumns.filter((c) => !c.hidden && c.pinned === "right");
244
261
  return [...left, ...mid, ...right];
245
- }, [columns]);
262
+ }, [resolvedColumns]);
246
263
  const getLeftOffset = (col, idx) => {
247
264
  if (col.pinned !== "left") return void 0;
248
265
  let offset = 0;
249
266
  for (let i = 0; i < idx; i++) {
250
267
  if (visibleColumns[i].pinned === "left") {
251
- offset += columnWidths[String(visibleColumns[i].key)] || 200;
268
+ offset += columnWidths[String(visibleColumns[i].field)] || 200;
252
269
  }
253
270
  }
254
271
  return offset;
@@ -282,14 +299,14 @@ function DataGrid({
282
299
  },
283
300
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Columns, { size: 16 })
284
301
  ), /* @__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) => {
285
- const colKey = String(col.key);
286
- const width = columnWidths[colKey] || 200;
302
+ const colField = String(col.field);
303
+ const width = columnWidths[colField] || 200;
287
304
  const leftOffset = getLeftOffset(col, idx);
288
- const isSorted = sortKey === col.key;
305
+ const isSorted = sortField === col.field;
289
306
  return /* @__PURE__ */ import_react.default.createElement(
290
307
  "th",
291
308
  {
292
- key: colKey,
309
+ key: colField,
293
310
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
294
311
  style: { width, minWidth: width, left: leftOffset, flex: col.flex }
295
312
  },
@@ -297,25 +314,25 @@ function DataGrid({
297
314
  "div",
298
315
  {
299
316
  className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
300
- onClick: () => col.sortable !== false && handleSort(col.key)
317
+ onClick: () => col.sortable !== false && handleSort(col.field || "")
301
318
  },
302
- col.header,
319
+ col.headerName,
303
320
  isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, { size: 12 }),
304
321
  isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronDown, { size: 12 })
305
322
  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ import_react.default.createElement(
306
323
  "button",
307
324
  {
308
325
  className: "dg-th-menu-btn",
309
- onClick: (e) => handleMenuOpen(e, colKey)
326
+ onClick: (e) => handleMenuOpen(e, colField)
310
327
  },
311
328
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.MoreVertical, { size: 13 })
312
329
  ), /* @__PURE__ */ import_react.default.createElement(
313
330
  "div",
314
331
  {
315
- className: `dg-resizer${resizingColumn === colKey ? " resizing" : ""}`,
332
+ className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
316
333
  onMouseDown: (e) => {
317
334
  e.preventDefault();
318
- setResizingColumn(colKey);
335
+ setResizingColumn(colField);
319
336
  setStartX(e.clientX);
320
337
  setStartWidth(width);
321
338
  }
@@ -323,19 +340,19 @@ function DataGrid({
323
340
  )))
324
341
  );
325
342
  }), 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) => {
326
- const colKey = String(col.key);
327
- const width = columnWidths[colKey] || 200;
343
+ const colField = String(col.field);
344
+ const width = columnWidths[colField] || 200;
328
345
  const leftOffset = getLeftOffset(col, idx);
329
346
  return /* @__PURE__ */ import_react.default.createElement(
330
347
  "td",
331
348
  {
332
- key: `${item.id}-${colKey}`,
349
+ key: `${item.id}-${colField}`,
333
350
  className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
334
351
  style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
335
352
  },
336
353
  (() => {
337
- const field = String(col.key);
338
- const rawValue = item[col.key];
354
+ const field = String(col.field);
355
+ const rawValue = item[col.field || ""];
339
356
  let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
340
357
  const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
341
358
  if (col.renderCell) {
@@ -382,8 +399,11 @@ function DataGrid({
382
399
  /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ArrowUp, { size: 14 }), " Sort ascending"),
383
400
  /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ArrowDown, { size: 14 }), " Sort descending"),
384
401
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
385
- /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"),
386
- /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"),
402
+ (() => {
403
+ const col = resolvedColumns.find((c) => c.field === activeMenu);
404
+ if (!col) return null;
405
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
406
+ })(),
387
407
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
388
408
  /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => {
389
409
  setShowAdvancedFilter(true);
@@ -403,7 +423,27 @@ function DataGrid({
403
423
  value: colSearch,
404
424
  onChange: (e) => setColSearch(e.target.value)
405
425
  }
406
- )), 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(
426
+ )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
427
+ const key = String(col.key);
428
+ const isUnhideable = col.hideable === false;
429
+ 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 } })));
430
+ })), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
431
+ const next = { ...prev };
432
+ resolvedColumns.forEach((c) => {
433
+ const k = String(c.key);
434
+ next[k] = { ...next[k], hidden: false };
435
+ });
436
+ return next;
437
+ }) }, "Show All"), /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-action-btn", onClick: () => {
438
+ const newOverrides = { ...columnOverrides };
439
+ resolvedColumns.forEach((c) => {
440
+ if (c.hideable !== false) {
441
+ const key = String(c.key);
442
+ newOverrides[key] = { ...newOverrides[key], hidden: true };
443
+ }
444
+ });
445
+ setColumnOverrides(newOverrides);
446
+ } }, "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(
407
447
  "button",
408
448
  {
409
449
  className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
@@ -424,7 +464,7 @@ function DataGrid({
424
464
  value: f.column,
425
465
  onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: e.target.value } : fi))
426
466
  },
427
- columns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
467
+ resolvedColumns.map((c) => /* @__PURE__ */ import_react.default.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
428
468
  ), /* @__PURE__ */ import_react.default.createElement(
429
469
  "select",
430
470
  {
@@ -438,20 +478,25 @@ function DataGrid({
438
478
  /* @__PURE__ */ import_react.default.createElement("option", { value: "ends with" }, "ends with"),
439
479
  /* @__PURE__ */ import_react.default.createElement("option", { value: "is empty" }, "is empty"),
440
480
  /* @__PURE__ */ import_react.default.createElement("option", { value: "is not empty" }, "is not empty")
441
- ), /* @__PURE__ */ import_react.default.createElement(
442
- "input",
443
- {
444
- className: "dg-filter-input",
445
- placeholder: "Value\u2026",
446
- value: f.value,
447
- onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
448
- }
449
- )))), /* @__PURE__ */ import_react.default.createElement(
481
+ ), (() => {
482
+ const col = resolvedColumns.find((c) => String(c.field) === f.column);
483
+ const isDate = col?.type === "date";
484
+ return /* @__PURE__ */ import_react.default.createElement(
485
+ "input",
486
+ {
487
+ type: isDate ? "date" : "text",
488
+ className: "dg-filter-input",
489
+ placeholder: "Value\u2026",
490
+ value: f.value,
491
+ onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
492
+ }
493
+ );
494
+ })()))), /* @__PURE__ */ import_react.default.createElement(
450
495
  "button",
451
496
  {
452
497
  className: "dg-action-btn",
453
498
  style: { alignSelf: "flex-start", marginTop: 4 },
454
- onClick: () => setAdvancedFilters((p) => [...p, { column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
499
+ onClick: () => setAdvancedFilters((p) => [...p, { column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
455
500
  },
456
501
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 14 }),
457
502
  " Add Filter"
@@ -459,7 +504,7 @@ function DataGrid({
459
504
  "button",
460
505
  {
461
506
  className: "dg-action-btn",
462
- onClick: () => setAdvancedFilters([{ column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
507
+ onClick: () => setAdvancedFilters([{ column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
463
508
  },
464
509
  /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Trash2, { size: 14 }),
465
510
  " Reset"
package/dist/DataGrid/DataGrid.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  DataGrid,
3
3
  DataGrid_default
4
- } from "../chunk-B6EOV25J.js";
4
+ } from "../chunk-7OMS6IWF.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid,