@xcelsior/ui-spreadsheets 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-spreadsheets",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/ColumnHeaderActions.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
-import { HiColorSwatch, HiFilter } from 'react-icons/hi';
+import { HiFilter } from 'react-icons/hi';
+import { AiFillHighlight } from 'react-icons/ai';
 import { MdOutlinePushPin, MdPushPin } from 'react-icons/md';
 import { cn } from '../utils';
 
@@ -105,7 +106,7 @@ export function ColumnHeaderActions({
                     )}
                     title={highlightTitle}
                 >
-                    <HiColorSwatch className="h-3 w-3" />
+                    <AiFillHighlight className="h-3 w-3" />
                 </button>
             )}
 

package/src/components/CommentModals.tsx

@@ -8,6 +8,8 @@ export interface AddCommentModalProps {
     isOpen: boolean;
     /** Current comment text */
     commentText: string;
+    /** Column label for the cell (optional) */
+    columnLabel?: string;
     /** Callback to update comment text */
     onCommentTextChange: (text: string) => void;
     /** Callback to add the comment */
@@ -19,6 +21,7 @@ export interface AddCommentModalProps {
 export function AddCommentModal({
     isOpen,
     commentText,
+    columnLabel,
     onCommentTextChange,
     onAdd,
     onClose,
@@ -28,7 +31,9 @@ export function AddCommentModal({
     return (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
             <div className="bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4">
-                <h3 className="text-lg font-semibold mb-4">Add Row Comment</h3>
+                <h3 className="text-lg font-semibold mb-4">
+                    Add Comment{columnLabel ? ` - ${columnLabel}` : ''}
+                </h3>
                 <textarea
                     value={commentText}
                     onChange={(e) => onCommentTextChange(e.target.value)}
@@ -66,8 +71,12 @@ export interface ViewCommentsModalProps {
     isOpen: boolean;
     /** Comments to display */
     comments: CellComment[];
+    /** Column label for the cell (optional) */
+    columnLabel?: string;
     /** Callback to toggle comment resolved status */
     onToggleResolved: (commentId: string) => void;
+    /** Callback to add a new comment */
+    onAddComment?: () => void;
     /** Callback to close the modal */
     onClose: () => void;
 }
@@ -75,7 +84,9 @@ export interface ViewCommentsModalProps {
 export function ViewCommentsModal({
     isOpen,
     comments,
+    columnLabel,
     onToggleResolved,
+    onAddComment,
     onClose,
 }: ViewCommentsModalProps) {
     if (!isOpen) return null;
@@ -84,7 +95,9 @@ export function ViewCommentsModal({
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
             <div className="bg-white rounded-lg shadow-xl p-6 w-[480px] max-w-full mx-4 max-h-[80vh] flex flex-col">
                 <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-semibold">Row Comments</h3>
+                    <h3 className="text-lg font-semibold">
+                        Comments{columnLabel ? ` - ${columnLabel}` : ''}
+                    </h3>
                     <button
                         type="button"
                         onClick={onClose}
@@ -126,9 +139,21 @@ export function ViewCommentsModal({
                         </div>
                     ))}
                     {comments.length === 0 && (
-                        <p className="text-center text-gray-500 py-8">No comments for this row.</p>
+                        <p className="text-center text-gray-500 py-8">No comments for this cell.</p>
                     )}
                 </div>
+                {/* Add Comment button at the bottom */}
+                {onAddComment && (
+                    <div className="mt-4 pt-4 border-t border-gray-200">
+                        <button
+                            type="button"
+                            onClick={onAddComment}
+                            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"
+                        >
+                            <span>+ Add Comment</span>
+                        </button>
+                    </div>
+                )}
             </div>
         </div>
     );

package/src/components/Spreadsheet.stories.tsx

@@ -215,7 +215,6 @@ A feature-rich spreadsheet component with Excel-like functionality.
         onRowClick: { action: 'onRowClick' },
         onRowDoubleClick: { action: 'onRowDoubleClick' },
         onRowClone: { action: 'onRowClone' },
-        onAddRowComment: { action: 'onAddRowComment' },
         onRowHighlight: { action: 'onRowHighlight' },
         showToolbar: {
             control: 'boolean',
@@ -525,7 +524,7 @@ export const WithHighlightsAndComments: Story = {
 // Large dataset (performance test)
 export const LargeDataset: Story = {
     args: {
-        data: Array.from({ length: 1000 }, (_, i) => ({
+        data: Array.from({ length: 3000 }, (_, i) => ({
             id: i + 1,
             name: `User ${i + 1}`,
             email: `user${i + 1}@example.com`,