@xcelsior/ui-spreadsheets 1.0.3 → 1.0.5

package/src/components/SpreadsheetCell.tsx

@@ -1,12 +1,8 @@
 import type React from 'react';
 import { useState, useRef, useEffect } from 'react';
-import {
-    HiOutlineClipboardCopy,
-    HiOutlineClipboardCheck,
-    HiOutlineAnnotation,
-    HiOutlineChatAlt,
-    HiOutlinePencil,
-} from 'react-icons/hi';
+import { HiOutlineClipboardCopy, HiOutlineClipboardCheck } from 'react-icons/hi';
+import { AiFillHighlight } from 'react-icons/ai';
+import { FaComment, FaRegComment } from 'react-icons/fa';
 import { cn } from '../utils';
 import type { SpreadsheetCellProps } from '../types';
 
@@ -225,7 +221,7 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             {isEditing ? (
                 renderEditInput()
             ) : (
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-1 relative">
                     {/* Main content */}
                     <div
                         className={cn(
@@ -238,34 +234,9 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                         {renderContent()}
                     </div>
 
-                    {/* Comment indicator */}
-                    {hasComments && (
-                        <button
-                            type="button"
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                onViewComments?.();
-                            }}
-                            className="p-0.5 hover:bg-gray-100 rounded relative shrink-0"
-                            title={`${unresolvedCommentCount} unresolved comment(s)`}
-                        >
-                            <HiOutlineChatAlt
-                                className={cn(
-                                    'h-3 w-3',
-                                    unresolvedCommentCount > 0 ? 'text-amber-500' : 'text-gray-400'
-                                )}
-                            />
-                            {unresolvedCommentCount > 0 && (
-                                <span className="absolute -top-1 -right-1 bg-amber-500 text-white text-[8px] rounded-full w-3 h-3 flex items-center justify-center">
-                                    {unresolvedCommentCount}
-                                </span>
-                            )}
-                        </button>
-                    )}
-
-                    {/* Action buttons - show on hover */}
-                    <div className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 transition-opacity shrink-0">
-                        {/* Copy down button */}
+                    {/* Action buttons - show on hover, except comment indicator which is always visible */}
+                    <div className="flex items-center gap-0.5 shrink-0">
+                        {/* Copy down button - hover only */}
                         {value !== null && value !== undefined && value !== '' && onCopyDown && (
                             <button
                                 type="button"
@@ -273,14 +244,14 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                                     e.stopPropagation();
                                     onCopyDown();
                                 }}
-                                className="p-0.5 bg-gray-100 hover:bg-gray-200 rounded"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded"
                                 title="Copy value down to rows below"
                             >
                                 <HiOutlineClipboardCopy className="h-2.5 w-2.5 text-gray-500" />
                             </button>
                         )}
 
-                        {/* Copy to selected button */}
+                        {/* Copy to selected button - hover only */}
                         {hasSelectedRows &&
                             value !== null &&
                             value !== undefined &&
@@ -292,14 +263,14 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                                         e.stopPropagation();
                                         onCopyToSelected();
                                     }}
-                                    className="p-0.5 bg-green-100 hover:bg-green-200 rounded"
+                                    className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-green-100 hover:bg-green-200 rounded"
                                     title="Copy to selected rows"
                                 >
                                     <HiOutlineClipboardCheck className="h-2.5 w-2.5 text-green-600" />
                                 </button>
                             )}
 
-                        {/* Highlight button */}
+                        {/* Highlight button - hover only */}
                         {onHighlight && (
                             <button
                                 type="button"
@@ -307,32 +278,51 @@ export const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                                     e.stopPropagation();
                                     onHighlight();
                                 }}
-                                className="p-0.5 hover:bg-gray-100 rounded"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded"
                                 title="Highlight cell"
                             >
-                                <HiOutlinePencil
+                                <AiFillHighlight
                                     className={cn(
                                         'h-2.5 w-2.5',
-                                        highlightColor ? 'text-amber-500' : 'text-gray-400'
+                                        highlightColor ? 'text-amber-500' : 'text-gray-500'
                                     )}
                                 />
                             </button>
                         )}
 
-                        {/* Add comment button */}
-                        {onAddComment && (
+                        {/* Comment button - always visible when has comments, hover only when adding */}
+                        {hasComments && onViewComments ? (
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onViewComments();
+                                }}
+                                className="p-0.5 bg-amber-100 hover:bg-amber-200 rounded transition-colors flex items-center gap-0.5"
+                                title={`${unresolvedCommentCount} comment(s) - click to view`}
+                            >
+                                <FaComment className="h-2.5 w-2.5 text-amber-500" />
+                                {unresolvedCommentCount > 0 && (
+                                    <span className="text-[9px] font-medium text-amber-600">
+                                        {unresolvedCommentCount > 99
+                                            ? '99+'
+                                            : unresolvedCommentCount}
+                                    </span>
+                                )}
+                            </button>
+                        ) : onAddComment ? (
                             <button
                                 type="button"
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     onAddComment();
                                 }}
-                                className="p-0.5 hover:bg-gray-100 rounded"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded"
                                 title="Add comment"
                             >
-                                <HiOutlineAnnotation className="h-2.5 w-2.5 text-gray-400" />
+                                <FaRegComment className="h-2.5 w-2.5 text-gray-500" />
                             </button>
-                        )}
+                        ) : null}
                     </div>
                 </div>
             )}

package/src/hooks/useSpreadsheetComments.ts

@@ -1,92 +1,94 @@
 import { useCallback, useState } from 'react';
-import type { CellComment } from '../types';
+import type { CellComment, CellPosition } from '../types';
 
 export interface UseSpreadsheetCommentsOptions {
-    /** External row comments (controlled mode) */
-    externalRowComments?: CellComment[];
-    /** Callback when a row comment is added (controlled mode) */
-    onAddRowComment?: (rowId: string | number, comment: string) => void;
+    /** External cell comments (controlled mode) */
+    externalCellComments?: CellComment[];
+    /** Callback when a cell comment is added (controlled mode) */
+    onAddCellComment?: (rowId: string | number, columnId: string, comment: string) => void;
 }
 
 export interface UseSpreadsheetCommentsReturn {
     // Comments data
-    rowComments: CellComment[];
-    getRowComments: (rowId: string | number) => CellComment[];
-    getUnresolvedCommentCount: (rowId: string | number) => number;
+    cellComments: CellComment[];
+    getCellComments: (rowId: string | number, columnId: string) => CellComment[];
+    getCellUnresolvedCommentCount: (rowId: string | number, columnId: string) => number;
 
     // Add comment modal state
-    commentModalRow: string | number | null;
-    setCommentModalRow: (rowId: string | number | null) => void;
+    commentModalCell: CellPosition | null;
+    setCommentModalCell: (cell: CellPosition | null) => void;
     commentText: string;
     setCommentText: (text: string) => void;
 
     // View comments modal state
-    viewCommentsRow: string | number | null;
-    setViewCommentsRow: (rowId: string | number | null) => void;
+    viewCommentsCell: CellPosition | null;
+    setViewCommentsCell: (cell: CellPosition | null) => void;
 
     // Actions
-    handleAddRowComment: (rowId: string | number) => void;
+    handleAddCellComment: (rowId: string | number, columnId: string) => void;
     handleToggleCommentResolved: (commentId: string) => void;
 
     // Utility
-    hasComments: (rowId: string | number) => boolean;
+    cellHasComments: (rowId: string | number, columnId: string) => boolean;
 }
 
 export function useSpreadsheetComments({
-    externalRowComments,
-    onAddRowComment,
+    externalCellComments,
+    onAddCellComment,
 }: UseSpreadsheetCommentsOptions = {}): UseSpreadsheetCommentsReturn {
     // Internal comments state
-    const [rowCommentsInternal, setRowCommentsInternal] = useState<CellComment[]>([]);
+    const [cellCommentsInternal, setCellCommentsInternal] = useState<CellComment[]>([]);
 
     // Modal states
-    const [commentModalRow, setCommentModalRow] = useState<string | number | null>(null);
+    const [commentModalCell, setCommentModalCell] = useState<CellPosition | null>(null);
     const [commentText, setCommentText] = useState('');
-    const [viewCommentsRow, setViewCommentsRow] = useState<string | number | null>(null);
+    const [viewCommentsCell, setViewCommentsCell] = useState<CellPosition | null>(null);
 
     // Use external comments if provided, otherwise use internal
-    const rowComments = externalRowComments || rowCommentsInternal;
+    const cellComments = externalCellComments || cellCommentsInternal;
 
-    // Get comments for a specific row
-    const getRowComments = useCallback(
-        (rowId: string | number): CellComment[] => {
-            return rowComments.filter((c) => c.rowId === rowId && !c.columnId);
+    // Get comments for a specific cell
+    const getCellComments = useCallback(
+        (rowId: string | number, columnId: string): CellComment[] => {
+            return cellComments.filter((c) => c.rowId === rowId && c.columnId === columnId);
         },
-        [rowComments]
+        [cellComments]
     );
 
-    // Get unresolved comment count for a row
-    const getUnresolvedCommentCount = useCallback(
-        (rowId: string | number): number => {
-            return rowComments.filter((c) => c.rowId === rowId && !c.columnId && !c.resolved)
-                .length;
+    // Get unresolved comment count for a cell
+    const getCellUnresolvedCommentCount = useCallback(
+        (rowId: string | number, columnId: string): number => {
+            return cellComments.filter(
+                (c) => c.rowId === rowId && c.columnId === columnId && !c.resolved
+            ).length;
         },
-        [rowComments]
+        [cellComments]
     );
 
-    // Check if row has comments
-    const hasComments = useCallback(
-        (rowId: string | number): boolean => {
-            return rowComments.some((c) => c.rowId === rowId && !c.columnId);
+    // Check if cell has comments
+    const cellHasComments = useCallback(
+        (rowId: string | number, columnId: string): boolean => {
+            return cellComments.some((c) => c.rowId === rowId && c.columnId === columnId);
         },
-        [rowComments]
+        [cellComments]
     );
 
-    // Add a row comment
-    const handleAddRowComment = useCallback(
-        (rowId: string | number) => {
+    // Add a cell comment
+    const handleAddCellComment = useCallback(
+        (rowId: string | number, columnId: string) => {
             if (!commentText.trim()) return;
 
-            if (onAddRowComment) {
+            if (onAddCellComment) {
                 // Controlled mode
-                onAddRowComment(rowId, commentText);
+                onAddCellComment(rowId, columnId, commentText);
             } else {
                 // Uncontrolled mode
-                setRowCommentsInternal((prev) => [
+                setCellCommentsInternal((prev) => [
                     ...prev,
                     {
                         id: `comment-${Date.now()}`,
                         rowId,
+                        columnId,
                         text: commentText,
                         timestamp: new Date(),
                         resolved: false,
@@ -94,39 +96,39 @@ export function useSpreadsheetComments({
                 ]);
             }
             setCommentText('');
-            setCommentModalRow(null);
+            setCommentModalCell(null);
         },
-        [commentText, onAddRowComment]
+        [commentText, onAddCellComment]
     );
 
     // Toggle comment resolved status
     const handleToggleCommentResolved = useCallback((commentId: string) => {
-        setRowCommentsInternal((prev) =>
+        setCellCommentsInternal((prev) =>
             prev.map((c) => (c.id === commentId ? { ...c, resolved: !c.resolved } : c))
         );
     }, []);
 
     return {
         // Comments data
-        rowComments,
-        getRowComments,
-        getUnresolvedCommentCount,
+        cellComments,
+        getCellComments,
+        getCellUnresolvedCommentCount,
 
         // Add comment modal state
-        commentModalRow,
-        setCommentModalRow,
+        commentModalCell,
+        setCommentModalCell,
         commentText,
         setCommentText,
 
         // View comments modal state
-        viewCommentsRow,
-        setViewCommentsRow,
+        viewCommentsCell,
+        setViewCommentsCell,
 
         // Actions
-        handleAddRowComment,
+        handleAddCellComment,
         handleToggleCommentResolved,
 
         // Utility
-        hasComments,
+        cellHasComments,
     };
 }

package/src/hooks/useSpreadsheetFiltering.ts

@@ -38,6 +38,8 @@ export interface UseSpreadsheetFilteringReturn<T> {
     setActiveFilterColumn: (columnId: string | null) => void;
     handleFilterChange: (columnId: string, filter: SpreadsheetColumnFilter | undefined) => void;
     handleSort: (columnId: string) => void;
+    setSortConfig: (config: SpreadsheetSortConfig | null) => void;
+    clearSort: () => void;
     clearAllFilters: () => void;
     hasActiveFilters: boolean;
 }
@@ -368,10 +370,21 @@ export function useSpreadsheetFiltering<T extends Record<string, any>>({
 
     const handleSort = useCallback(
         (columnId: string) => {
-            const newSortConfig: SpreadsheetSortConfig =
-                sortConfig?.columnId === columnId
-                    ? { columnId, direction: sortConfig.direction === 'asc' ? 'desc' : 'asc' }
-                    : { columnId, direction: 'asc' };
+            let newSortConfig: SpreadsheetSortConfig | null;
+
+            if (sortConfig?.columnId === columnId) {
+                // Cycle through: asc → desc → null (clear)
+                if (sortConfig.direction === 'asc') {
+                    newSortConfig = { columnId, direction: 'desc' };
+                } else {
+                    // Currently desc, clear the sort
+                    newSortConfig = null;
+                }
+            } else {
+                // Different column, start with asc
+                newSortConfig = { columnId, direction: 'asc' };
+            }
+
             // Only update internal state if not controlled
             if (controlledSortConfig === undefined) {
                 setInternalSortConfig(newSortConfig);
@@ -381,6 +394,25 @@ export function useSpreadsheetFiltering<T extends Record<string, any>>({
         [sortConfig, onSortChange, controlledSortConfig]
     );
 
+    const clearSort = useCallback(() => {
+        // Only update internal state if not controlled
+        if (controlledSortConfig === undefined) {
+            setInternalSortConfig(null);
+        }
+        onSortChange?.(null);
+    }, [onSortChange, controlledSortConfig]);
+
+    const setSortConfig = useCallback(
+        (config: SpreadsheetSortConfig | null) => {
+            // Only update internal state if not controlled
+            if (controlledSortConfig === undefined) {
+                setInternalSortConfig(config);
+            }
+            onSortChange?.(config);
+        },
+        [onSortChange, controlledSortConfig]
+    );
+
     const clearAllFilters = useCallback(() => {
         // Only update internal state if not controlled
         if (controlledFilters === undefined) {
@@ -399,6 +431,8 @@ export function useSpreadsheetFiltering<T extends Record<string, any>>({
         setActiveFilterColumn,
         handleFilterChange,
         handleSort,
+        setSortConfig,
+        clearSort,
         clearAllFilters,
         hasActiveFilters,
     };

package/src/hooks/useSpreadsheetHighlighting.ts

@@ -40,7 +40,11 @@ export interface UseSpreadsheetHighlightingReturn {
     // Cell highlights
     cellHighlights: CellHighlight[];
     getCellHighlight: (rowId: string | number, columnId: string) => string | undefined;
-    handleCellHighlightToggle: (rowId: string | number, columnId: string, color?: string) => void;
+    handleCellHighlightToggle: (
+        rowId: string | number,
+        columnId: string,
+        color?: string | null
+    ) => void;
 
     // Row highlights
     rowHighlights: CellHighlight[];
@@ -57,6 +61,8 @@ export interface UseSpreadsheetHighlightingReturn {
     setHighlightPickerRow: (rowId: string | number | null) => void;
     highlightPickerColumn: string | null;
     setHighlightPickerColumn: (columnId: string | null) => void;
+    highlightPickerCell: { rowId: string | number; columnId: string } | null;
+    setHighlightPickerCell: (cell: { rowId: string | number; columnId: string } | null) => void;
 
     // Utility
     clearAllHighlights: () => void;
@@ -81,6 +87,10 @@ export function useSpreadsheetHighlighting({
     // Picker states
     const [highlightPickerRow, setHighlightPickerRow] = useState<string | number | null>(null);
     const [highlightPickerColumn, setHighlightPickerColumn] = useState<string | null>(null);
+    const [highlightPickerCell, setHighlightPickerCell] = useState<{
+        rowId: string | number;
+        columnId: string;
+    } | null>(null);
 
     // Use external row highlights if provided, otherwise use internal
     const rowHighlights = externalRowHighlights || rowHighlightsInternal;
@@ -95,14 +105,25 @@ export function useSpreadsheetHighlighting({
 
     // Toggle cell highlight
     const handleCellHighlightToggle = useCallback(
-        (rowId: string | number, columnId: string, color: string = '#fef08a') => {
+        (rowId: string | number, columnId: string, color: string | null = '#fef08a') => {
             setCellHighlights((prev) => {
                 const existing = prev.find((h) => h.rowId === rowId && h.columnId === columnId);
                 if (existing) {
-                    return prev.filter((h) => !(h.rowId === rowId && h.columnId === columnId));
+                    if (color === null) {
+                        // Remove highlight
+                        return prev.filter((h) => !(h.rowId === rowId && h.columnId === columnId));
+                    }
+                    // Update color
+                    return prev.map((h) =>
+                        h.rowId === rowId && h.columnId === columnId ? { ...h, color } : h
+                    );
+                }
+                if (color) {
+                    return [...prev, { rowId, columnId, color }];
                 }
-                return [...prev, { rowId, columnId, color }];
+                return prev;
             });
+            setHighlightPickerCell(null);
         },
         []
     );
@@ -194,6 +215,8 @@ export function useSpreadsheetHighlighting({
         setHighlightPickerRow,
         highlightPickerColumn,
         setHighlightPickerColumn,
+        highlightPickerCell,
+        setHighlightPickerCell,
 
         // Utility
         clearAllHighlights,

package/src/types.ts

@@ -312,8 +312,8 @@ export interface SpreadsheetProps<T = any> {
     onRowDoubleClick?: (row: T, rowIndex: number) => void;
     /** Callback when a row is cloned/duplicated */
     onRowClone?: (row: T, rowId: string | number) => void;
-    /** Callback when a row comment is added */
-    onAddRowComment?: (rowId: string | number, comment: string) => void;
+    /** Callback when a cell comment is added */
+    onAddCellComment?: (rowId: string | number, columnId: string, comment: string) => void;
     /** Callback when row highlight is toggled */
     onRowHighlight?: (rowId: string | number, color: string | null) => void;
     /** Whether to show the toolbar */
@@ -350,8 +350,8 @@ export interface SpreadsheetProps<T = any> {
     emptyMessage?: string;
     /** Row highlights (externally controlled) */
     rowHighlights?: CellHighlight[];
-    /** Row comments (externally controlled) */
-    rowComments?: CellComment[];
+    /** Cell comments (externally controlled) */
+    cellComments?: CellComment[];
     /** Custom row actions to display in the index column */
     rowActions?: RowAction<T>[];
 

package/.turbo/turbo-build.log

@@ -1,22 +0,0 @@
-
-> @xcelsior/ui-spreadsheets@1.0.3 build /home/circleci/repo/packages/ui/ui-spreadsheets
-> tsup && tsc --noEmit
-
-CLI Building entry: src/index.ts
-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 Target: es2020
-CLI Cleaning output folder
-CJS Build start
-ESM Build start
-CJS dist/index.js     151.12 KB
-CJS dist/index.js.map 2.63 MB
-CJS ⚡️ Build success in 576ms
-ESM dist/index.mjs     140.30 KB
-ESM dist/index.mjs.map 2.63 MB
-ESM ⚡️ Build success in 577ms
-DTS Build start
-DTS ⚡️ Build success in 8502ms
-DTS dist/index.d.ts  22.18 KB
-DTS dist/index.d.mts 22.18 KB