@rufous/ui 0.1.70 → 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.
Files changed (18) hide show
  1. package/dist/Buttons/index.js +3 -3
  2. package/dist/DataGrid/DataGrid.cjs +20 -4
  3. package/dist/DataGrid/DataGrid.js +1 -1
  4. package/dist/DataGrid/index.cjs +20 -4
  5. package/dist/DataGrid/index.js +1 -1
  6. package/dist/Dialogs/BaseDialog.css +10 -0
  7. package/dist/Dialogs/BaseDialog.js +10 -10
  8. package/dist/Dialogs/index.css +10 -0
  9. package/dist/Dialogs/index.js +10 -10
  10. package/dist/TextFields/AddressLookup.js +1 -1
  11. package/dist/{chunk-7OMS6IWF.js → chunk-AAZU2PSA.js} +20 -4
  12. package/dist/main.cjs +20 -4
  13. package/dist/main.css +10 -0
  14. package/dist/main.js +23 -23
  15. package/dist/style.css +10 -0
  16. package/dist/styles/datagrid.css +10 -0
  17. package/package.json +1 -1
  18. package/dist/{chunk-K6626C4D.js → chunk-4GPYGFPP.js} +3 -3
package/dist/Buttons/index.js CHANGED
@@ -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,
package/dist/DataGrid/DataGrid.cjs CHANGED
@@ -270,6 +270,16 @@ function DataGrid({
270
270
  }
271
271
  return offset;
272
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
+ };
273
283
  const hasActiveFilters = advancedFilters.some((f) => f.value);
274
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(
275
285
  "input",
@@ -302,13 +312,14 @@ function DataGrid({
302
312
  const colField = String(col.field);
303
313
  const width = columnWidths[colField] || 200;
304
314
  const leftOffset = getLeftOffset(col, idx);
315
+ const rightOffset = getRightOffset(col, idx);
305
316
  const isSorted = sortField === col.field;
306
317
  return /* @__PURE__ */ import_react.default.createElement(
307
318
  "th",
308
319
  {
309
320
  key: colField,
310
321
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
311
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
322
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
312
323
  },
313
324
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ import_react.default.createElement(
314
325
  "div",
@@ -343,12 +354,13 @@ function DataGrid({
343
354
  const colField = String(col.field);
344
355
  const width = columnWidths[colField] || 200;
345
356
  const leftOffset = getLeftOffset(col, idx);
357
+ const rightOffset = getRightOffset(col, idx);
346
358
  return /* @__PURE__ */ import_react.default.createElement(
347
359
  "td",
348
360
  {
349
361
  key: `${item.id}-${colField}`,
350
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
351
- 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 }
352
364
  },
353
365
  (() => {
354
366
  const field = String(col.field);
@@ -394,7 +406,11 @@ function DataGrid({
394
406
  {
395
407
  ref: menuRef,
396
408
  className: "dg-menu",
397
- 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
+ }
398
414
  },
399
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"),
400
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"),
package/dist/DataGrid/DataGrid.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  DataGrid,
3
3
  DataGrid_default
4
- } from "../chunk-7OMS6IWF.js";
4
+ } from "../chunk-AAZU2PSA.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid,
package/dist/DataGrid/index.cjs CHANGED
@@ -271,6 +271,16 @@ function DataGrid({
271
271
  }
272
272
  return offset;
273
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
+ };
274
284
  const hasActiveFilters = advancedFilters.some((f) => f.value);
275
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(
276
286
  "input",
@@ -303,13 +313,14 @@ function DataGrid({
303
313
  const colField = String(col.field);
304
314
  const width = columnWidths[colField] || 200;
305
315
  const leftOffset = getLeftOffset(col, idx);
316
+ const rightOffset = getRightOffset(col, idx);
306
317
  const isSorted = sortField === col.field;
307
318
  return /* @__PURE__ */ import_react.default.createElement(
308
319
  "th",
309
320
  {
310
321
  key: colField,
311
322
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
312
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
323
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
313
324
  },
314
325
  /* @__PURE__ */ import_react.default.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ import_react.default.createElement(
315
326
  "div",
@@ -344,12 +355,13 @@ function DataGrid({
344
355
  const colField = String(col.field);
345
356
  const width = columnWidths[colField] || 200;
346
357
  const leftOffset = getLeftOffset(col, idx);
358
+ const rightOffset = getRightOffset(col, idx);
347
359
  return /* @__PURE__ */ import_react.default.createElement(
348
360
  "td",
349
361
  {
350
362
  key: `${item.id}-${colField}`,
351
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
352
- 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 }
353
365
  },
354
366
  (() => {
355
367
  const field = String(col.field);
@@ -395,7 +407,11 @@ function DataGrid({
395
407
  {
396
408
  ref: menuRef,
397
409
  className: "dg-menu",
398
- 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
+ }
399
415
  },
400
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"),
401
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"),
package/dist/DataGrid/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import "../chunk-7KRG7VNW.js";
2
2
  import {
3
3
  DataGrid
4
- } from "../chunk-7OMS6IWF.js";
4
+ } from "../chunk-AAZU2PSA.js";
5
5
  import "../chunk-LI4N7JWK.js";
6
6
  export {
7
7
  DataGrid
package/dist/Dialogs/BaseDialog.css CHANGED
@@ -550,6 +550,16 @@
550
550
  .dg-tbody-row:hover .dg-td.pinned-left {
551
551
  background: var(--hover-color);
552
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
+ }
553
563
  .dg-row-actions-cell {
554
564
  position: sticky;
555
565
  right: 0;
package/dist/Dialogs/BaseDialog.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BaseDialog_default
3
- } from "../chunk-K6626C4D.js";
3
+ } from "../chunk-4GPYGFPP.js";
4
4
  import "../chunk-E5RTHYCU.js";
5
5
  import "../chunk-QTGVW36I.js";
6
6
  import "../chunk-G2GZDPUL.js";
@@ -53,26 +53,26 @@ import "../chunk-GL43GPEM.js";
53
53
  import "../chunk-FZCFFVXW.js";
54
54
  import "../chunk-N26C33E6.js";
55
55
  import "../chunk-XCE3QE6Q.js";
56
- import "../chunk-M5GFOGY5.js";
57
- import "../chunk-BOE27BFQ.js";
58
- import "../chunk-S7BNFVQO.js";
59
- import "../chunk-UPCMMCPQ.js";
60
56
  import "../chunk-AH6RCYDL.js";
61
57
  import "../chunk-3IBCGGN3.js";
62
58
  import "../chunk-MNPAE2ZF.js";
63
59
  import "../chunk-Q5XKCUE3.js";
64
60
  import "../chunk-6FEUS4CQ.js";
65
- import "../chunk-GJGRMMAQ.js";
66
- import "../chunk-X357WQOT.js";
61
+ import "../chunk-M5GFOGY5.js";
62
+ import "../chunk-BOE27BFQ.js";
63
+ import "../chunk-UPCMMCPQ.js";
64
+ import "../chunk-S7BNFVQO.js";
67
65
  import "../chunk-QPGJCRBS.js";
68
- import "../chunk-U7SARO5B.js";
69
66
  import "../chunk-BMMDUQDJ.js";
70
67
  import "../chunk-R3GARAVJ.js";
71
68
  import "../chunk-YRLN3TBF.js";
72
69
  import "../chunk-CTBYVXFP.js";
73
- import "../chunk-7KRG7VNW.js";
74
- import "../chunk-7OMS6IWF.js";
70
+ import "../chunk-GJGRMMAQ.js";
75
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
package/dist/Dialogs/index.css CHANGED
@@ -550,6 +550,16 @@
550
550
  .dg-tbody-row:hover .dg-td.pinned-left {
551
551
  background: var(--hover-color);
552
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
+ }
553
563
  .dg-row-actions-cell {
554
564
  position: sticky;
555
565
  right: 0;
package/dist/Dialogs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BaseDialog_default
3
- } from "../chunk-K6626C4D.js";
3
+ } from "../chunk-4GPYGFPP.js";
4
4
  import "../chunk-E5RTHYCU.js";
5
5
  import "../chunk-QTGVW36I.js";
6
6
  import "../chunk-G2GZDPUL.js";
@@ -53,26 +53,26 @@ import "../chunk-GL43GPEM.js";
53
53
  import "../chunk-FZCFFVXW.js";
54
54
  import "../chunk-N26C33E6.js";
55
55
  import "../chunk-XCE3QE6Q.js";
56
- import "../chunk-M5GFOGY5.js";
57
- import "../chunk-BOE27BFQ.js";
58
- import "../chunk-S7BNFVQO.js";
59
- import "../chunk-UPCMMCPQ.js";
60
56
  import "../chunk-AH6RCYDL.js";
61
57
  import "../chunk-3IBCGGN3.js";
62
58
  import "../chunk-MNPAE2ZF.js";
63
59
  import "../chunk-Q5XKCUE3.js";
64
60
  import "../chunk-6FEUS4CQ.js";
65
- import "../chunk-GJGRMMAQ.js";
66
- import "../chunk-X357WQOT.js";
61
+ import "../chunk-M5GFOGY5.js";
62
+ import "../chunk-BOE27BFQ.js";
63
+ import "../chunk-UPCMMCPQ.js";
64
+ import "../chunk-S7BNFVQO.js";
67
65
  import "../chunk-QPGJCRBS.js";
68
- import "../chunk-U7SARO5B.js";
69
66
  import "../chunk-BMMDUQDJ.js";
70
67
  import "../chunk-R3GARAVJ.js";
71
68
  import "../chunk-YRLN3TBF.js";
72
69
  import "../chunk-CTBYVXFP.js";
73
- import "../chunk-7KRG7VNW.js";
74
- import "../chunk-7OMS6IWF.js";
70
+ import "../chunk-GJGRMMAQ.js";
75
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
package/dist/TextFields/AddressLookup.js CHANGED
@@ -2,8 +2,8 @@ import {
2
2
  AddressLookup_default
3
3
  } from "../chunk-M5GFOGY5.js";
4
4
  import "../chunk-BOE27BFQ.js";
5
- import "../chunk-S7BNFVQO.js";
6
5
  import "../chunk-UPCMMCPQ.js";
6
+ import "../chunk-S7BNFVQO.js";
7
7
  import "../chunk-CTBYVXFP.js";
8
8
  import "../chunk-LI4N7JWK.js";
9
9
  export {
package/dist/{chunk-7OMS6IWF.js → chunk-AAZU2PSA.js} RENAMED
@@ -253,6 +253,16 @@ function DataGrid({
253
253
  }
254
254
  return offset;
255
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
+ };
256
266
  const hasActiveFilters = advancedFilters.some((f) => f.value);
257
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(
258
268
  "input",
@@ -285,13 +295,14 @@ function DataGrid({
285
295
  const colField = String(col.field);
286
296
  const width = columnWidths[colField] || 200;
287
297
  const leftOffset = getLeftOffset(col, idx);
298
+ const rightOffset = getRightOffset(col, idx);
288
299
  const isSorted = sortField === col.field;
289
300
  return /* @__PURE__ */ React.createElement(
290
301
  "th",
291
302
  {
292
303
  key: colField,
293
304
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
294
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
305
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
295
306
  },
296
307
  /* @__PURE__ */ React.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ React.createElement(
297
308
  "div",
@@ -326,12 +337,13 @@ function DataGrid({
326
337
  const colField = String(col.field);
327
338
  const width = columnWidths[colField] || 200;
328
339
  const leftOffset = getLeftOffset(col, idx);
340
+ const rightOffset = getRightOffset(col, idx);
329
341
  return /* @__PURE__ */ React.createElement(
330
342
  "td",
331
343
  {
332
344
  key: `${item.id}-${colField}`,
333
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
334
- 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 }
335
347
  },
336
348
  (() => {
337
349
  const field = String(col.field);
@@ -377,7 +389,11 @@ function DataGrid({
377
389
  {
378
390
  ref: menuRef,
379
391
  className: "dg-menu",
380
- 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
+ }
381
397
  },
382
398
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
383
399
  /* @__PURE__ */ React.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React.createElement(ArrowDown, { size: 14 }), " Sort descending"),
package/dist/main.cjs CHANGED
@@ -30611,6 +30611,16 @@ function DataGrid({
30611
30611
  }
30612
30612
  return offset2;
30613
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
+ };
30614
30624
  const hasActiveFilters = advancedFilters.some((f) => f.value);
30615
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(
30616
30626
  "input",
@@ -30643,13 +30653,14 @@ function DataGrid({
30643
30653
  const colField = String(col.field);
30644
30654
  const width = columnWidths[colField] || 200;
30645
30655
  const leftOffset = getLeftOffset(col, idx);
30656
+ const rightOffset = getRightOffset(col, idx);
30646
30657
  const isSorted = sortField === col.field;
30647
30658
  return /* @__PURE__ */ import_react18.default.createElement(
30648
30659
  "th",
30649
30660
  {
30650
30661
  key: colField,
30651
30662
  className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
30652
- style: { width, minWidth: width, left: leftOffset, flex: col.flex }
30663
+ style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
30653
30664
  },
30654
30665
  /* @__PURE__ */ import_react18.default.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ import_react18.default.createElement(
30655
30666
  "div",
@@ -30684,12 +30695,13 @@ function DataGrid({
30684
30695
  const colField = String(col.field);
30685
30696
  const width = columnWidths[colField] || 200;
30686
30697
  const leftOffset = getLeftOffset(col, idx);
30698
+ const rightOffset = getRightOffset(col, idx);
30687
30699
  return /* @__PURE__ */ import_react18.default.createElement(
30688
30700
  "td",
30689
30701
  {
30690
30702
  key: `${item.id}-${colField}`,
30691
- className: `dg-td${col.pinned === "left" ? " pinned-left" : ""} ${col.cellClassName || ""}`,
30692
- 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 }
30693
30705
  },
30694
30706
  (() => {
30695
30707
  const field = String(col.field);
@@ -30735,7 +30747,11 @@ function DataGrid({
30735
30747
  {
30736
30748
  ref: menuRef,
30737
30749
  className: "dg-menu",
30738
- 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
+ }
30739
30755
  },
30740
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"),
30741
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"),
package/dist/main.css CHANGED
@@ -550,6 +550,16 @@
550
550
  .dg-tbody-row:hover .dg-td.pinned-left {
551
551
  background: var(--hover-color);
552
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
+ }
553
563
  .dg-row-actions-cell {
554
564
  position: sticky;
555
565
  right: 0;
package/dist/main.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BaseDialog_default
3
- } from "./chunk-K6626C4D.js";
3
+ } from "./chunk-4GPYGFPP.js";
4
4
  import "./chunk-E5RTHYCU.js";
5
5
  import {
6
6
  uploadIcon_default
@@ -155,19 +155,6 @@ import {
155
155
  import {
156
156
  editChatIcon_default
157
157
  } from "./chunk-XCE3QE6Q.js";
158
- import {
159
- AddressLookup_default
160
- } from "./chunk-M5GFOGY5.js";
161
- import {
162
- RufousThemeProvider,
163
- useRufousTheme
164
- } from "./chunk-BOE27BFQ.js";
165
- import {
166
- APP_THEMES
167
- } from "./chunk-S7BNFVQO.js";
168
- import {
169
- FloatingInput
170
- } from "./chunk-UPCMMCPQ.js";
171
158
  import {
172
159
  activateUserIcon_default
173
160
  } from "./chunk-AH6RCYDL.js";
@@ -183,14 +170,20 @@ import {
183
170
  import {
184
171
  copyIcon_default
185
172
  } from "./chunk-6FEUS4CQ.js";
186
- import "./chunk-GJGRMMAQ.js";
187
173
  import {
188
- Checkbox
189
- } from "./chunk-X357WQOT.js";
190
- import "./chunk-QPGJCRBS.js";
174
+ AddressLookup_default
175
+ } from "./chunk-M5GFOGY5.js";
191
176
  import {
192
- addButton_default
193
- } from "./chunk-U7SARO5B.js";
177
+ RufousThemeProvider,
178
+ useRufousTheme
179
+ } from "./chunk-BOE27BFQ.js";
180
+ import {
181
+ FloatingInput
182
+ } from "./chunk-UPCMMCPQ.js";
183
+ import {
184
+ APP_THEMES
185
+ } from "./chunk-S7BNFVQO.js";
186
+ import "./chunk-QPGJCRBS.js";
194
187
  import {
195
188
  cancelButton_default
196
189
  } from "./chunk-BMMDUQDJ.js";
@@ -203,13 +196,20 @@ import {
203
196
  import {
204
197
  circularProgress_default
205
198
  } from "./chunk-CTBYVXFP.js";
199
+ import "./chunk-GJGRMMAQ.js";
200
+ import {
201
+ RichTextEditor
202
+ } from "./chunk-66HHM7VI.js";
206
203
  import "./chunk-7KRG7VNW.js";
207
204
  import {
208
205
  DataGrid
209
- } from "./chunk-7OMS6IWF.js";
206
+ } from "./chunk-AAZU2PSA.js";
210
207
  import {
211
- RichTextEditor
212
- } from "./chunk-66HHM7VI.js";
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
@@ -550,6 +550,16 @@
550
550
  .dg-tbody-row:hover .dg-td.pinned-left {
551
551
  background: var(--hover-color);
552
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
+ }
553
563
  .dg-row-actions-cell {
554
564
  position: sticky;
555
565
  right: 0;
package/dist/styles/datagrid.css CHANGED
@@ -221,6 +221,16 @@
221
221
  .dg-tbody-row:hover .dg-td.pinned-left {
222
222
  background: var(--hover-color);
223
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
+ }
224
234
  .dg-row-actions-cell {
225
235
  position: sticky;
226
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.70",
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",
package/dist/{chunk-K6626C4D.js → chunk-4GPYGFPP.js} RENAMED
@@ -1,9 +1,9 @@
1
- import {
2
- useRufousTheme
3
- } from "./chunk-BOE27BFQ.js";
4
1
  import {
5
2
  closeIcon_default
6
3
  } from "./chunk-Q5XKCUE3.js";
4
+ import {
5
+ useRufousTheme
6
+ } from "./chunk-BOE27BFQ.js";
7
7
 
8
8
  // lib/Dialogs/BaseDialog.tsx
9
9
  import * as React from "react";