@xcelsior/ui-spreadsheets 1.1.18 → 1.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @xcelsior/ui-spreadsheets@1.1.4 build /Users/tuannguyen/Work/xcelsior-packages/packages/ui/ui-spreadsheets
+> @xcelsior/ui-spreadsheets@1.1.18 build /Users/tuannguyen/Work/xcelsior-packages/packages/ui/ui-spreadsheets
 > tsup && tsc --noEmit
 
 CLI Building entry: src/index.ts, src/styles/globals.css
@@ -11,18 +11,18 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/styles/globals.css     33.16 KB
-CJS dist/index.js               173.50 KB
-CJS dist/styles/globals.css.map 55.29 KB
-CJS dist/index.js.map           4.65 MB
-CJS ⚡️ Build success in 397ms
-ESM dist/styles/globals.css     33.16 KB
-ESM dist/index.mjs              162.16 KB
-ESM dist/styles/globals.css.map 55.29 KB
-ESM dist/index.mjs.map          4.65 MB
-ESM ⚡️ Build success in 396ms
-DTS ⚡️ Build success in 2168ms
+ESM dist/styles/globals.css     34.51 KB
+ESM dist/index.mjs              180.51 KB
+ESM dist/styles/globals.css.map 57.51 KB
+ESM dist/index.mjs.map          4.69 MB
+ESM ⚡️ Build success in 344ms
+CJS dist/styles/globals.css     34.51 KB
+CJS dist/index.js               192.38 KB
+CJS dist/styles/globals.css.map 57.51 KB
+CJS dist/index.js.map           4.69 MB
+CJS ⚡️ Build success in 345ms
+DTS ⚡️ Build success in 2201ms
 DTS dist/styles/globals.d.ts  13.00 B
-DTS dist/index.d.ts           26.27 KB
+DTS dist/index.d.ts           27.85 KB
 DTS dist/styles/globals.d.mts 13.00 B
-DTS dist/index.d.mts          26.27 KB
+DTS dist/index.d.mts          27.85 KB

package/.turbo/turbo-lint.log

@@ -1,185 +1 @@
-
-> @xcelsior/ui-spreadsheets@1.1.4 lint /Users/tuannguyen/Work/xcelsior-packages/packages/ui/ui-spreadsheets
-> biome check . && tsc --noEmit
-
- at src/components/CommentModals.tsx:57:21 ]8;;https://biomejs.dev/linter/rules/no-autofocus\lint/a11y/noAutofocus]8;;\  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ Avoid the autoFocus attribute.
-  
-    55 │                     placeholder="Enter your comment..."
-    56 │                     className="w-full h-24 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
-  > 57 │                     autoFocus
-       │                     ^^^^^^^^^
-    58 │                 />
-    59 │                 <div className="flex justify-end gap-2 mt-4">
-  
-  ℹ Unsafe fix: Remove the autoFocus attribute.
-  
-     55  55 │                       placeholder="Enter your comment..."
-     56  56 │                       className="w-full h-24 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
-     57     │ - ····················autoFocus
-     58  57 │                   />
-     59  58 │                   <div className="flex justify-end gap-2 mt-4">
-  
-
- at src/components/Spreadsheet.tsx:845:45 ]8;;https://biomejs.dev/linter/rules/use-key-with-click-events\lint/a11y/useKeyWithClickEvents]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
-  
-    843 │                                         >
-    844 │                                             {/* Row Index Column */}
-  > 845 │                                             <td
-        │                                             ^^^
-  > 846 │                                                 onClick={(e) => handleRowSelect(rowId, e)}
-         ...
-  > 874 │                                                 }}
-  > 875 │                                             >
-        │                                             ^
-    876 │                                                 <div className="relative flex items-center justify-center w-full h-full">
-    877 │                                                     {/* Row number - centered */}
-  
-  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
-  
-
- at src/components/Spreadsheet.tsx:29:15 ]8;;https://biomejs.dev/linter/rules/no-unused-imports\lint/correctness/noUnusedImports]8;;\  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ Several of these imports are unused.
-  
-    27 │ import { useSpreadsheetKeyboardShortcuts } from '../hooks/useSpreadsheetKeyboardShortcuts';
-    28 │ import { useSpreadsheetSelection } from '../hooks/useSpreadsheetSelection';
-  > 29 │ import type { CellEdit, SpreadsheetProps } from '../types';
-       │               ^^^^^^^^
-    30 │ 
-    31 │ type SingleCellEdit = {
-  
-  ℹ Unused imports might be the result of an incomplete refactoring.
-  
-  ℹ Unsafe fix: Remove the unused imports.
-  
-    29 │ import·type·{·CellEdit,·SpreadsheetProps·}·from·'../types';
-       │               ----------                                   
-
- at src/components/SpreadsheetCell.tsx:54:5 ]8;;https://biomejs.dev/linter/rules/no-unused-function-parameters\lint/correctness/noUnusedFunctionParameters]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ This parameter is unused.
-  
-    52 │     onMouseDown,
-    53 │     onMouseEnter,
-  > 54 │     onChange,
-       │     ^^^^^^^^
-    55 │     onConfirm,
-    56 │     onCancel,
-  
-  ℹ Unused parameters might be the result of an incomplete refactoring.
-  
-
- at src/components/SpreadsheetFilterDropdown.tsx:188:9 ]8;;https://biomejs.dev/linter/rules/no-static-element-interactions\lint/a11y/noStaticElementInteractions]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ Static Elements should not be interactive.
-  
-    187 │     return (
-  > 188 │         <div
-        │         ^^^^
-  > 189 │             ref={dropdownRef}
-         ...
-  > 194 │             onClick={(e) => e.stopPropagation()}
-  > 195 │         >
-        │         ^
-    196 │             <div className="px-3 py-2 border-b border-gray-200 bg-gray-50">
-    197 │                 <span className="text-xs font-medium text-gray-700">Filter: {column.label}</span>
-  
-  ℹ To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
-  
-
- at src/components/SpreadsheetFilterDropdown.tsx:188:9 ]8;;https://biomejs.dev/linter/rules/use-key-with-click-events\lint/a11y/useKeyWithClickEvents]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
-  
-    187 │     return (
-  > 188 │         <div
-        │         ^^^^
-  > 189 │             ref={dropdownRef}
-         ...
-  > 194 │             onClick={(e) => e.stopPropagation()}
-  > 195 │         >
-        │         ^
-    196 │             <div className="px-3 py-2 border-b border-gray-200 bg-gray-50">
-    197 │                 <span className="text-xs font-medium text-gray-700">Filter: {column.label}</span>
-  
-  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
-  
-
- at src/hooks/useSpreadsheetSelection.ts:602:37 ]8;;https://biomejs.dev/linter/rules/no-global-is-nan\lint/suspicious/noGlobalIsNan]8;;\  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
-  
-    600 │                     if (column.type === 'number' && typeof cellValue === 'string') {
-    601 │                         const parsed = parseFloat(cellValue);
-  > 602 │                         cellValue = isNaN(parsed) ? cellValue : parsed;
-        │                                     ^^^^^
-    603 │                     }
-    604 │ 
-  
-  ℹ See ]8;;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#description\the MDN documentation]8;;\ for more details.
-  
-  ℹ Unsafe fix: Use Number.isNaN instead.
-  
-    600 600 │                       if (column.type === 'number' && typeof cellValue === 'string') {
-    601 601 │                           const parsed = parseFloat(cellValue);
-    602     │ - ························cellValue·=·isNaN(parsed)·?·cellValue·:·parsed;
-        602 │ + ························cellValue·=·Number.isNaN(parsed)·?·cellValue·:·parsed;
-    603 603 │                       }
-    604 604 │   
-  
-
- at src/components/Spreadsheet.stories.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ✖ Formatter would have printed the following content:
-  
-     489  489 │                   icon: <HiEye className="h-4 w-4" />,
-     490  490 │                   onClick: (row) => {
-     491      │ - ····················alert(`Viewing·user:·${row.name}\nEmail:·${row.email}\nDepartment:·${row.department}`);
-          491 │ + ····················alert(
-          492 │ + ························`Viewing·user:·${row.name}\nEmail:·${row.email}\nDepartment:·${row.department}`
-          493 │ + ····················);
-     492  494 │                   },
-     493  495 │               },
-    ········· │ 
-     533  535 │                   <div className="mb-4 text-sm text-gray-600">
-     534  536 │                       <p className="font-medium mb-2">Row Context Menu Example</p>
-     535      │ - ····················<p>Hover·over·a·row·and·click·the·3-dot·icon·(⋮)·to·see·the·context·menu·with·actions.</p>
-     536      │ - ····················<p·className="text-xs·mt-1·text-gray-500">Note:·Delete·is·only·visible·for·non-Active·users.</p>
-          537 │ + ····················<p>
-          538 │ + ························Hover·over·a·row·and·click·the·3-dot·icon·(⋮)·to·see·the·context·menu·with
-          539 │ + ························actions.
-          540 │ + ····················</p>
-          541 │ + ····················<p·className="text-xs·mt-1·text-gray-500">
-          542 │ + ························Note:·Delete·is·only·visible·for·non-Active·users.
-          543 │ + ····················</p>
-     537  544 │                   </div>
-     538  545 │                   <Spreadsheet
-  
-
- at src/components/Spreadsheet.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ✖ Formatter would have printed the following content:
-  
-     887  887 │                                                                       rowId={rowId}
-     888  888 │                                                                       items={rowContextMenuItems}
-     889      │ - ····································································compactMode={effectiveCompactMode}
-          889 │ + ····································································compactMode={
-          890 │ + ········································································effectiveCompactMode
-          891 │ + ····································································}
-     890  892 │                                                                   />
-     891  893 │                                                               )}
-  
-
-Checked 31 files in 25ms. No fixes applied.
-Found 2 errors.
-Found 7 warnings.
-check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ✖ Some errors were emitted while running checks.
-  
-
- ELIFECYCLE  Command failed with exit code 1.
+

package/dist/index.js

@@ -1685,11 +1685,33 @@ function RowIndexColumnHeader({
   isPinned = false,
   onHighlightClick,
   onPinClick,
-  hasColumnGroups = false,
+  isSecondRow = false,
   compactMode = false,
   className
 }) {
   const cellPadding = compactMode ? cellPaddingCompact3 : cellPaddingNormal3;
+  if (isSecondRow) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "th",
+      {
+        className: cn(
+          "border border-gray-200 text-center font-bold text-gray-700",
+          compactMode ? "text-[10px]" : "text-xs",
+          cellPadding,
+          isPinned ? "z-30" : "z-20",
+          className
+        ),
+        style: {
+          minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
+          width: `${ROW_INDEX_COLUMN_WIDTH}px`,
+          position: "sticky",
+          top: 0,
+          left: isPinned ? 0 : void 0,
+          backgroundColor: highlightColor || "rgb(243 244 246)"
+        }
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "th",
     {
@@ -1700,7 +1722,6 @@ function RowIndexColumnHeader({
         isPinned ? "z-30" : "z-20",
         className
       ),
-      rowSpan: hasColumnGroups ? 2 : void 0,
       style: {
         minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
         width: `${ROW_INDEX_COLUMN_WIDTH}px`,
@@ -4310,7 +4331,6 @@ function Spreadsheet({
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
                   onPinClick: () => handleTogglePin(ROW_INDEX_COLUMN_ID),
-                  hasColumnGroups: true,
                   compactMode: effectiveCompactMode
                 }
               ),
@@ -4363,7 +4383,15 @@ function Spreadsheet({
               })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
-              !columnGroups && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              columnGroups ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                RowIndexColumnHeader,
+                {
+                  highlightColor: rowIndexHighlightColor,
+                  isPinned: isRowIndexPinned,
+                  isSecondRow: true,
+                  compactMode: effectiveCompactMode
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
@@ -4371,7 +4399,6 @@ function Spreadsheet({
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
                   onPinClick: () => handleTogglePin(ROW_INDEX_COLUMN_ID),
-                  hasColumnGroups: false,
                   compactMode: effectiveCompactMode
                 }
               ),