@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.
@@ -1,10 +1,10 @@
1
1
  import {
2
2
  AddressLookup_default
3
- } from "../chunk-EB6MPFGC.js";
4
- import "../chunk-UPCMMCPQ.js";
5
- import "../chunk-CTBYVXFP.js";
3
+ } from "../chunk-M5GFOGY5.js";
6
4
  import "../chunk-BOE27BFQ.js";
7
5
  import "../chunk-S7BNFVQO.js";
6
+ import "../chunk-UPCMMCPQ.js";
7
+ import "../chunk-CTBYVXFP.js";
8
8
  import "../chunk-LI4N7JWK.js";
9
9
  export {
10
10
  AddressLookup_default as default
@@ -26,22 +26,31 @@ function DataGrid({
26
26
  pageSizeOptions = [5, 10, 25, 50],
27
27
  title
28
28
  }) {
29
- const initialColumns = useMemo(() => initialColumnsProp.map((col) => ({
30
- ...col,
31
- key: col.key || col.field || "",
32
- header: col.header || col.headerName || ""
33
- })), [initialColumnsProp]);
34
- const [columns, setColumns] = useState(initialColumns);
29
+ const [columnOverrides, setColumnOverrides] = useState({});
30
+ const resolvedColumns = useMemo(() => {
31
+ return initialColumnsProp.map((col) => {
32
+ const field = String(col.field || col.key || "");
33
+ const override = columnOverrides[field] || {};
34
+ return {
35
+ ...col,
36
+ field,
37
+ headerName: col.headerName || col.header || "",
38
+ hidden: override.hidden !== void 0 ? override.hidden : col.hidden,
39
+ pinned: override.pinned !== void 0 ? override.pinned : col.pinned
40
+ };
41
+ });
42
+ }, [initialColumnsProp, columnOverrides]);
35
43
  const [columnWidths, setColumnWidths] = useState(() => {
36
44
  const widths = {};
37
- initialColumns.forEach((col) => {
45
+ initialColumnsProp.forEach((col) => {
46
+ const field = String(col.field || col.key || "");
38
47
  const w = col.width || 200;
39
- widths[String(col.key)] = typeof w === "number" ? w : parseInt(w);
48
+ widths[field] = typeof w === "number" ? w : parseInt(w);
40
49
  });
41
50
  return widths;
42
51
  });
43
52
  const [pageSize, setPageSize] = useState(initialPageSize);
44
- const [sortKey, setSortKey] = useState(null);
53
+ const [sortField, setSortField] = useState(null);
45
54
  const [sortDirection, setSortDirection] = useState(null);
46
55
  const [filterText, setFilterText] = useState("");
47
56
  const [currentPage, setCurrentPage] = useState(1);
@@ -54,40 +63,15 @@ function DataGrid({
54
63
  const menuRef = useRef(null);
55
64
  const [showManageColumns, setShowManageColumns] = useState(false);
56
65
  const [showAdvancedFilter, setShowAdvancedFilter] = useState(false);
66
+ const initialFilterCol = String(initialColumnsProp[0]?.field || initialColumnsProp[0]?.key || "");
57
67
  const [advancedFilters, setAdvancedFilters] = useState([
58
- { column: String(initialColumns[0]?.key || ""), operator: "contains", value: "", logic: "AND" }
68
+ { column: initialFilterCol, operator: "contains", value: "", logic: "AND" }
59
69
  ]);
60
- useEffect(() => {
61
- setColumns((prevColumns) => {
62
- return initialColumns.map((newCol) => {
63
- const prevCol = prevColumns.find((c) => (c.key || c.field) === (newCol.key || newCol.field));
64
- if (!prevCol) return newCol;
65
- return {
66
- ...newCol,
67
- hidden: prevCol.hidden !== void 0 ? prevCol.hidden : newCol.hidden,
68
- pinned: prevCol.pinned !== void 0 ? prevCol.pinned : newCol.pinned
69
- };
70
- });
71
- });
72
- }, [initialColumns]);
73
- useEffect(() => {
74
- setColumnWidths((prev) => {
75
- const next = { ...prev };
76
- initialColumns.forEach((col) => {
77
- const key = String(col.key);
78
- if (next[key] === void 0) {
79
- const w = col.width || 200;
80
- next[key] = typeof w === "number" ? w : parseInt(w);
81
- }
82
- });
83
- return next;
84
- });
85
- }, [initialColumns]);
86
70
  const [colSearch, setColSearch] = useState("");
87
71
  useEffect(() => {
88
72
  const handleMouseMove = (e) => {
89
73
  if (!resizingColumn) return;
90
- const col = columns.find((c) => String(c.key) === resizingColumn);
74
+ const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
91
75
  const diff = e.clientX - startX;
92
76
  const minW = col?.minWidth ? typeof col.minWidth === "number" ? col.minWidth : parseInt(col.minWidth) : 80;
93
77
  const maxW = col?.maxWidth ? typeof col.maxWidth === "number" ? col.maxWidth : parseInt(col.maxWidth) : Infinity;
@@ -103,7 +87,7 @@ function DataGrid({
103
87
  document.removeEventListener("mousemove", handleMouseMove);
104
88
  document.removeEventListener("mouseup", handleMouseUp);
105
89
  };
106
- }, [resizingColumn, startX, startWidth, columns]);
90
+ }, [resizingColumn, startX, startWidth, resolvedColumns]);
107
91
  useEffect(() => {
108
92
  const handleClickOutside = (e) => {
109
93
  if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -113,32 +97,55 @@ function DataGrid({
113
97
  document.addEventListener("mousedown", handleClickOutside);
114
98
  return () => document.removeEventListener("mousedown", handleClickOutside);
115
99
  }, []);
116
- const handleSort = (key, dir) => {
100
+ useEffect(() => {
101
+ setColumnWidths((prev) => {
102
+ const next = { ...prev };
103
+ initialColumnsProp.forEach((col) => {
104
+ const field = String(col.field || col.key || "");
105
+ if (next[field] === void 0) {
106
+ const w = col.width || 200;
107
+ next[field] = typeof w === "number" ? w : parseInt(w);
108
+ }
109
+ });
110
+ return next;
111
+ });
112
+ }, [initialColumnsProp]);
113
+ const handleSort = (fieldKey, dir) => {
117
114
  if (dir !== void 0) {
118
- setSortKey(key);
115
+ setSortField(fieldKey);
119
116
  setSortDirection(dir);
120
- } else if (sortKey === key) {
117
+ } else if (sortField === fieldKey) {
121
118
  if (sortDirection === "asc") setSortDirection("desc");
122
119
  else {
123
- setSortKey(null);
120
+ setSortField(null);
124
121
  setSortDirection(null);
125
122
  }
126
123
  } else {
127
- setSortKey(key);
124
+ setSortField(fieldKey);
128
125
  setSortDirection("asc");
129
126
  }
130
127
  setActiveMenu(null);
131
128
  };
132
- const togglePin = (key, side) => {
133
- setColumns((prev) => prev.map(
134
- (col) => String(col.key) === key ? { ...col, pinned: col.pinned === side ? void 0 : side } : col
135
- ));
129
+ const togglePin = (fieldKey, side) => {
130
+ setColumnOverrides((prev) => {
131
+ const current = prev[fieldKey] || {};
132
+ return {
133
+ ...prev,
134
+ [fieldKey]: { ...current, pinned: current.pinned === side ? void 0 : side }
135
+ };
136
+ });
136
137
  setActiveMenu(null);
137
138
  };
138
- const toggleHide = (key) => {
139
- setColumns((prev) => prev.map(
140
- (col) => String(col.key) === key ? { ...col, hidden: !col.hidden } : col
141
- ));
139
+ const toggleHide = (fieldKey) => {
140
+ setColumnOverrides((prev) => {
141
+ const current = prev[fieldKey] || {};
142
+ const col = resolvedColumns.find((c) => String(c.field) === fieldKey);
143
+ if (col?.hideable === false) return prev;
144
+ return {
145
+ ...prev,
146
+ [fieldKey]: { ...current, hidden: !current.hidden }
147
+ };
148
+ });
142
149
  setActiveMenu(null);
143
150
  };
144
151
  const filteredData = useMemo(() => {
@@ -180,30 +187,30 @@ function DataGrid({
180
187
  });
181
188
  }, [data, filterText, advancedFilters]);
182
189
  const sortedData = useMemo(() => {
183
- if (!sortKey || !sortDirection) return filteredData;
184
- const col = columns.find((c) => c.key === sortKey);
190
+ if (!sortField || !sortDirection) return filteredData;
191
+ const col = resolvedColumns.find((c) => c.field === sortField);
185
192
  return [...filteredData].sort((a, b) => {
186
- let aVal = a[sortKey];
187
- let bVal = b[sortKey];
193
+ let aVal = a[sortField];
194
+ let bVal = b[sortField];
188
195
  if (col?.valueGetter) {
189
- aVal = col.valueGetter({ value: aVal, row: a, field: String(sortKey) });
190
- bVal = col.valueGetter({ value: bVal, row: b, field: String(sortKey) });
196
+ aVal = col.valueGetter({ value: aVal, row: a, field: String(sortField) });
197
+ bVal = col.valueGetter({ value: bVal, row: b, field: String(sortField) });
191
198
  }
192
199
  if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
193
200
  if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
194
201
  return 0;
195
202
  });
196
- }, [filteredData, sortKey, sortDirection, columns]);
203
+ }, [filteredData, sortField, sortDirection, resolvedColumns]);
197
204
  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
198
205
  const paginatedData = useMemo(() => {
199
206
  const start = (currentPage - 1) * pageSize;
200
207
  return sortedData.slice(start, start + pageSize);
201
208
  }, [sortedData, currentPage, pageSize]);
202
209
  const handleExport = () => {
203
- const visibleCols = columns.filter((c) => !c.hidden);
204
- const headers = visibleCols.map((c) => c.header).join(",");
210
+ const visibleCols = resolvedColumns.filter((c) => !c.hidden);
211
+ const headers = visibleCols.map((c) => c.headerName).join(",");
205
212
  const rows = sortedData.map(
206
- (item) => visibleCols.map((c) => `"${String(item[c.key]).replace(/"/g, '""')}"`).join(",")
213
+ (item) => visibleCols.map((c) => `"${String(item[c.field]).replace(/"/g, '""')}"`).join(",")
207
214
  );
208
215
  const csv = [headers, ...rows].join("\n");
209
216
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
@@ -214,24 +221,34 @@ function DataGrid({
214
221
  link.click();
215
222
  document.body.removeChild(link);
216
223
  };
217
- const handleMenuOpen = (e, key) => {
224
+ const handleMenuOpen = (e, keyStr) => {
218
225
  e.stopPropagation();
219
226
  const rect = e.currentTarget.getBoundingClientRect();
220
- setMenuPosition({ top: rect.bottom + 4, left: rect.left });
221
- setActiveMenu(key);
227
+ let position = {
228
+ top: rect.bottom + 4,
229
+ left: rect.left
230
+ };
231
+ if (rect.left + 150 > window.innerWidth) {
232
+ position = {
233
+ top: rect.bottom + 4,
234
+ right: window.innerWidth - rect.right
235
+ };
236
+ }
237
+ setMenuPosition(position);
238
+ setActiveMenu(keyStr);
222
239
  };
223
240
  const visibleColumns = useMemo(() => {
224
- const left = columns.filter((c) => !c.hidden && c.pinned === "left");
225
- const mid = columns.filter((c) => !c.hidden && !c.pinned);
226
- const right = columns.filter((c) => !c.hidden && c.pinned === "right");
241
+ const left = resolvedColumns.filter((c) => !c.hidden && c.pinned === "left");
242
+ const mid = resolvedColumns.filter((c) => !c.hidden && !c.pinned);
243
+ const right = resolvedColumns.filter((c) => !c.hidden && c.pinned === "right");
227
244
  return [...left, ...mid, ...right];
228
- }, [columns]);
245
+ }, [resolvedColumns]);
229
246
  const getLeftOffset = (col, idx) => {
230
247
  if (col.pinned !== "left") return void 0;
231
248
  let offset = 0;
232
249
  for (let i = 0; i < idx; i++) {
233
250
  if (visibleColumns[i].pinned === "left") {
234
- offset += columnWidths[String(visibleColumns[i].key)] || 200;
251
+ offset += columnWidths[String(visibleColumns[i].field)] || 200;
235
252
  }
236
253
  }
237
254
  return offset;
@@ -265,14 +282,14 @@ function DataGrid({
265
282
  },
266
283
  /* @__PURE__ */ React.createElement(Columns, { size: 16 })
267
284
  ), /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ React.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, visibleColumns.map((col, idx) => {
268
- const colKey = String(col.key);
269
- const width = columnWidths[colKey] || 200;
285
+ const colField = String(col.field);
286
+ const width = columnWidths[colField] || 200;
270
287
  const leftOffset = getLeftOffset(col, idx);
271
- const isSorted = sortKey === col.key;
288
+ const isSorted = sortField === col.field;
272
289
  return /* @__PURE__ */ React.createElement(
273
290
  "th",
274
291
  {
275
- key: colKey,
292
+ key: colField,
276
293
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
277
294
  style: { width, minWidth: width, left: leftOffset, flex: col.flex }
278
295
  },
@@ -280,25 +297,25 @@ function DataGrid({
280
297
  "div",
281
298
  {
282
299
  className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
283
- onClick: () => col.sortable !== false && handleSort(col.key)
300
+ onClick: () => col.sortable !== false && handleSort(col.field || "")
284
301
  },
285
- col.header,
302
+ col.headerName,
286
303
  isSorted && sortDirection === "asc" && /* @__PURE__ */ React.createElement(ChevronUp, { size: 12 }),
287
304
  isSorted && sortDirection === "desc" && /* @__PURE__ */ React.createElement(ChevronDown, { size: 12 })
288
305
  ), /* @__PURE__ */ React.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ React.createElement(
289
306
  "button",
290
307
  {
291
308
  className: "dg-th-menu-btn",
292
- onClick: (e) => handleMenuOpen(e, colKey)
309
+ onClick: (e) => handleMenuOpen(e, colField)
293
310
  },
294
311
  /* @__PURE__ */ React.createElement(MoreVertical, { size: 13 })
295
312
  ), /* @__PURE__ */ React.createElement(
296
313
  "div",
297
314
  {
298
- className: `dg-resizer${resizingColumn === colKey ? " resizing" : ""}`,
315
+ className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
299
316
  onMouseDown: (e) => {
300
317
  e.preventDefault();
301
- setResizingColumn(colKey);
318
+ setResizingColumn(colField);
302
319
  setStartX(e.clientX);
303
320
  setStartWidth(width);
304
321
  }
@@ -306,19 +323,19 @@ function DataGrid({
306
323
  )))
307
324
  );
308
325
  }), actions && /* @__PURE__ */ React.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ React.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
309
- const colKey = String(col.key);
310
- const width = columnWidths[colKey] || 200;
326
+ const colField = String(col.field);
327
+ const width = columnWidths[colField] || 200;
311
328
  const leftOffset = getLeftOffset(col, idx);
312
329
  return /* @__PURE__ */ React.createElement(
313
330
  "td",
314
331
  {
315
- key: `${item.id}-${colKey}`,
332
+ key: `${item.id}-${colField}`,
316
333
  className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
317
334
  style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
318
335
  },
319
336
  (() => {
320
- const field = String(col.key);
321
- const rawValue = item[col.key];
337
+ const field = String(col.field);
338
+ const rawValue = item[col.field || ""];
322
339
  let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
323
340
  const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
324
341
  if (col.renderCell) {
@@ -365,8 +382,11 @@ function DataGrid({
365
382
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
366
383
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React.createElement(ArrowDown, { size: 14 }), " Sort descending"),
367
384
  /* @__PURE__ */ React.createElement("div", { className: "dg-menu-divider" }),
368
- /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"),
369
- /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"),
385
+ (() => {
386
+ const col = resolvedColumns.find((c) => c.field === activeMenu);
387
+ if (!col) return null;
388
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
389
+ })(),
370
390
  /* @__PURE__ */ React.createElement("div", { className: "dg-menu-divider" }),
371
391
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => {
372
392
  setShowAdvancedFilter(true);
@@ -386,7 +406,27 @@ function DataGrid({
386
406
  value: colSearch,
387
407
  onChange: (e) => setColSearch(e.target.value)
388
408
  }
389
- )), columns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase()) && c.hideable !== false).map((col) => /* @__PURE__ */ React.createElement("div", { key: String(col.key), className: "dg-col-row" }, /* @__PURE__ */ React.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), /* @__PURE__ */ React.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(String(col.key)) }, col.hidden ? /* @__PURE__ */ React.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } }))))), /* @__PURE__ */ React.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => ({ ...c, hidden: false }))) }, "Show All"), /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: () => setColumns((p) => p.map((c) => c.hideable !== false ? { ...c, hidden: true } : c)) }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React.createElement("h3", null, "Filters"), /* @__PURE__ */ React.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React.createElement(X, { size: 18 }))), /* @__PURE__ */ React.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React.createElement(
409
+ )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
410
+ const key = String(col.key);
411
+ const isUnhideable = col.hideable === false;
412
+ return /* @__PURE__ */ React.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } })));
413
+ })), /* @__PURE__ */ React.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
414
+ const next = { ...prev };
415
+ resolvedColumns.forEach((c) => {
416
+ const k = String(c.key);
417
+ next[k] = { ...next[k], hidden: false };
418
+ });
419
+ return next;
420
+ }) }, "Show All"), /* @__PURE__ */ React.createElement("button", { className: "dg-action-btn", onClick: () => {
421
+ const newOverrides = { ...columnOverrides };
422
+ resolvedColumns.forEach((c) => {
423
+ if (c.hideable !== false) {
424
+ const key = String(c.key);
425
+ newOverrides[key] = { ...newOverrides[key], hidden: true };
426
+ }
427
+ });
428
+ setColumnOverrides(newOverrides);
429
+ } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React.createElement("div", { className: "dg-modal dg-modal-wide", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React.createElement("h3", null, "Filters"), /* @__PURE__ */ React.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React.createElement(X, { size: 18 }))), /* @__PURE__ */ React.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React.createElement(
390
430
  "button",
391
431
  {
392
432
  className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
@@ -407,7 +447,7 @@ function DataGrid({
407
447
  value: f.column,
408
448
  onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: e.target.value } : fi))
409
449
  },
410
- columns.map((c) => /* @__PURE__ */ React.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
450
+ resolvedColumns.map((c) => /* @__PURE__ */ React.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
411
451
  ), /* @__PURE__ */ React.createElement(
412
452
  "select",
413
453
  {
@@ -421,20 +461,25 @@ function DataGrid({
421
461
  /* @__PURE__ */ React.createElement("option", { value: "ends with" }, "ends with"),
422
462
  /* @__PURE__ */ React.createElement("option", { value: "is empty" }, "is empty"),
423
463
  /* @__PURE__ */ React.createElement("option", { value: "is not empty" }, "is not empty")
424
- ), /* @__PURE__ */ React.createElement(
425
- "input",
426
- {
427
- className: "dg-filter-input",
428
- placeholder: "Value\u2026",
429
- value: f.value,
430
- onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
431
- }
432
- )))), /* @__PURE__ */ React.createElement(
464
+ ), (() => {
465
+ const col = resolvedColumns.find((c) => String(c.field) === f.column);
466
+ const isDate = col?.type === "date";
467
+ return /* @__PURE__ */ React.createElement(
468
+ "input",
469
+ {
470
+ type: isDate ? "date" : "text",
471
+ className: "dg-filter-input",
472
+ placeholder: "Value\u2026",
473
+ value: f.value,
474
+ onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
475
+ }
476
+ );
477
+ })()))), /* @__PURE__ */ React.createElement(
433
478
  "button",
434
479
  {
435
480
  className: "dg-action-btn",
436
481
  style: { alignSelf: "flex-start", marginTop: 4 },
437
- onClick: () => setAdvancedFilters((p) => [...p, { column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
482
+ onClick: () => setAdvancedFilters((p) => [...p, { column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
438
483
  },
439
484
  /* @__PURE__ */ React.createElement(Plus, { size: 14 }),
440
485
  " Add Filter"
@@ -442,7 +487,7 @@ function DataGrid({
442
487
  "button",
443
488
  {
444
489
  className: "dg-action-btn",
445
- onClick: () => setAdvancedFilters([{ column: String(columns[0].key), operator: "contains", value: "", logic: "AND" }])
490
+ onClick: () => setAdvancedFilters([{ column: String(resolvedColumns[0].key), operator: "contains", value: "", logic: "AND" }])
446
491
  },
447
492
  /* @__PURE__ */ React.createElement(Trash2, { size: 14 }),
448
493
  " Reset"
@@ -1,7 +1,4 @@
1
1
  import "../chunk-E5RTHYCU.js";
2
- import {
3
- unsubscribeIcon_default
4
- } from "../chunk-EZI3QGYJ.js";
5
2
  import {
6
3
  uploadIcon_default
7
4
  } from "../chunk-QTGVW36I.js";
@@ -14,9 +11,6 @@ import {
14
11
  import {
15
12
  workItemIcon_default
16
13
  } from "../chunk-QJPQC544.js";
17
- import {
18
- softSkillsIcon_default
19
- } from "../chunk-3Y6QBRGD.js";
20
14
  import {
21
15
  subscribeIcon_default
22
16
  } from "../chunk-JVN6QVET.js";
@@ -39,8 +33,8 @@ import {
39
33
  unArchivedIcon_default
40
34
  } from "../chunk-ZJAV3FEQ.js";
41
35
  import {
42
- questionTypeSingleIcon_default
43
- } from "../chunk-Q4DHI3B5.js";
36
+ unsubscribeIcon_default
37
+ } from "../chunk-EZI3QGYJ.js";
44
38
  import {
45
39
  refreshIcon_default
46
40
  } from "../chunk-YTVUM76D.js";
@@ -63,8 +57,8 @@ import {
63
57
  sidebarIcon_default
64
58
  } from "../chunk-DK3DA5LH.js";
65
59
  import {
66
- qualificationsIcon_default
67
- } from "../chunk-UTBCFDOX.js";
60
+ softSkillsIcon_default
61
+ } from "../chunk-3Y6QBRGD.js";
68
62
  import {
69
63
  questionStatusAllIcon_default
70
64
  } from "../chunk-4Y7SQ5EP.js";
@@ -87,8 +81,8 @@ import {
87
81
  questionTypeMultipleIcon_default
88
82
  } from "../chunk-Z7USRFM2.js";
89
83
  import {
90
- industryIcon_default
91
- } from "../chunk-4BTXGP7U.js";
84
+ questionTypeSingleIcon_default
85
+ } from "../chunk-Q4DHI3B5.js";
92
86
  import {
93
87
  invoiceIcon_default
94
88
  } from "../chunk-6SUKO6QW.js";
@@ -111,8 +105,8 @@ import {
111
105
  projectIcon_default
112
106
  } from "../chunk-DLJHWFNG.js";
113
107
  import {
114
- editChatIcon_default
115
- } from "../chunk-XCE3QE6Q.js";
108
+ qualificationsIcon_default
109
+ } from "../chunk-UTBCFDOX.js";
116
110
  import {
117
111
  editIcon_default
118
112
  } from "../chunk-H372BAXA.js";
@@ -132,8 +126,8 @@ import {
132
126
  inactiveGroupIcon_default
133
127
  } from "../chunk-77QDKDFI.js";
134
128
  import {
135
- copyIcon_default
136
- } from "../chunk-6FEUS4CQ.js";
129
+ industryIcon_default
130
+ } from "../chunk-4BTXGP7U.js";
137
131
  import {
138
132
  difficultyAllIcon_default
139
133
  } from "../chunk-5XKFPQLH.js";
@@ -155,6 +149,9 @@ import {
155
149
  import {
156
150
  downloadPdfIcon_default
157
151
  } from "../chunk-N26C33E6.js";
152
+ import {
153
+ editChatIcon_default
154
+ } from "../chunk-XCE3QE6Q.js";
158
155
  import {
159
156
  activateUserIcon_default
160
157
  } from "../chunk-AH6RCYDL.js";
@@ -167,6 +164,9 @@ import {
167
164
  import {
168
165
  closeIcon_default
169
166
  } from "../chunk-Q5XKCUE3.js";
167
+ import {
168
+ copyIcon_default
169
+ } from "../chunk-6FEUS4CQ.js";
170
170
  import "../chunk-LI4N7JWK.js";
171
171
  export {
172
172
  activateUserIcon_default as ActivateUserIcon,