@rufous/ui 0.1.69 → 0.1.71

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,7 +1,4 @@
1
1
  import "../chunk-QPGJCRBS.js";
2
- import {
3
- addButton_default
4
- } from "../chunk-U7SARO5B.js";
5
2
  import {
6
3
  cancelButton_default
7
4
  } from "../chunk-BMMDUQDJ.js";
@@ -12,6 +9,9 @@ import {
12
9
  submitButton_default
13
10
  } from "../chunk-YRLN3TBF.js";
14
11
  import "../chunk-CTBYVXFP.js";
12
+ import {
13
+ addButton_default
14
+ } from "../chunk-U7SARO5B.js";
15
15
  import "../chunk-LI4N7JWK.js";
16
16
  export {
17
17
  addButton_default as AddButton,
@@ -241,7 +241,17 @@ function DataGrid({
241
241
  const handleMenuOpen = (e, keyStr) => {
242
242
  e.stopPropagation();
243
243
  const rect = e.currentTarget.getBoundingClientRect();
244
- setMenuPosition({ top: rect.bottom + 4, left: rect.left });
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);
245
255
  setActiveMenu(keyStr);
246
256
  };
247
257
  const visibleColumns = (0, import_react.useMemo)(() => {
@@ -260,6 +270,16 @@ function DataGrid({
260
270
  }
261
271
  return offset;
262
272
  };
273
+ const getRightOffset = (col, idx) => {
274
+ if (col.pinned !== "right") return void 0;
275
+ let offset = 0;
276
+ for (let i = visibleColumns.length - 1; i > idx; i--) {
277
+ if (visibleColumns[i].pinned === "right") {
278
+ offset += columnWidths[String(visibleColumns[i].field)] || 200;
279
+ }
280
+ }
281
+ return offset;
282
+ };
263
283
  const hasActiveFilters = advancedFilters.some((f) => f.value);
264
284
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react.default.createElement("h2", null, title), /* @__PURE__ */ import_react.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Search, { size: 15 }), /* @__PURE__ */ import_react.default.createElement(
265
285
  "input",
@@ -292,13 +312,14 @@ function DataGrid({
292
312
  const colField = String(col.field);
293
313
  const width = columnWidths[colField] || 200;
294
314
  const leftOffset = getLeftOffset(col, idx);
315
+ const rightOffset = getRightOffset(col, idx);
295
316
  const isSorted = sortField === col.field;
296
317
  return /* @__PURE__ */ import_react.default.createElement(
297
318
  "th",
298
319
  {
299
320
  key: colField,
300
321
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
301
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
322
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
302
323
  },
303
324
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ import_react.default.createElement(
304
325
  "div",
@@ -333,12 +354,13 @@ function DataGrid({
333
354
  const colField = String(col.field);
334
355
  const width = columnWidths[colField] || 200;
335
356
  const leftOffset = getLeftOffset(col, idx);
357
+ const rightOffset = getRightOffset(col, idx);
336
358
  return /* @__PURE__ */ import_react.default.createElement(
337
359
  "td",
338
360
  {
339
361
  key: `${item.id}-${colField}`,
340
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
341
- style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
362
+ className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.cellClassName || ""}`,
363
+ style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
342
364
  },
343
365
  (() => {
344
366
  const field = String(col.field);
@@ -384,13 +406,20 @@ function DataGrid({
384
406
  {
385
407
  ref: menuRef,
386
408
  className: "dg-menu",
387
- style: { top: menuPosition.top, left: menuPosition.left }
409
+ style: {
410
+ top: menuPosition.top,
411
+ ...menuPosition.left !== void 0 ? { left: menuPosition.left } : {},
412
+ ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
413
+ }
388
414
  },
389
415
  /* @__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"),
390
416
  /* @__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"),
391
417
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
392
- /* @__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"),
393
- /* @__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"),
418
+ (() => {
419
+ const col = resolvedColumns.find((c) => c.field === activeMenu);
420
+ if (!col) return null;
421
+ 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"));
422
+ })(),
394
423
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
395
424
  /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => {
396
425
  setShowAdvancedFilter(true);
@@ -465,15 +494,20 @@ function DataGrid({
465
494
  /* @__PURE__ */ import_react.default.createElement("option", { value: "ends with" }, "ends with"),
466
495
  /* @__PURE__ */ import_react.default.createElement("option", { value: "is empty" }, "is empty"),
467
496
  /* @__PURE__ */ import_react.default.createElement("option", { value: "is not empty" }, "is not empty")
468
- ), /* @__PURE__ */ import_react.default.createElement(
469
- "input",
470
- {
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
- )))), /* @__PURE__ */ import_react.default.createElement(
497
+ ), (() => {
498
+ const col = resolvedColumns.find((c) => String(c.field) === f.column);
499
+ const isDate = col?.type === "date";
500
+ return /* @__PURE__ */ import_react.default.createElement(
501
+ "input",
502
+ {
503
+ type: isDate ? "date" : "text",
504
+ className: "dg-filter-input",
505
+ placeholder: "Value\u2026",
506
+ value: f.value,
507
+ onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
508
+ }
509
+ );
510
+ })()))), /* @__PURE__ */ import_react.default.createElement(
477
511
  "button",
478
512
  {
479
513
  className: "dg-action-btn",
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  DataGrid,
3
3
  DataGrid_default
4
- } from "../chunk-LG4EJGMI.js";
4
+ } from "../chunk-AAZU2PSA.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid,
@@ -242,7 +242,17 @@ function DataGrid({
242
242
  const handleMenuOpen = (e, keyStr) => {
243
243
  e.stopPropagation();
244
244
  const rect = e.currentTarget.getBoundingClientRect();
245
- setMenuPosition({ top: rect.bottom + 4, left: rect.left });
245
+ let position = {
246
+ top: rect.bottom + 4,
247
+ left: rect.left
248
+ };
249
+ if (rect.left + 150 > window.innerWidth) {
250
+ position = {
251
+ top: rect.bottom + 4,
252
+ right: window.innerWidth - rect.right
253
+ };
254
+ }
255
+ setMenuPosition(position);
246
256
  setActiveMenu(keyStr);
247
257
  };
248
258
  const visibleColumns = (0, import_react.useMemo)(() => {
@@ -261,6 +271,16 @@ function DataGrid({
261
271
  }
262
272
  return offset;
263
273
  };
274
+ const getRightOffset = (col, idx) => {
275
+ if (col.pinned !== "right") return void 0;
276
+ let offset = 0;
277
+ for (let i = visibleColumns.length - 1; i > idx; i--) {
278
+ if (visibleColumns[i].pinned === "right") {
279
+ offset += columnWidths[String(visibleColumns[i].field)] || 200;
280
+ }
281
+ }
282
+ return offset;
283
+ };
264
284
  const hasActiveFilters = advancedFilters.some((f) => f.value);
265
285
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react.default.createElement("h2", null, title), /* @__PURE__ */ import_react.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Search, { size: 15 }), /* @__PURE__ */ import_react.default.createElement(
266
286
  "input",
@@ -293,13 +313,14 @@ function DataGrid({
293
313
  const colField = String(col.field);
294
314
  const width = columnWidths[colField] || 200;
295
315
  const leftOffset = getLeftOffset(col, idx);
316
+ const rightOffset = getRightOffset(col, idx);
296
317
  const isSorted = sortField === col.field;
297
318
  return /* @__PURE__ */ import_react.default.createElement(
298
319
  "th",
299
320
  {
300
321
  key: colField,
301
322
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
302
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
323
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
303
324
  },
304
325
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ import_react.default.createElement(
305
326
  "div",
@@ -334,12 +355,13 @@ function DataGrid({
334
355
  const colField = String(col.field);
335
356
  const width = columnWidths[colField] || 200;
336
357
  const leftOffset = getLeftOffset(col, idx);
358
+ const rightOffset = getRightOffset(col, idx);
337
359
  return /* @__PURE__ */ import_react.default.createElement(
338
360
  "td",
339
361
  {
340
362
  key: `${item.id}-${colField}`,
341
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
342
- style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
363
+ className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.cellClassName || ""}`,
364
+ style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
343
365
  },
344
366
  (() => {
345
367
  const field = String(col.field);
@@ -385,13 +407,20 @@ function DataGrid({
385
407
  {
386
408
  ref: menuRef,
387
409
  className: "dg-menu",
388
- style: { top: menuPosition.top, left: menuPosition.left }
410
+ style: {
411
+ top: menuPosition.top,
412
+ ...menuPosition.left !== void 0 ? { left: menuPosition.left } : {},
413
+ ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
414
+ }
389
415
  },
390
416
  /* @__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"),
391
417
  /* @__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"),
392
418
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
393
- /* @__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"),
394
- /* @__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"),
419
+ (() => {
420
+ const col = resolvedColumns.find((c) => c.field === activeMenu);
421
+ if (!col) return null;
422
+ 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"));
423
+ })(),
395
424
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-menu-divider" }),
396
425
  /* @__PURE__ */ import_react.default.createElement("button", { className: "dg-menu-item", onClick: () => {
397
426
  setShowAdvancedFilter(true);
@@ -466,15 +495,20 @@ function DataGrid({
466
495
  /* @__PURE__ */ import_react.default.createElement("option", { value: "ends with" }, "ends with"),
467
496
  /* @__PURE__ */ import_react.default.createElement("option", { value: "is empty" }, "is empty"),
468
497
  /* @__PURE__ */ import_react.default.createElement("option", { value: "is not empty" }, "is not empty")
469
- ), /* @__PURE__ */ import_react.default.createElement(
470
- "input",
471
- {
472
- className: "dg-filter-input",
473
- placeholder: "Value\u2026",
474
- value: f.value,
475
- onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
476
- }
477
- )))), /* @__PURE__ */ import_react.default.createElement(
498
+ ), (() => {
499
+ const col = resolvedColumns.find((c) => String(c.field) === f.column);
500
+ const isDate = col?.type === "date";
501
+ return /* @__PURE__ */ import_react.default.createElement(
502
+ "input",
503
+ {
504
+ type: isDate ? "date" : "text",
505
+ className: "dg-filter-input",
506
+ placeholder: "Value\u2026",
507
+ value: f.value,
508
+ onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
509
+ }
510
+ );
511
+ })()))), /* @__PURE__ */ import_react.default.createElement(
478
512
  "button",
479
513
  {
480
514
  className: "dg-action-btn",
@@ -1,7 +1,7 @@
1
1
  import "../chunk-7KRG7VNW.js";
2
2
  import {
3
3
  DataGrid
4
- } from "../chunk-LG4EJGMI.js";
4
+ } from "../chunk-AAZU2PSA.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid
@@ -443,7 +443,6 @@
443
443
  padding: 0;
444
444
  font-size: 0.72rem;
445
445
  font-weight: 700;
446
- text-transform: uppercase;
447
446
  letter-spacing: 0.06em;
448
447
  color: var(--text-secondary);
449
448
  position: relative;
@@ -551,6 +550,16 @@
551
550
  .dg-tbody-row:hover .dg-td.pinned-left {
552
551
  background: var(--hover-color);
553
552
  }
553
+ .dg-td.pinned-right {
554
+ position: sticky;
555
+ right: 0;
556
+ z-index: 10;
557
+ background: var(--surface-color);
558
+ box-shadow: inset 1px 0 0 var(--border-color);
559
+ }
560
+ .dg-tbody-row:hover .dg-td.pinned-right {
561
+ background: var(--hover-color);
562
+ }
554
563
  .dg-row-actions-cell {
555
564
  position: sticky;
556
565
  right: 0;
@@ -2,12 +2,10 @@ import {
2
2
  BaseDialog_default
3
3
  } from "../chunk-4GPYGFPP.js";
4
4
  import "../chunk-E5RTHYCU.js";
5
- import "../chunk-EZI3QGYJ.js";
6
5
  import "../chunk-QTGVW36I.js";
7
6
  import "../chunk-G2GZDPUL.js";
8
7
  import "../chunk-CTWVJQJ5.js";
9
8
  import "../chunk-QJPQC544.js";
10
- import "../chunk-3Y6QBRGD.js";
11
9
  import "../chunk-JVN6QVET.js";
12
10
  import "../chunk-R4ISYGEP.js";
13
11
  import "../chunk-5JWTJ5PY.js";
@@ -15,7 +13,7 @@ import "../chunk-763IHEJ2.js";
15
13
  import "../chunk-XHY3OCAQ.js";
16
14
  import "../chunk-6KIFTMUN.js";
17
15
  import "../chunk-ZJAV3FEQ.js";
18
- import "../chunk-Q4DHI3B5.js";
16
+ import "../chunk-EZI3QGYJ.js";
19
17
  import "../chunk-YTVUM76D.js";
20
18
  import "../chunk-WG3Q6GZN.js";
21
19
  import "../chunk-RJ43D3XB.js";
@@ -23,7 +21,7 @@ import "../chunk-QDMNCTXT.js";
23
21
  import "../chunk-DMP72IAP.js";
24
22
  import "../chunk-QZFGQ5JM.js";
25
23
  import "../chunk-DK3DA5LH.js";
26
- import "../chunk-UTBCFDOX.js";
24
+ import "../chunk-3Y6QBRGD.js";
27
25
  import "../chunk-4Y7SQ5EP.js";
28
26
  import "../chunk-B2LVMM55.js";
29
27
  import "../chunk-2AJACSJ3.js";
@@ -31,7 +29,7 @@ import "../chunk-WHGVO3HV.js";
31
29
  import "../chunk-7II4Q2WY.js";
32
30
  import "../chunk-5GK5B3FD.js";
33
31
  import "../chunk-Z7USRFM2.js";
34
- import "../chunk-4BTXGP7U.js";
32
+ import "../chunk-Q4DHI3B5.js";
35
33
  import "../chunk-6SUKO6QW.js";
36
34
  import "../chunk-UTYIBUY2.js";
37
35
  import "../chunk-N4EJKMJK.js";
@@ -39,14 +37,14 @@ import "../chunk-FPRXN3DS.js";
39
37
  import "../chunk-GESVGIAP.js";
40
38
  import "../chunk-QIEQRNBE.js";
41
39
  import "../chunk-DLJHWFNG.js";
42
- import "../chunk-XCE3QE6Q.js";
40
+ import "../chunk-UTBCFDOX.js";
43
41
  import "../chunk-H372BAXA.js";
44
42
  import "../chunk-ZLJDOLXZ.js";
45
43
  import "../chunk-OJV6F5JC.js";
46
44
  import "../chunk-AXSFVJ3H.js";
47
45
  import "../chunk-WZAU77G7.js";
48
46
  import "../chunk-77QDKDFI.js";
49
- import "../chunk-6FEUS4CQ.js";
47
+ import "../chunk-4BTXGP7U.js";
50
48
  import "../chunk-5XKFPQLH.js";
51
49
  import "../chunk-JI5XMLWT.js";
52
50
  import "../chunk-WXANSSXF.js";
@@ -54,25 +52,27 @@ import "../chunk-XPJVVKOU.js";
54
52
  import "../chunk-GL43GPEM.js";
55
53
  import "../chunk-FZCFFVXW.js";
56
54
  import "../chunk-N26C33E6.js";
55
+ import "../chunk-XCE3QE6Q.js";
57
56
  import "../chunk-AH6RCYDL.js";
58
57
  import "../chunk-3IBCGGN3.js";
59
58
  import "../chunk-MNPAE2ZF.js";
60
59
  import "../chunk-Q5XKCUE3.js";
61
- import "../chunk-GHCM2AWR.js";
62
- import "../chunk-UPCMMCPQ.js";
63
- import "../chunk-X357WQOT.js";
60
+ import "../chunk-6FEUS4CQ.js";
61
+ import "../chunk-M5GFOGY5.js";
64
62
  import "../chunk-BOE27BFQ.js";
63
+ import "../chunk-UPCMMCPQ.js";
65
64
  import "../chunk-S7BNFVQO.js";
66
- import "../chunk-7KRG7VNW.js";
67
- import "../chunk-LG4EJGMI.js";
68
- import "../chunk-GJGRMMAQ.js";
69
- import "../chunk-66HHM7VI.js";
70
65
  import "../chunk-QPGJCRBS.js";
71
- import "../chunk-U7SARO5B.js";
72
66
  import "../chunk-BMMDUQDJ.js";
73
67
  import "../chunk-R3GARAVJ.js";
74
68
  import "../chunk-YRLN3TBF.js";
75
69
  import "../chunk-CTBYVXFP.js";
70
+ import "../chunk-GJGRMMAQ.js";
71
+ import "../chunk-66HHM7VI.js";
72
+ import "../chunk-7KRG7VNW.js";
73
+ import "../chunk-AAZU2PSA.js";
74
+ import "../chunk-X357WQOT.js";
75
+ import "../chunk-U7SARO5B.js";
76
76
  import "../chunk-LI4N7JWK.js";
77
77
  export {
78
78
  BaseDialog_default as default
@@ -443,7 +443,6 @@
443
443
  padding: 0;
444
444
  font-size: 0.72rem;
445
445
  font-weight: 700;
446
- text-transform: uppercase;
447
446
  letter-spacing: 0.06em;
448
447
  color: var(--text-secondary);
449
448
  position: relative;
@@ -551,6 +550,16 @@
551
550
  .dg-tbody-row:hover .dg-td.pinned-left {
552
551
  background: var(--hover-color);
553
552
  }
553
+ .dg-td.pinned-right {
554
+ position: sticky;
555
+ right: 0;
556
+ z-index: 10;
557
+ background: var(--surface-color);
558
+ box-shadow: inset 1px 0 0 var(--border-color);
559
+ }
560
+ .dg-tbody-row:hover .dg-td.pinned-right {
561
+ background: var(--hover-color);
562
+ }
554
563
  .dg-row-actions-cell {
555
564
  position: sticky;
556
565
  right: 0;
@@ -2,12 +2,10 @@ import {
2
2
  BaseDialog_default
3
3
  } from "../chunk-4GPYGFPP.js";
4
4
  import "../chunk-E5RTHYCU.js";
5
- import "../chunk-EZI3QGYJ.js";
6
5
  import "../chunk-QTGVW36I.js";
7
6
  import "../chunk-G2GZDPUL.js";
8
7
  import "../chunk-CTWVJQJ5.js";
9
8
  import "../chunk-QJPQC544.js";
10
- import "../chunk-3Y6QBRGD.js";
11
9
  import "../chunk-JVN6QVET.js";
12
10
  import "../chunk-R4ISYGEP.js";
13
11
  import "../chunk-5JWTJ5PY.js";
@@ -15,7 +13,7 @@ import "../chunk-763IHEJ2.js";
15
13
  import "../chunk-XHY3OCAQ.js";
16
14
  import "../chunk-6KIFTMUN.js";
17
15
  import "../chunk-ZJAV3FEQ.js";
18
- import "../chunk-Q4DHI3B5.js";
16
+ import "../chunk-EZI3QGYJ.js";
19
17
  import "../chunk-YTVUM76D.js";
20
18
  import "../chunk-WG3Q6GZN.js";
21
19
  import "../chunk-RJ43D3XB.js";
@@ -23,7 +21,7 @@ import "../chunk-QDMNCTXT.js";
23
21
  import "../chunk-DMP72IAP.js";
24
22
  import "../chunk-QZFGQ5JM.js";
25
23
  import "../chunk-DK3DA5LH.js";
26
- import "../chunk-UTBCFDOX.js";
24
+ import "../chunk-3Y6QBRGD.js";
27
25
  import "../chunk-4Y7SQ5EP.js";
28
26
  import "../chunk-B2LVMM55.js";
29
27
  import "../chunk-2AJACSJ3.js";
@@ -31,7 +29,7 @@ import "../chunk-WHGVO3HV.js";
31
29
  import "../chunk-7II4Q2WY.js";
32
30
  import "../chunk-5GK5B3FD.js";
33
31
  import "../chunk-Z7USRFM2.js";
34
- import "../chunk-4BTXGP7U.js";
32
+ import "../chunk-Q4DHI3B5.js";
35
33
  import "../chunk-6SUKO6QW.js";
36
34
  import "../chunk-UTYIBUY2.js";
37
35
  import "../chunk-N4EJKMJK.js";
@@ -39,14 +37,14 @@ import "../chunk-FPRXN3DS.js";
39
37
  import "../chunk-GESVGIAP.js";
40
38
  import "../chunk-QIEQRNBE.js";
41
39
  import "../chunk-DLJHWFNG.js";
42
- import "../chunk-XCE3QE6Q.js";
40
+ import "../chunk-UTBCFDOX.js";
43
41
  import "../chunk-H372BAXA.js";
44
42
  import "../chunk-ZLJDOLXZ.js";
45
43
  import "../chunk-OJV6F5JC.js";
46
44
  import "../chunk-AXSFVJ3H.js";
47
45
  import "../chunk-WZAU77G7.js";
48
46
  import "../chunk-77QDKDFI.js";
49
- import "../chunk-6FEUS4CQ.js";
47
+ import "../chunk-4BTXGP7U.js";
50
48
  import "../chunk-5XKFPQLH.js";
51
49
  import "../chunk-JI5XMLWT.js";
52
50
  import "../chunk-WXANSSXF.js";
@@ -54,25 +52,27 @@ import "../chunk-XPJVVKOU.js";
54
52
  import "../chunk-GL43GPEM.js";
55
53
  import "../chunk-FZCFFVXW.js";
56
54
  import "../chunk-N26C33E6.js";
55
+ import "../chunk-XCE3QE6Q.js";
57
56
  import "../chunk-AH6RCYDL.js";
58
57
  import "../chunk-3IBCGGN3.js";
59
58
  import "../chunk-MNPAE2ZF.js";
60
59
  import "../chunk-Q5XKCUE3.js";
61
- import "../chunk-GHCM2AWR.js";
62
- import "../chunk-UPCMMCPQ.js";
63
- import "../chunk-X357WQOT.js";
60
+ import "../chunk-6FEUS4CQ.js";
61
+ import "../chunk-M5GFOGY5.js";
64
62
  import "../chunk-BOE27BFQ.js";
63
+ import "../chunk-UPCMMCPQ.js";
65
64
  import "../chunk-S7BNFVQO.js";
66
- import "../chunk-7KRG7VNW.js";
67
- import "../chunk-LG4EJGMI.js";
68
- import "../chunk-GJGRMMAQ.js";
69
- import "../chunk-66HHM7VI.js";
70
65
  import "../chunk-QPGJCRBS.js";
71
- import "../chunk-U7SARO5B.js";
72
66
  import "../chunk-BMMDUQDJ.js";
73
67
  import "../chunk-R3GARAVJ.js";
74
68
  import "../chunk-YRLN3TBF.js";
75
69
  import "../chunk-CTBYVXFP.js";
70
+ import "../chunk-GJGRMMAQ.js";
71
+ import "../chunk-66HHM7VI.js";
72
+ import "../chunk-7KRG7VNW.js";
73
+ import "../chunk-AAZU2PSA.js";
74
+ import "../chunk-X357WQOT.js";
75
+ import "../chunk-U7SARO5B.js";
76
76
  import "../chunk-LI4N7JWK.js";
77
77
  export {
78
78
  BaseDialog_default as BaseDialog
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  AddressLookup_default
3
- } from "../chunk-GHCM2AWR.js";
4
- import "../chunk-UPCMMCPQ.js";
3
+ } from "../chunk-M5GFOGY5.js";
5
4
  import "../chunk-BOE27BFQ.js";
5
+ import "../chunk-UPCMMCPQ.js";
6
6
  import "../chunk-S7BNFVQO.js";
7
7
  import "../chunk-CTBYVXFP.js";
8
8
  import "../chunk-LI4N7JWK.js";
@@ -224,7 +224,17 @@ function DataGrid({
224
224
  const handleMenuOpen = (e, keyStr) => {
225
225
  e.stopPropagation();
226
226
  const rect = e.currentTarget.getBoundingClientRect();
227
- setMenuPosition({ top: rect.bottom + 4, left: rect.left });
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);
228
238
  setActiveMenu(keyStr);
229
239
  };
230
240
  const visibleColumns = useMemo(() => {
@@ -243,6 +253,16 @@ function DataGrid({
243
253
  }
244
254
  return offset;
245
255
  };
256
+ const getRightOffset = (col, idx) => {
257
+ if (col.pinned !== "right") return void 0;
258
+ let offset = 0;
259
+ for (let i = visibleColumns.length - 1; i > idx; i--) {
260
+ if (visibleColumns[i].pinned === "right") {
261
+ offset += columnWidths[String(visibleColumns[i].field)] || 200;
262
+ }
263
+ }
264
+ return offset;
265
+ };
246
266
  const hasActiveFilters = advancedFilters.some((f) => f.value);
247
267
  return /* @__PURE__ */ React.createElement("div", { className: "dg-root" }, /* @__PURE__ */ React.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React.createElement("h2", null, title), /* @__PURE__ */ React.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React.createElement(Search, { size: 15 }), /* @__PURE__ */ React.createElement(
248
268
  "input",
@@ -275,13 +295,14 @@ function DataGrid({
275
295
  const colField = String(col.field);
276
296
  const width = columnWidths[colField] || 200;
277
297
  const leftOffset = getLeftOffset(col, idx);
298
+ const rightOffset = getRightOffset(col, idx);
278
299
  const isSorted = sortField === col.field;
279
300
  return /* @__PURE__ */ React.createElement(
280
301
  "th",
281
302
  {
282
303
  key: colField,
283
304
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
284
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
305
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
285
306
  },
286
307
  /* @__PURE__ */ React.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ React.createElement(
287
308
  "div",
@@ -316,12 +337,13 @@ function DataGrid({
316
337
  const colField = String(col.field);
317
338
  const width = columnWidths[colField] || 200;
318
339
  const leftOffset = getLeftOffset(col, idx);
340
+ const rightOffset = getRightOffset(col, idx);
319
341
  return /* @__PURE__ */ React.createElement(
320
342
  "td",
321
343
  {
322
344
  key: `${item.id}-${colField}`,
323
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
324
- style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
345
+ className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.cellClassName || ""}`,
346
+ style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
325
347
  },
326
348
  (() => {
327
349
  const field = String(col.field);
@@ -367,13 +389,20 @@ function DataGrid({
367
389
  {
368
390
  ref: menuRef,
369
391
  className: "dg-menu",
370
- style: { top: menuPosition.top, left: menuPosition.left }
392
+ style: {
393
+ top: menuPosition.top,
394
+ ...menuPosition.left !== void 0 ? { left: menuPosition.left } : {},
395
+ ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
396
+ }
371
397
  },
372
398
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
373
399
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React.createElement(ArrowDown, { size: 14 }), " Sort descending"),
374
400
  /* @__PURE__ */ React.createElement("div", { className: "dg-menu-divider" }),
375
- /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"),
376
- /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"),
401
+ (() => {
402
+ const col = resolvedColumns.find((c) => c.field === activeMenu);
403
+ if (!col) return null;
404
+ 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"));
405
+ })(),
377
406
  /* @__PURE__ */ React.createElement("div", { className: "dg-menu-divider" }),
378
407
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => {
379
408
  setShowAdvancedFilter(true);
@@ -448,15 +477,20 @@ function DataGrid({
448
477
  /* @__PURE__ */ React.createElement("option", { value: "ends with" }, "ends with"),
449
478
  /* @__PURE__ */ React.createElement("option", { value: "is empty" }, "is empty"),
450
479
  /* @__PURE__ */ React.createElement("option", { value: "is not empty" }, "is not empty")
451
- ), /* @__PURE__ */ React.createElement(
452
- "input",
453
- {
454
- className: "dg-filter-input",
455
- placeholder: "Value\u2026",
456
- value: f.value,
457
- onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
458
- }
459
- )))), /* @__PURE__ */ React.createElement(
480
+ ), (() => {
481
+ const col = resolvedColumns.find((c) => String(c.field) === f.column);
482
+ const isDate = col?.type === "date";
483
+ return /* @__PURE__ */ React.createElement(
484
+ "input",
485
+ {
486
+ type: isDate ? "date" : "text",
487
+ className: "dg-filter-input",
488
+ placeholder: "Value\u2026",
489
+ value: f.value,
490
+ onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
491
+ }
492
+ );
493
+ })()))), /* @__PURE__ */ React.createElement(
460
494
  "button",
461
495
  {
462
496
  className: "dg-action-btn",
@@ -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,
package/dist/main.cjs CHANGED
@@ -30582,7 +30582,17 @@ function DataGrid({
30582
30582
  const handleMenuOpen = (e, keyStr) => {
30583
30583
  e.stopPropagation();
30584
30584
  const rect = e.currentTarget.getBoundingClientRect();
30585
- setMenuPosition({ top: rect.bottom + 4, left: rect.left });
30585
+ let position2 = {
30586
+ top: rect.bottom + 4,
30587
+ left: rect.left
30588
+ };
30589
+ if (rect.left + 150 > window.innerWidth) {
30590
+ position2 = {
30591
+ top: rect.bottom + 4,
30592
+ right: window.innerWidth - rect.right
30593
+ };
30594
+ }
30595
+ setMenuPosition(position2);
30586
30596
  setActiveMenu(keyStr);
30587
30597
  };
30588
30598
  const visibleColumns = (0, import_react18.useMemo)(() => {
@@ -30601,6 +30611,16 @@ function DataGrid({
30601
30611
  }
30602
30612
  return offset2;
30603
30613
  };
30614
+ const getRightOffset = (col, idx) => {
30615
+ if (col.pinned !== "right") return void 0;
30616
+ let offset2 = 0;
30617
+ for (let i = visibleColumns.length - 1; i > idx; i--) {
30618
+ if (visibleColumns[i].pinned === "right") {
30619
+ offset2 += columnWidths[String(visibleColumns[i].field)] || 200;
30620
+ }
30621
+ }
30622
+ return offset2;
30623
+ };
30604
30624
  const hasActiveFilters = advancedFilters.some((f) => f.value);
30605
30625
  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-root" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react18.default.createElement("h2", null, title), /* @__PURE__ */ import_react18.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react18.default.createElement(import_lucide_react.Search, { size: 15 }), /* @__PURE__ */ import_react18.default.createElement(
30606
30626
  "input",
@@ -30633,13 +30653,14 @@ function DataGrid({
30633
30653
  const colField = String(col.field);
30634
30654
  const width = columnWidths[colField] || 200;
30635
30655
  const leftOffset = getLeftOffset(col, idx);
30656
+ const rightOffset = getRightOffset(col, idx);
30636
30657
  const isSorted = sortField === col.field;
30637
30658
  return /* @__PURE__ */ import_react18.default.createElement(
30638
30659
  "th",
30639
30660
  {
30640
30661
  key: colField,
30641
30662
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
30642
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
30663
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
30643
30664
  },
30644
30665
  /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ import_react18.default.createElement(
30645
30666
  "div",
@@ -30674,12 +30695,13 @@ function DataGrid({
30674
30695
  const colField = String(col.field);
30675
30696
  const width = columnWidths[colField] || 200;
30676
30697
  const leftOffset = getLeftOffset(col, idx);
30698
+ const rightOffset = getRightOffset(col, idx);
30677
30699
  return /* @__PURE__ */ import_react18.default.createElement(
30678
30700
  "td",
30679
30701
  {
30680
30702
  key: `${item.id}-${colField}`,
30681
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
30682
- style: { width, minWidth: width, maxWidth: width, left: leftOffset, flex: col.flex }
30703
+ className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.cellClassName || ""}`,
30704
+ style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
30683
30705
  },
30684
30706
  (() => {
30685
30707
  const field = String(col.field);
@@ -30725,13 +30747,20 @@ function DataGrid({
30725
30747
  {
30726
30748
  ref: menuRef,
30727
30749
  className: "dg-menu",
30728
- style: { top: menuPosition.top, left: menuPosition.left }
30750
+ style: {
30751
+ top: menuPosition.top,
30752
+ ...menuPosition.left !== void 0 ? { left: menuPosition.left } : {},
30753
+ ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
30754
+ }
30729
30755
  },
30730
30756
  /* @__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"),
30731
30757
  /* @__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"),
30732
30758
  /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-menu-divider" }),
30733
- /* @__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"),
30734
- /* @__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"),
30759
+ (() => {
30760
+ const col = resolvedColumns.find((c) => c.field === activeMenu);
30761
+ if (!col) return null;
30762
+ 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"));
30763
+ })(),
30735
30764
  /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-menu-divider" }),
30736
30765
  /* @__PURE__ */ import_react18.default.createElement("button", { className: "dg-menu-item", onClick: () => {
30737
30766
  setShowAdvancedFilter(true);
@@ -30806,15 +30835,20 @@ function DataGrid({
30806
30835
  /* @__PURE__ */ import_react18.default.createElement("option", { value: "ends with" }, "ends with"),
30807
30836
  /* @__PURE__ */ import_react18.default.createElement("option", { value: "is empty" }, "is empty"),
30808
30837
  /* @__PURE__ */ import_react18.default.createElement("option", { value: "is not empty" }, "is not empty")
30809
- ), /* @__PURE__ */ import_react18.default.createElement(
30810
- "input",
30811
- {
30812
- className: "dg-filter-input",
30813
- placeholder: "Value\u2026",
30814
- value: f.value,
30815
- onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
30816
- }
30817
- )))), /* @__PURE__ */ import_react18.default.createElement(
30838
+ ), (() => {
30839
+ const col = resolvedColumns.find((c) => String(c.field) === f.column);
30840
+ const isDate = col?.type === "date";
30841
+ return /* @__PURE__ */ import_react18.default.createElement(
30842
+ "input",
30843
+ {
30844
+ type: isDate ? "date" : "text",
30845
+ className: "dg-filter-input",
30846
+ placeholder: "Value\u2026",
30847
+ value: f.value,
30848
+ onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
30849
+ }
30850
+ );
30851
+ })()))), /* @__PURE__ */ import_react18.default.createElement(
30818
30852
  "button",
30819
30853
  {
30820
30854
  className: "dg-action-btn",
package/dist/main.css CHANGED
@@ -443,7 +443,6 @@
443
443
  padding: 0;
444
444
  font-size: 0.72rem;
445
445
  font-weight: 700;
446
- text-transform: uppercase;
447
446
  letter-spacing: 0.06em;
448
447
  color: var(--text-secondary);
449
448
  position: relative;
@@ -551,6 +550,16 @@
551
550
  .dg-tbody-row:hover .dg-td.pinned-left {
552
551
  background: var(--hover-color);
553
552
  }
553
+ .dg-td.pinned-right {
554
+ position: sticky;
555
+ right: 0;
556
+ z-index: 10;
557
+ background: var(--surface-color);
558
+ box-shadow: inset 1px 0 0 var(--border-color);
559
+ }
560
+ .dg-tbody-row:hover .dg-td.pinned-right {
561
+ background: var(--hover-color);
562
+ }
554
563
  .dg-row-actions-cell {
555
564
  position: sticky;
556
565
  right: 0;
package/dist/main.js CHANGED
@@ -2,9 +2,6 @@ import {
2
2
  BaseDialog_default
3
3
  } from "./chunk-4GPYGFPP.js";
4
4
  import "./chunk-E5RTHYCU.js";
5
- import {
6
- unsubscribeIcon_default
7
- } from "./chunk-EZI3QGYJ.js";
8
5
  import {
9
6
  uploadIcon_default
10
7
  } from "./chunk-QTGVW36I.js";
@@ -17,9 +14,6 @@ import {
17
14
  import {
18
15
  workItemIcon_default
19
16
  } from "./chunk-QJPQC544.js";
20
- import {
21
- softSkillsIcon_default
22
- } from "./chunk-3Y6QBRGD.js";
23
17
  import {
24
18
  subscribeIcon_default
25
19
  } from "./chunk-JVN6QVET.js";
@@ -42,8 +36,8 @@ import {
42
36
  unArchivedIcon_default
43
37
  } from "./chunk-ZJAV3FEQ.js";
44
38
  import {
45
- questionTypeSingleIcon_default
46
- } from "./chunk-Q4DHI3B5.js";
39
+ unsubscribeIcon_default
40
+ } from "./chunk-EZI3QGYJ.js";
47
41
  import {
48
42
  refreshIcon_default
49
43
  } from "./chunk-YTVUM76D.js";
@@ -66,8 +60,8 @@ import {
66
60
  sidebarIcon_default
67
61
  } from "./chunk-DK3DA5LH.js";
68
62
  import {
69
- qualificationsIcon_default
70
- } from "./chunk-UTBCFDOX.js";
63
+ softSkillsIcon_default
64
+ } from "./chunk-3Y6QBRGD.js";
71
65
  import {
72
66
  questionStatusAllIcon_default
73
67
  } from "./chunk-4Y7SQ5EP.js";
@@ -90,8 +84,8 @@ import {
90
84
  questionTypeMultipleIcon_default
91
85
  } from "./chunk-Z7USRFM2.js";
92
86
  import {
93
- industryIcon_default
94
- } from "./chunk-4BTXGP7U.js";
87
+ questionTypeSingleIcon_default
88
+ } from "./chunk-Q4DHI3B5.js";
95
89
  import {
96
90
  invoiceIcon_default
97
91
  } from "./chunk-6SUKO6QW.js";
@@ -114,8 +108,8 @@ import {
114
108
  projectIcon_default
115
109
  } from "./chunk-DLJHWFNG.js";
116
110
  import {
117
- editChatIcon_default
118
- } from "./chunk-XCE3QE6Q.js";
111
+ qualificationsIcon_default
112
+ } from "./chunk-UTBCFDOX.js";
119
113
  import {
120
114
  editIcon_default
121
115
  } from "./chunk-H372BAXA.js";
@@ -135,8 +129,8 @@ import {
135
129
  inactiveGroupIcon_default
136
130
  } from "./chunk-77QDKDFI.js";
137
131
  import {
138
- copyIcon_default
139
- } from "./chunk-6FEUS4CQ.js";
132
+ industryIcon_default
133
+ } from "./chunk-4BTXGP7U.js";
140
134
  import {
141
135
  difficultyAllIcon_default
142
136
  } from "./chunk-5XKFPQLH.js";
@@ -158,6 +152,9 @@ import {
158
152
  import {
159
153
  downloadPdfIcon_default
160
154
  } from "./chunk-N26C33E6.js";
155
+ import {
156
+ editChatIcon_default
157
+ } from "./chunk-XCE3QE6Q.js";
161
158
  import {
162
159
  activateUserIcon_default
163
160
  } from "./chunk-AH6RCYDL.js";
@@ -171,33 +168,22 @@ import {
171
168
  closeIcon_default
172
169
  } from "./chunk-Q5XKCUE3.js";
173
170
  import {
174
- AddressLookup_default
175
- } from "./chunk-GHCM2AWR.js";
176
- import {
177
- FloatingInput
178
- } from "./chunk-UPCMMCPQ.js";
171
+ copyIcon_default
172
+ } from "./chunk-6FEUS4CQ.js";
179
173
  import {
180
- Checkbox
181
- } from "./chunk-X357WQOT.js";
174
+ AddressLookup_default
175
+ } from "./chunk-M5GFOGY5.js";
182
176
  import {
183
177
  RufousThemeProvider,
184
178
  useRufousTheme
185
179
  } from "./chunk-BOE27BFQ.js";
180
+ import {
181
+ FloatingInput
182
+ } from "./chunk-UPCMMCPQ.js";
186
183
  import {
187
184
  APP_THEMES
188
185
  } from "./chunk-S7BNFVQO.js";
189
- import "./chunk-7KRG7VNW.js";
190
- import {
191
- DataGrid
192
- } from "./chunk-LG4EJGMI.js";
193
- import "./chunk-GJGRMMAQ.js";
194
- import {
195
- RichTextEditor
196
- } from "./chunk-66HHM7VI.js";
197
186
  import "./chunk-QPGJCRBS.js";
198
- import {
199
- addButton_default
200
- } from "./chunk-U7SARO5B.js";
201
187
  import {
202
188
  cancelButton_default
203
189
  } from "./chunk-BMMDUQDJ.js";
@@ -210,6 +196,20 @@ import {
210
196
  import {
211
197
  circularProgress_default
212
198
  } from "./chunk-CTBYVXFP.js";
199
+ import "./chunk-GJGRMMAQ.js";
200
+ import {
201
+ RichTextEditor
202
+ } from "./chunk-66HHM7VI.js";
203
+ import "./chunk-7KRG7VNW.js";
204
+ import {
205
+ DataGrid
206
+ } from "./chunk-AAZU2PSA.js";
207
+ import {
208
+ Checkbox
209
+ } from "./chunk-X357WQOT.js";
210
+ import {
211
+ addButton_default
212
+ } from "./chunk-U7SARO5B.js";
213
213
  import "./chunk-LI4N7JWK.js";
214
214
  export {
215
215
  APP_THEMES,
package/dist/style.css CHANGED
@@ -443,7 +443,6 @@
443
443
  padding: 0;
444
444
  font-size: 0.72rem;
445
445
  font-weight: 700;
446
- text-transform: uppercase;
447
446
  letter-spacing: 0.06em;
448
447
  color: var(--text-secondary);
449
448
  position: relative;
@@ -551,6 +550,16 @@
551
550
  .dg-tbody-row:hover .dg-td.pinned-left {
552
551
  background: var(--hover-color);
553
552
  }
553
+ .dg-td.pinned-right {
554
+ position: sticky;
555
+ right: 0;
556
+ z-index: 10;
557
+ background: var(--surface-color);
558
+ box-shadow: inset 1px 0 0 var(--border-color);
559
+ }
560
+ .dg-tbody-row:hover .dg-td.pinned-right {
561
+ background: var(--hover-color);
562
+ }
554
563
  .dg-row-actions-cell {
555
564
  position: sticky;
556
565
  right: 0;
@@ -114,7 +114,6 @@
114
114
  padding: 0;
115
115
  font-size: 0.72rem;
116
116
  font-weight: 700;
117
- text-transform: uppercase;
118
117
  letter-spacing: 0.06em;
119
118
  color: var(--text-secondary);
120
119
  position: relative;
@@ -222,6 +221,16 @@
222
221
  .dg-tbody-row:hover .dg-td.pinned-left {
223
222
  background: var(--hover-color);
224
223
  }
224
+ .dg-td.pinned-right {
225
+ position: sticky;
226
+ right: 0;
227
+ z-index: 10;
228
+ background: var(--surface-color);
229
+ box-shadow: inset 1px 0 0 var(--border-color);
230
+ }
231
+ .dg-tbody-row:hover .dg-td.pinned-right {
232
+ background: var(--hover-color);
233
+ }
225
234
  .dg-row-actions-cell {
226
235
  position: sticky;
227
236
  right: 0;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.1.69",
4
+ "version": "0.1.71",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/style.css",
@@ -1,9 +1,9 @@
1
- import {
2
- FloatingInput
3
- } from "./chunk-UPCMMCPQ.js";
4
1
  import {
5
2
  useRufousTheme
6
3
  } from "./chunk-BOE27BFQ.js";
4
+ import {
5
+ FloatingInput
6
+ } from "./chunk-UPCMMCPQ.js";
7
7
  import {
8
8
  circularProgress_default
9
9
  } from "./chunk-CTBYVXFP.js";