@xcelsior/ui-spreadsheets 1.1.4 → 1.1.5

package/src/components/Spreadsheet.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { HiChevronDown, HiChevronRight, HiDuplicate, HiTrash } from 'react-icons/hi';
+import { HiChevronDown, HiChevronRight } from 'react-icons/hi';
 import { AiFillHighlight } from 'react-icons/ai';
 import { FaComment, FaRegComment } from 'react-icons/fa';
 import { cn } from '../utils';
@@ -13,6 +13,7 @@ import { ColorPickerPopover } from './ColorPickerPopover';
 import { type SpreadsheetSettings, SpreadsheetSettingsModal } from './SpreadsheetSettingsModal';
 import { AddCommentModal, ViewCommentsModal } from './CommentModals';
 import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
+import { RowContextMenu } from './RowContextMenu';
 import { Pagination } from '@xcelsior/design-system';
 import { useSpreadsheetFiltering } from '../hooks/useSpreadsheetFiltering';
 import { useSpreadsheetHighlighting } from '../hooks/useSpreadsheetHighlighting';
@@ -25,7 +26,7 @@ import { useSpreadsheetComments } from '../hooks/useSpreadsheetComments';
 import { useSpreadsheetUndoRedo } from '../hooks/useSpreadsheetUndoRedo';
 import { useSpreadsheetKeyboardShortcuts } from '../hooks/useSpreadsheetKeyboardShortcuts';
 import { useSpreadsheetSelection } from '../hooks/useSpreadsheetSelection';
-import type { CellEdit, CellPosition, SpreadsheetProps } from '../types';
+import type { CellEdit, SpreadsheetProps } from '../types';
 
 type SingleCellEdit = {
     rowId: string | number;
@@ -84,8 +85,6 @@ export function Spreadsheet<T extends Record<string, any>>({
     onFilterChange,
     onRowClick,
     onRowDoubleClick,
-    onRowClone,
-    onRowDelete,
     onAddCellComment,
     onToggleCommentResolved,
     onRowHighlight,
@@ -110,6 +109,7 @@ export function Spreadsheet<T extends Record<string, any>>({
     cellHighlights: externalCellHighlights,
     cellComments: externalCellComments,
     rowActions,
+    rowContextMenuItems,
     toolbarMenuItems,
     // Server-side mode props
     serverSide = false,
@@ -627,22 +627,6 @@ export function Spreadsheet<T extends Record<string, any>>({
         setEditingCell(null);
     }, [setEditingCell]);
 
-    // Handle row clone/duplicate
-    const handleRowClone = useCallback(
-        (row: T, rowId: string | number) => {
-            onRowClone?.(row, rowId);
-        },
-        [onRowClone]
-    );
-
-    // Handle row delete
-    const handleRowDelete = useCallback(
-        (row: T, rowId: string | number) => {
-            onRowDelete?.(row, rowId);
-        },
-        [onRowDelete]
-    );
-
     // Handle row index highlight (using unified column highlight with special ID)
     const handleRowIndexHighlightClick = useCallback(() => {
         setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
@@ -889,41 +873,24 @@ export function Spreadsheet<T extends Record<string, any>>({
                                                     }),
                                                 }}
                                             >
-                                                <div className="relative flex items-center justify-center">
-                                                    {/* Row number - always centered */}
+                                                <div className="relative flex items-center justify-center w-full h-full">
+                                                    {/* Row number - centered */}
                                                     <span>{displayIndex}</span>
 
-                                                    {/* Action buttons - absolute positioned to the right */}
-                                                    <div className="absolute right-0 flex items-center gap-0.5">
-                                                        {/* Clone/Duplicate Row */}
-                                                        {onRowClone && (
-                                                            <button
-                                                                type="button"
-                                                                onClick={(e) => {
-                                                                    e.stopPropagation();
-                                                                    handleRowClone(row, rowId);
-                                                                }}
-                                                                className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded"
-                                                                title="Duplicate row"
-                                                            >
-                                                                <HiDuplicate className="h-2.5 w-2.5 text-gray-500" />
-                                                            </button>
-                                                        )}
-
-                                                        {/* Delete Row */}
-                                                        {onRowDelete && (
-                                                            <button
-                                                                type="button"
-                                                                onClick={(e) => {
-                                                                    e.stopPropagation();
-                                                                    handleRowDelete(row, rowId);
-                                                                }}
-                                                                className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-red-100 rounded"
-                                                                title="Delete row"
-                                                            >
-                                                                <HiTrash className="h-2.5 w-2.5 text-gray-500 hover:text-red-500" />
-                                                            </button>
-                                                        )}
+                                                    {/* Action buttons - absolute overlay, spaced evenly */}
+                                                    <div className="absolute inset-0 flex items-center justify-evenly">
+                                                        {/* Context Menu (3-dot menu for row actions) */}
+                                                        {rowContextMenuItems &&
+                                                            rowContextMenuItems.length > 0 && (
+                                                                <RowContextMenu
+                                                                    row={row}
+                                                                    rowId={rowId}
+                                                                    items={rowContextMenuItems}
+                                                                    compactMode={
+                                                                        effectiveCompactMode
+                                                                    }
+                                                                />
+                                                            )}
 
                                                         {/* Highlight Row */}
                                                         {enableHighlighting && (

package/src/hooks/useSpreadsheetHighlighting.ts

@@ -91,7 +91,9 @@ export function useSpreadsheetHighlighting({
     const [rowHighlightsInternal, setRowHighlightsInternal] = useState<CellHighlight[]>([]);
 
     // Column-level highlights (internal state, can be overridden by external)
-    const [columnHighlightsInternal, setColumnHighlightsInternal] = useState<Record<string, string>>({});
+    const [columnHighlightsInternal, setColumnHighlightsInternal] = useState<
+        Record<string, string>
+    >({});
 
     // Picker states
     const [highlightPickerRow, setHighlightPickerRow] = useState<string | number | null>(null);
@@ -127,7 +129,9 @@ export function useSpreadsheetHighlighting({
                     if (existing) {
                         if (color === null) {
                             // Remove highlight
-                            return prev.filter((h) => !(h.rowId === rowId && h.columnId === columnId));
+                            return prev.filter(
+                                (h) => !(h.rowId === rowId && h.columnId === columnId)
+                            );
                         }
                         // Update color
                         return prev.map((h) =>

package/src/index.ts

@@ -7,6 +7,7 @@ export { SpreadsheetHeader } from './components/SpreadsheetHeader';
 export { SpreadsheetFilterDropdown } from './components/SpreadsheetFilterDropdown';
 export { SpreadsheetToolbar } from './components/SpreadsheetToolbar';
 export { SpreadsheetSettingsModal } from './components/SpreadsheetSettingsModal';
+export { RowContextMenu } from './components/RowContextMenu';
 export type { SpreadsheetSettings } from './components/SpreadsheetSettingsModal';
 
 // Types
@@ -31,5 +32,6 @@ export type {
     SelectionEdge,
     PaginationState,
     RowAction,
+    RowContextMenuItem,
     ToolbarMenuItem,
 } from './types';

package/src/types.ts

@@ -296,6 +296,29 @@ export interface RowAction<T = any> {
     className?: string;
 }
 
+/**
+ * Row context menu item configuration
+ * Used for the 3-dot menu that appears on row hover
+ */
+export interface RowContextMenuItem<T = any> {
+    /** Unique identifier */
+    id: string;
+    /** Display label for the menu item */
+    label: string;
+    /** Icon component to display next to the label */
+    icon?: React.ReactNode;
+    /** Callback when menu item is clicked */
+    onClick: (row: T, rowId: string | number) => void;
+    /** Whether the menu item is visible */
+    visible?: (row: T) => boolean;
+    /** Whether the menu item is disabled */
+    disabled?: (row: T) => boolean;
+    /** Variant for styling (e.g., destructive for delete actions) */
+    variant?: 'default' | 'destructive';
+    /** Custom className */
+    className?: string;
+}
+
 /**
  * Server-side pagination state for controlled pagination
  */
@@ -332,10 +355,6 @@ export interface SpreadsheetProps<T = any> {
     onRowClick?: (row: T, rowIndex: number) => void;
     /** Callback for row double click */
     onRowDoubleClick?: (row: T, rowIndex: number) => void;
-    /** Callback when a row is cloned/duplicated */
-    onRowClone?: (row: T, rowId: string | number) => void;
-    /** Callback when a row is deleted */
-    onRowDelete?: (row: T, rowId: string | number) => void;
     /** Callback when a cell comment is added */
     onAddCellComment?: (rowId: string | number, columnId: string, comment: string) => void;
     /** Callback when a comment's resolved status is toggled */
@@ -404,6 +423,12 @@ export interface SpreadsheetProps<T = any> {
     cellComments?: CellComment[];
     /** Custom row actions to display in the index column */
     rowActions?: RowAction<T>[];
+    /**
+     * Context menu items to display in the 3-dot menu for each row.
+     * These appear in a dropdown when the user clicks the 3-dot icon on row hover.
+     * Use this for actions like clone, delete, view, edit, etc.
+     */
+    rowContextMenuItems?: RowContextMenuItem<T>[];
     /** Custom menu items to display in the toolbar's "More" dropdown menu */
     toolbarMenuItems?: ToolbarMenuItem[];
 

package/.turbo/turbo-lint.log

@@ -1,196 +0,0 @@
-
-> @xcelsior/ui-spreadsheets@1.0.14 lint /Users/tuannguyen/Work/xcelsior-packages/packages/ui/ui-spreadsheets
-> biome check . && tsc
-
- 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.stories.tsx:333:34 ]8;;https://biomejs.dev/linter/rules/no-unused-function-parameters\lint/correctness/noUnusedFunctionParameters]8;;\  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ This parameter is unused.
-  
-    331 │         };
-    332 │ 
-  > 333 │         const handleRowDelete = (row: User, rowId: string | number) => {
-        │                                  ^^^
-    334 │             setData((prev) => prev.filter((r) => r.id !== rowId));
-    335 │         };
-  
-  ℹ Unused parameters might be the result of an incomplete refactoring.
-  
-  ℹ Unsafe fix: If this is intentional, prepend row with an underscore.
-  
-     331  331 │           };
-     332  332 │   
-     333      │ - ········const·handleRowDelete·=·(row:·User,·rowId:·string·|·number)·=>·{
-          333 │ + ········const·handleRowDelete·=·(_row:·User,·rowId:·string·|·number)·=>·{
-     334  334 │               setData((prev) => prev.filter((r) => r.id !== rowId));
-     335  335 │           };
-  
-
- at src/components/Spreadsheet.stories.tsx:385:34 ]8;;https://biomejs.dev/linter/rules/no-unused-function-parameters\lint/correctness/noUnusedFunctionParameters]8;;\  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ This parameter is unused.
-  
-    383 │         };
-    384 │ 
-  > 385 │         const handleRowDelete = (row: User, rowId: string | number) => {
-        │                                  ^^^
-    386 │             setData((prev) => prev.filter((r) => r.id !== rowId));
-    387 │         };
-  
-  ℹ Unused parameters might be the result of an incomplete refactoring.
-  
-  ℹ Unsafe fix: If this is intentional, prepend row with an underscore.
-  
-     383  383 │           };
-     384  384 │   
-     385      │ - ········const·handleRowDelete·=·(row:·User,·rowId:·string·|·number)·=>·{
-          385 │ + ········const·handleRowDelete·=·(_row:·User,·rowId:·string·|·number)·=>·{
-     386  386 │               setData((prev) => prev.filter((r) => r.id !== rowId));
-     387  387 │           };
-  
-
- at src/components/Spreadsheet.tsx:829:49 ]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.
-  
-    827 │                                             {/* Row Index Column */}
-    828 │                                             {effectiveShowRowIndex && (
-  > 829 │                                                 <td
-        │                                                 ^^^
-  > 830 │                                                     onClick={(e) => handleRowSelect(rowId, e)}
-         ...
-  > 856 │                                                     }}
-  > 857 │                                                 >
-        │                                                 ^
-    858 │                                                     <div className="relative flex items-center justify-center">
-    859 │                                                         {/* Row number - always centered */}
-  
-  ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
-  
-
- at src/components/Spreadsheet.tsx:27:15 ]8;;https://biomejs.dev/linter/rules/no-unused-imports\lint/correctness/noUnusedImports]8;;\  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ Several of these imports are unused.
-  
-    25 │ import { useSpreadsheetKeyboardShortcuts } from '../hooks/useSpreadsheetKeyboardShortcuts';
-    26 │ import { useSpreadsheetSelection } from '../hooks/useSpreadsheetSelection';
-  > 27 │ import type { CellEdit, CellPosition, SpreadsheetProps } from '../types';
-       │               ^^^^^^^^^^^^^^^^^^^^^^
-    28 │ 
-    29 │ type SingleCellEdit = {
-  
-  ℹ Unused imports might be the result of an incomplete refactoring.
-  
-  ℹ Unsafe fix: Remove the unused imports.
-  
-    27 │ import·type·{·CellEdit,·CellPosition,·SpreadsheetProps·}·from·'../types';
-       │               ------------------------                                   
-
- at src/components/Spreadsheet.tsx:329:9 ]8;;https://biomejs.dev/linter/rules/no-unused-variables\lint/correctness/noUnusedVariables]8;;\ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  ⚠ This variable setFocusedCell is unused.
-  
-    327 │     const {
-    328 │         focusedCell,
-  > 329 │         setFocusedCell,
-        │         ^^^^^^^^^^^^^^
-    330 │         editingCell,
-    331 │         setEditingCell,
-  
-  ℹ Unused variables are often the result of typos, incomplete refactors, or other sources of bugs.
-  
-
- 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 │   
-  
-
-Checked 31 files in 18ms. No fixes applied.
-Found 10 warnings.