@xcelsior/ui-spreadsheets 1.1.4 → 1.1.6

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[];