@xcelsior/ui-spreadsheets 1.1.5 → 1.1.7

package/.turbo/turbo-build.log

@@ -1,28 +1,28 @@
 
-> @xcelsior/ui-spreadsheets@1.1.5 build /home/circleci/repo/packages/ui/ui-spreadsheets
+> @xcelsior/ui-spreadsheets@1.1.4 build /Users/tuannguyen/Work/xcelsior-packages/packages/ui/ui-spreadsheets
 > tsup && tsc --noEmit
 
 CLI Building entry: src/index.ts, src/styles/globals.css
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.1
-CLI Using tsup config: /home/circleci/repo/packages/ui/ui-spreadsheets/tsup.config.ts
+CLI Using tsup config: /Users/tuannguyen/Work/xcelsior-packages/packages/ui/ui-spreadsheets/tsup.config.ts
 CLI Target: es2020
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-DTS 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 892ms
-CJS dist/index.js               173.50 KB
-CJS dist/styles/globals.css     33.16 KB
-CJS dist/index.js.map           4.65 MB
-CJS dist/styles/globals.css.map 55.29 KB
-CJS ⚡️ Build success in 893ms
-DTS ⚡️ Build success in 5596ms
-DTS dist/styles/globals.d.ts  13.00 B
-DTS dist/index.d.ts           26.27 KB
-DTS dist/styles/globals.d.mts 13.00 B
-DTS dist/index.d.mts          26.27 KB
+ESM ⚡️ Build success in 396ms
+DTS ⚡️ Build success in 2168ms
+DTS dist/styles/globals.d.ts  13.00 B
+DTS dist/index.d.ts           26.27 KB
+DTS dist/styles/globals.d.mts 13.00 B
+DTS dist/index.d.mts          26.27 KB

package/.turbo/turbo-lint.log

@@ -0,0 +1,185 @@
+
+> @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.d.mts

@@ -24,7 +24,7 @@ interface SpreadsheetColumn<T = any> {
     /** Whether the column can be pinned */
     pinnable?: boolean;
     /** Type of data in the column (for filtering/formatting) */
-    type?: 'text' | 'number' | 'date' | 'select' | 'boolean';
+    type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
     /** Options for select type columns */
     options?: string[];
     /** Custom render function for cell content */

package/dist/index.d.ts

@@ -24,7 +24,7 @@ interface SpreadsheetColumn<T = any> {
     /** Whether the column can be pinned */
     pinnable?: boolean;
     /** Type of data in the column (for filtering/formatting) */
-    type?: 'text' | 'number' | 'date' | 'select' | 'boolean';
+    type?: 'text' | 'number' | 'date' | 'select' | 'boolean' | 'checkbox';
     /** Options for select type columns */
     options?: string[];
     /** Custom render function for cell content */

package/dist/index.js

@@ -257,10 +257,31 @@ var SpreadsheetCell = ({
     if (isRowHovered) return "rgb(243 244 246)";
     return "white";
   };
+  const handleCheckboxChange = (e) => {
+    e.stopPropagation();
+    const newValue = e.target.checked;
+    onConfirm?.(newValue);
+  };
   const renderContent = () => {
     if (column.render) {
       return column.render(value, row, rowIndex);
     }
+    if (column.type === "checkbox") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(value),
+          onChange: handleCheckboxChange,
+          onClick: (e) => e.stopPropagation(),
+          disabled: !isEditable,
+          className: cn(
+            "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer",
+            !isEditable && "cursor-not-allowed opacity-60"
+          )
+        }
+      );
+    }
     if (value === null || value === void 0 || value === "") {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-gray-400", children: "-" });
     }
@@ -273,6 +294,9 @@ var SpreadsheetCell = ({
     return String(value);
   };
   const renderEditInput = () => {
+    if (column.type === "checkbox") {
+      return renderContent();
+    }
     if (column.type === "select" && column.options) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "select",
@@ -2260,7 +2284,10 @@ function RowContextMenu({
         return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           import_design_system.ContextMenuItem,
           {
-            onClick: () => item.onClick(row, rowId),
+            onClick: (e) => {
+              e.stopPropagation();
+              item.onClick(row, rowId);
+            },
             disabled: isDisabled,
             className: `${variantClass} ${item.className || ""}`,
             children: [