@xcelsior/ui-spreadsheets 1.0.4 → 1.0.5

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.
@@ -0,0 +1,61 @@
1
+
2
+ > @xcelsior/ui-spreadsheets@1.0.3 lint /Users/tuannguyen/Work/xcelsior-packages/packages/ui/ui-spreadsheets
3
+ > biome check . && tsc
4
+
5
+  at src/components/Spreadsheet.tsx:779:49 ]8;;https://biomejs.dev/linter/rules/use-key-with-click-events\lint/a11y/useKeyWithClickEvents]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6
+
7
+  ⚠ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
8
+  
9
+   777 │                                             {/* Row Index Column */}
10
+   778 │                                             {effectiveShowRowIndex && (
11
+  > 779 │                                                 <td
12
+      │                                                 ^^^
13
+  > 780 │                                                     onClick={(e) => handleRowSelect(rowId, e)}
14
+      ...
15
+  > 806 │                                                     }}
16
+  > 807 │                                                 >
17
+      │                                                 ^
18
+   808 │                                                     <div className={'relative'}>
19
+   809 │                                                         {/* Row number */}
20
+  
21
+  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
22
+  
23
+ 
24
+  at src/components/SpreadsheetFilterDropdown.tsx:188:9 ]8;;https://biomejs.dev/linter/rules/no-static-element-interactions\lint/a11y/noStaticElementInteractions]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
25
+
26
+  ⚠ Static Elements should not be interactive.
27
+  
28
+   187 │     return (
29
+  > 188 │         <div
30
+      │         ^^^^
31
+  > 189 │             ref={dropdownRef}
32
+      ...
33
+  > 194 │             onClick={(e) => e.stopPropagation()}
34
+  > 195 │         >
35
+      │         ^
36
+   196 │             <div className="px-3 py-2 border-b border-gray-200 bg-gray-50">
37
+   197 │                 <span className="text-xs font-medium text-gray-700">Filter: {column.label}</span>
38
+  
39
+  ℹ To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
40
+  
41
+ 
42
+  at src/components/SpreadsheetFilterDropdown.tsx:188:9 ]8;;https://biomejs.dev/linter/rules/use-key-with-click-events\lint/a11y/useKeyWithClickEvents]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
43
+
44
+  ⚠ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
45
+  
46
+   187 │     return (
47
+  > 188 │         <div
48
+      │         ^^^^
49
+  > 189 │             ref={dropdownRef}
50
+      ...
51
+  > 194 │             onClick={(e) => e.stopPropagation()}
52
+  > 195 │         >
53
+      │         ^
54
+   196 │             <div className="px-3 py-2 border-b border-gray-200 bg-gray-50">
55
+   197 │                 <span className="text-xs font-medium text-gray-700">Filter: {column.label}</span>
56
+  
57
+  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
58
+  
59
+ 
60
+ Checked 29 files in 11ms. No fixes applied.
61
+ Found 3 warnings.
package/dist/index.js CHANGED
@@ -376,31 +376,7 @@ var SpreadsheetCell = ({
376
376
  children: renderContent()
377
377
  }
378
378
  ),
379
- hasComments && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
380
- "button",
381
- {
382
- type: "button",
383
- onClick: (e) => {
384
- e.stopPropagation();
385
- onViewComments?.();
386
- },
387
- className: "absolute -right-1 p-0.5 hover:bg-gray-100 rounded z-10",
388
- title: `${unresolvedCommentCount} unresolved comment(s)`,
389
- children: [
390
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
391
- FaComment,
392
- {
393
- className: cn(
394
- "h-2.5 w-2.5",
395
- unresolvedCommentCount > 0 ? "text-amber-500" : "text-gray-400"
396
- )
397
- }
398
- ),
399
- unresolvedCommentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-1 -right-1 bg-amber-500 text-white text-[6px] rounded-full w-2.5 h-2.5 flex items-center justify-center", children: unresolvedCommentCount })
400
- ]
401
- }
402
- ),
403
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "opacity-0 group-hover:opacity-100 flex items-center gap-0.5 transition-opacity shrink-0", children: [
379
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5 shrink-0", children: [
404
380
  value !== null && value !== void 0 && value !== "" && onCopyDown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
405
381
  "button",
406
382
  {
@@ -409,7 +385,7 @@ var SpreadsheetCell = ({
409
385
  e.stopPropagation();
410
386
  onCopyDown();
411
387
  },
412
- className: "p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
388
+ className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
413
389
  title: "Copy value down to rows below",
414
390
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiOutlineClipboardCopy, { className: "h-2.5 w-2.5 text-gray-500" })
415
391
  }
@@ -422,7 +398,7 @@ var SpreadsheetCell = ({
422
398
  e.stopPropagation();
423
399
  onCopyToSelected();
424
400
  },
425
- className: "p-0.5 bg-green-100 hover:bg-green-200 rounded",
401
+ className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-green-100 hover:bg-green-200 rounded",
426
402
  title: "Copy to selected rows",
427
403
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiOutlineClipboardCheck, { className: "h-2.5 w-2.5 text-green-600" })
428
404
  }
@@ -435,20 +411,35 @@ var SpreadsheetCell = ({
435
411
  e.stopPropagation();
436
412
  onHighlight();
437
413
  },
438
- className: "p-0.5 hover:bg-gray-100 rounded",
414
+ className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
439
415
  title: "Highlight cell",
440
416
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
441
417
  AiFillHighlight,
442
418
  {
443
419
  className: cn(
444
420
  "h-2.5 w-2.5",
445
- highlightColor ? "text-amber-500" : "text-gray-400"
421
+ highlightColor ? "text-amber-500" : "text-gray-500"
446
422
  )
447
423
  }
448
424
  )
449
425
  }
450
426
  ),
451
- onAddComment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
427
+ hasComments && onViewComments ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
428
+ "button",
429
+ {
430
+ type: "button",
431
+ onClick: (e) => {
432
+ e.stopPropagation();
433
+ onViewComments();
434
+ },
435
+ className: "p-0.5 bg-amber-100 hover:bg-amber-200 rounded transition-colors flex items-center gap-0.5",
436
+ title: `${unresolvedCommentCount} comment(s) - click to view`,
437
+ children: [
438
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
439
+ unresolvedCommentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: unresolvedCommentCount > 99 ? "99+" : unresolvedCommentCount })
440
+ ]
441
+ }
442
+ ) : onAddComment ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
452
443
  "button",
453
444
  {
454
445
  type: "button",
@@ -456,11 +447,11 @@ var SpreadsheetCell = ({
456
447
  e.stopPropagation();
457
448
  onAddComment();
458
449
  },
459
- className: "p-0.5 hover:bg-gray-100 rounded",
450
+ className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
460
451
  title: "Add comment",
461
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-400" })
452
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
462
453
  }
463
- )
454
+ ) : null
464
455
  ] })
465
456
  ] })
466
457
  }
@@ -2081,6 +2072,7 @@ function ViewCommentsModal({
2081
2072
  comments,
2082
2073
  columnLabel,
2083
2074
  onToggleResolved,
2075
+ onAddComment,
2084
2076
  onClose
2085
2077
  }) {
2086
2078
  if (!isOpen) return null;
@@ -2133,7 +2125,16 @@ function ViewCommentsModal({
2133
2125
  comment.id
2134
2126
  )),
2135
2127
  comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
2136
- ] })
2128
+ ] }),
2129
+ onAddComment && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-4 pt-4 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
2130
+ "button",
2131
+ {
2132
+ type: "button",
2133
+ onClick: onAddComment,
2134
+ className: "w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2",
2135
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+ Add Comment" })
2136
+ }
2137
+ ) })
2137
2138
  ] }) });
2138
2139
  }
2139
2140
  ViewCommentsModal.displayName = "ViewCommentsModal";
@@ -3387,52 +3388,9 @@ function Spreadsheet({
3387
3388
  left: 0
3388
3389
  }
3389
3390
  },
3390
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
3391
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "py-1 px-1", children: displayIndex }),
3392
- cellHasComments(
3393
- rowId,
3394
- ROW_INDEX_COLUMN_ID
3395
- ) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
3396
- "button",
3397
- {
3398
- type: "button",
3399
- onClick: (e) => {
3400
- e.stopPropagation();
3401
- setViewCommentsCell({
3402
- rowId,
3403
- columnId: ROW_INDEX_COLUMN_ID
3404
- });
3405
- },
3406
- style: {
3407
- top: "5px",
3408
- right: "5px"
3409
- },
3410
- className: "absolute p-0.5 hover:bg-gray-100 rounded z-10",
3411
- title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} unresolved comment(s)`,
3412
- children: [
3413
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3414
- FaComment,
3415
- {
3416
- className: cn(
3417
- "h-2.5 w-2.5",
3418
- getCellUnresolvedCommentCount(
3419
- rowId,
3420
- ROW_INDEX_COLUMN_ID
3421
- ) > 0 ? "text-amber-500" : "text-gray-400"
3422
- )
3423
- }
3424
- ),
3425
- getCellUnresolvedCommentCount(
3426
- rowId,
3427
- ROW_INDEX_COLUMN_ID
3428
- ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute -top-1 -right-1 bg-amber-500 text-white text-[6px] rounded-full w-2.5 h-2.5 flex items-center justify-center", children: getCellUnresolvedCommentCount(
3429
- rowId,
3430
- ROW_INDEX_COLUMN_ID
3431
- ) })
3432
- ]
3433
- }
3434
- ),
3435
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute inset-x-0 bottom-0 opacity-0 group-hover:opacity-100 flex items-center justify-center gap-0.5 transition-opacity bg-white/90 py-0.5 border-t border-gray-100", children: [
3391
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex items-center justify-center", children: [
3392
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: displayIndex }),
3393
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute right-0 flex items-center gap-0.5", children: [
3436
3394
  onRowClone && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3437
3395
  "button",
3438
3396
  {
@@ -3441,7 +3399,7 @@ function Spreadsheet({
3441
3399
  e.stopPropagation();
3442
3400
  handleRowClone(row, rowId);
3443
3401
  },
3444
- className: "p-0.5 hover:bg-gray-200 rounded",
3402
+ className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
3445
3403
  title: "Duplicate row",
3446
3404
  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiDuplicate, { className: "h-2.5 w-2.5 text-gray-500" })
3447
3405
  }
@@ -3456,7 +3414,7 @@ function Spreadsheet({
3456
3414
  rowId
3457
3415
  );
3458
3416
  },
3459
- className: "p-0.5 hover:bg-gray-200 rounded",
3417
+ className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
3460
3418
  title: "Highlight row",
3461
3419
  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3462
3420
  AiFillHighlight,
@@ -3469,7 +3427,37 @@ function Spreadsheet({
3469
3427
  )
3470
3428
  }
3471
3429
  ),
3472
- enableComments && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3430
+ enableComments && (cellHasComments(
3431
+ rowId,
3432
+ ROW_INDEX_COLUMN_ID
3433
+ ) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
3434
+ "button",
3435
+ {
3436
+ type: "button",
3437
+ onClick: (e) => {
3438
+ e.stopPropagation();
3439
+ setViewCommentsCell({
3440
+ rowId,
3441
+ columnId: ROW_INDEX_COLUMN_ID
3442
+ });
3443
+ },
3444
+ className: "p-0.5 bg-amber-100 hover:bg-amber-200 rounded transition-colors flex items-center gap-0.5",
3445
+ title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} comment(s) - click to view`,
3446
+ children: [
3447
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
3448
+ getCellUnresolvedCommentCount(
3449
+ rowId,
3450
+ ROW_INDEX_COLUMN_ID
3451
+ ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
3452
+ rowId,
3453
+ ROW_INDEX_COLUMN_ID
3454
+ ) > 99 ? "99+" : getCellUnresolvedCommentCount(
3455
+ rowId,
3456
+ ROW_INDEX_COLUMN_ID
3457
+ ) })
3458
+ ]
3459
+ }
3460
+ ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3473
3461
  "button",
3474
3462
  {
3475
3463
  type: "button",
@@ -3480,11 +3468,11 @@ function Spreadsheet({
3480
3468
  columnId: ROW_INDEX_COLUMN_ID
3481
3469
  });
3482
3470
  },
3483
- className: "p-0.5 hover:bg-gray-200 rounded",
3471
+ className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
3484
3472
  title: "Add comment",
3485
3473
  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
3486
3474
  }
3487
- ),
3475
+ )),
3488
3476
  rowActions?.map((action) => {
3489
3477
  if (action.visible && !action.visible(row))
3490
3478
  return null;
@@ -3500,7 +3488,7 @@ function Spreadsheet({
3500
3488
  );
3501
3489
  },
3502
3490
  className: cn(
3503
- "p-0.5 hover:bg-gray-200 rounded",
3491
+ "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-gray-200 rounded",
3504
3492
  action.className
3505
3493
  ),
3506
3494
  title: action.tooltip,
@@ -3613,6 +3601,11 @@ function Spreadsheet({
3613
3601
  comments: viewCommentsCell !== null ? getCellComments(viewCommentsCell.rowId, viewCommentsCell.columnId) : [],
3614
3602
  columnLabel: viewCommentsCell ? viewCommentsCell.columnId === ROW_INDEX_COLUMN_ID ? "Row #" : columns.find((c) => c.id === viewCommentsCell.columnId)?.label : void 0,
3615
3603
  onToggleResolved: handleToggleCommentResolved,
3604
+ onAddComment: viewCommentsCell !== null ? () => {
3605
+ const cell = viewCommentsCell;
3606
+ setViewCommentsCell(null);
3607
+ setCommentModalCell(cell);
3608
+ } : void 0,
3616
3609
  onClose: () => setViewCommentsCell(null)
3617
3610
  }
3618
3611
  ),