@xcelsior/ui-spreadsheets 1.0.4 → 1.0.6

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Spreadsheet.tsx
-import { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef3, useState as useState11 } from "react";
 
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
 import React2 from "react";
@@ -157,7 +157,7 @@ function cn(...inputs) {
 }
 
 // src/components/SpreadsheetCell.tsx
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var cellPaddingCompact = "px-1.5 py-0.5";
 var cellPaddingNormal = "px-2 py-1";
@@ -335,31 +335,7 @@ var SpreadsheetCell = ({
             children: renderContent()
           }
         ),
-        hasComments && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onViewComments?.();
-            },
-            className: "absolute -right-1 p-0.5 hover:bg-gray-100 rounded z-10",
-            title: `${unresolvedCommentCount} unresolved comment(s)`,
-            children: [
-              /* @__PURE__ */ jsx(
-                FaComment,
-                {
-                  className: cn(
-                    "h-2.5 w-2.5",
-                    unresolvedCommentCount > 0 ? "text-amber-500" : "text-gray-400"
-                  )
-                }
-              ),
-              unresolvedCommentCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 bg-amber-500 text-white text-[6px] rounded-full w-2.5 h-2.5 flex items-center justify-center", children: unresolvedCommentCount })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "opacity-0 group-hover:opacity-100 flex items-center gap-0.5 transition-opacity shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
           value !== null && value !== void 0 && value !== "" && onCopyDown && /* @__PURE__ */ jsx(
             "button",
             {
@@ -368,7 +344,7 @@ var SpreadsheetCell = ({
                 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",
               children: /* @__PURE__ */ jsx(HiOutlineClipboardCopy, { className: "h-2.5 w-2.5 text-gray-500" })
             }
@@ -381,7 +357,7 @@ var SpreadsheetCell = ({
                 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",
               children: /* @__PURE__ */ jsx(HiOutlineClipboardCheck, { className: "h-2.5 w-2.5 text-green-600" })
             }
@@ -394,20 +370,35 @@ var SpreadsheetCell = ({
                 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",
               children: /* @__PURE__ */ jsx(
                 AiFillHighlight,
                 {
                   className: cn(
                     "h-2.5 w-2.5",
-                    highlightColor ? "text-amber-500" : "text-gray-400"
+                    highlightColor ? "text-amber-500" : "text-gray-500"
                   )
                 }
               )
             }
           ),
-          onAddComment && /* @__PURE__ */ jsx(
+          hasComments && onViewComments ? /* @__PURE__ */ jsxs(
+            "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`,
+              children: [
+                /* @__PURE__ */ jsx(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
+                unresolvedCommentCount > 0 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-amber-600", children: unresolvedCommentCount > 99 ? "99+" : unresolvedCommentCount })
+              ]
+            }
+          ) : onAddComment ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -415,17 +406,33 @@ var SpreadsheetCell = ({
                 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",
-              children: /* @__PURE__ */ jsx(FaRegComment, { className: "h-2.5 w-2.5 text-gray-400" })
+              children: /* @__PURE__ */ jsx(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
             }
-          )
+          ) : null
         ] })
       ] })
     }
   );
 };
 SpreadsheetCell.displayName = "SpreadsheetCell";
+var MemoizedSpreadsheetCell = memo(SpreadsheetCell, (prevProps, nextProps) => {
+  if (prevProps.isEditing !== nextProps.isEditing) return false;
+  if (prevProps.isFocused !== nextProps.isFocused) return false;
+  if (prevProps.value !== nextProps.value) return false;
+  if (prevProps.isRowSelected !== nextProps.isRowSelected) return false;
+  if (prevProps.isRowHovered !== nextProps.isRowHovered) return false;
+  if (prevProps.highlightColor !== nextProps.highlightColor) return false;
+  if (prevProps.hasComments !== nextProps.hasComments) return false;
+  if (prevProps.unresolvedCommentCount !== nextProps.unresolvedCommentCount) return false;
+  if (prevProps.isCopied !== nextProps.isCopied) return false;
+  if (prevProps.isPinned !== nextProps.isPinned) return false;
+  if (prevProps.leftOffset !== nextProps.leftOffset) return false;
+  if (prevProps.rightOffset !== nextProps.rightOffset) return false;
+  return true;
+});
+MemoizedSpreadsheetCell.displayName = "MemoizedSpreadsheetCell";
 
 // src/components/SpreadsheetFilterDropdown.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
@@ -1987,16 +1994,31 @@ var SpreadsheetSettingsModal = ({
 SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
 
 // src/components/CommentModals.tsx
+import { useState as useState6, useEffect as useEffect4 } from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function AddCommentModal({
   isOpen,
-  commentText,
   columnLabel,
-  onCommentTextChange,
   onAdd,
   onClose
 }) {
+  const [commentText, setCommentText] = useState6("");
+  useEffect4(() => {
+    if (!isOpen) {
+      setCommentText("");
+    }
+  }, [isOpen]);
   if (!isOpen) return null;
+  const handleAdd = () => {
+    if (commentText.trim()) {
+      onAdd(commentText);
+      setCommentText("");
+    }
+  };
+  const handleClose = () => {
+    setCommentText("");
+    onClose();
+  };
   return /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
     /* @__PURE__ */ jsxs9("h3", { className: "text-lg font-semibold mb-4", children: [
       "Add Comment",
@@ -2006,9 +2028,10 @@ function AddCommentModal({
       "textarea",
       {
         value: commentText,
-        onChange: (e) => onCommentTextChange(e.target.value),
+        onChange: (e) => setCommentText(e.target.value),
         placeholder: "Enter your comment...",
-        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"
+        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",
+        autoFocus: true
       }
     ),
     /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2 mt-4", children: [
@@ -2016,7 +2039,7 @@ function AddCommentModal({
         "button",
         {
           type: "button",
-          onClick: onClose,
+          onClick: handleClose,
           className: "px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
           children: "Cancel"
         }
@@ -2025,7 +2048,7 @@ function AddCommentModal({
         "button",
         {
           type: "button",
-          onClick: onAdd,
+          onClick: handleAdd,
           disabled: !commentText.trim(),
           className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
           children: "Add Comment"
@@ -2040,6 +2063,7 @@ function ViewCommentsModal({
   comments,
   columnLabel,
   onToggleResolved,
+  onAddComment,
   onClose
 }) {
   if (!isOpen) return null;
@@ -2092,7 +2116,16 @@ function ViewCommentsModal({
         comment.id
       )),
       comments.length === 0 && /* @__PURE__ */ jsx9("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
-    ] })
+    ] }),
+    onAddComment && /* @__PURE__ */ jsx9("div", { className: "mt-4 pt-4 border-t border-gray-200", children: /* @__PURE__ */ jsx9(
+      "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",
+        children: /* @__PURE__ */ jsx9("span", { children: "+ Add Comment" })
+      }
+    ) })
   ] }) });
 }
 ViewCommentsModal.displayName = "ViewCommentsModal";
@@ -2152,7 +2185,7 @@ KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
 import { Pagination } from "@xcelsior/design-system";
 
 // src/hooks/useSpreadsheetFiltering.ts
-import { useCallback as useCallback3, useMemo as useMemo2, useState as useState6 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState7 } from "react";
 import { FilterChain, LazyArray } from "@xcelsior/utils";
 function useSpreadsheetFiltering({
   data,
@@ -2163,13 +2196,13 @@ function useSpreadsheetFiltering({
   controlledFilters,
   controlledSortConfig
 }) {
-  const [internalFilters, setInternalFilters] = useState6(
+  const [internalFilters, setInternalFilters] = useState7(
     {}
   );
-  const [internalSortConfig, setInternalSortConfig] = useState6(
+  const [internalSortConfig, setInternalSortConfig] = useState7(
     null
   );
-  const [activeFilterColumn, setActiveFilterColumn] = useState6(null);
+  const [activeFilterColumn, setActiveFilterColumn] = useState7(null);
   const filters = controlledFilters ?? internalFilters;
   const sortConfig = controlledSortConfig !== void 0 ? controlledSortConfig : internalSortConfig;
   const applyTextCondition = useCallback3(
@@ -2444,15 +2477,14 @@ function useSpreadsheetFiltering({
 }
 
 // src/hooks/useSpreadsheetComments.ts
-import { useCallback as useCallback4, useState as useState7 } from "react";
+import { useCallback as useCallback4, useState as useState8 } from "react";
 function useSpreadsheetComments({
   externalCellComments,
   onAddCellComment
 } = {}) {
-  const [cellCommentsInternal, setCellCommentsInternal] = useState7([]);
-  const [commentModalCell, setCommentModalCell] = useState7(null);
-  const [commentText, setCommentText] = useState7("");
-  const [viewCommentsCell, setViewCommentsCell] = useState7(null);
+  const [cellCommentsInternal, setCellCommentsInternal] = useState8([]);
+  const [commentModalCell, setCommentModalCell] = useState8(null);
+  const [viewCommentsCell, setViewCommentsCell] = useState8(null);
   const cellComments = externalCellComments || cellCommentsInternal;
   const getCellComments = useCallback4(
     (rowId, columnId) => {
@@ -2475,10 +2507,10 @@ function useSpreadsheetComments({
     [cellComments]
   );
   const handleAddCellComment = useCallback4(
-    (rowId, columnId) => {
-      if (!commentText.trim()) return;
+    (rowId, columnId, text) => {
+      if (!text.trim()) return;
       if (onAddCellComment) {
-        onAddCellComment(rowId, columnId, commentText);
+        onAddCellComment(rowId, columnId, text);
       } else {
         setCellCommentsInternal((prev) => [
           ...prev,
@@ -2486,16 +2518,15 @@ function useSpreadsheetComments({
             id: `comment-${Date.now()}`,
             rowId,
             columnId,
-            text: commentText,
+            text,
             timestamp: /* @__PURE__ */ new Date(),
             resolved: false
           }
         ]);
       }
-      setCommentText("");
       setCommentModalCell(null);
     },
-    [commentText, onAddCellComment]
+    [onAddCellComment]
   );
   const handleToggleCommentResolved = useCallback4((commentId) => {
     setCellCommentsInternal(
@@ -2510,8 +2541,6 @@ function useSpreadsheetComments({
     // Add comment modal state
     commentModalCell,
     setCommentModalCell,
-    commentText,
-    setCommentText,
     // View comments modal state
     viewCommentsCell,
     setViewCommentsCell,
@@ -2524,16 +2553,16 @@ function useSpreadsheetComments({
 }
 
 // src/hooks/useSpreadsheetUndoRedo.ts
-import { useCallback as useCallback5, useState as useState8 } from "react";
+import { useCallback as useCallback5, useState as useState9 } from "react";
 function useSpreadsheetUndoRedo({
   enabled = true,
   maxStackSize = 50,
   autoSave = true
 }) {
-  const [undoStack, setUndoStack] = useState8([]);
-  const [redoStack, setRedoStack] = useState8([]);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState8(false);
-  const [saveStatus, setSaveStatus] = useState8("saved");
+  const [undoStack, setUndoStack] = useState9([]);
+  const [redoStack, setRedoStack] = useState9([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState9(false);
+  const [saveStatus, setSaveStatus] = useState9("saved");
   const pushToUndoStack = useCallback5(
     (snapshot) => {
       if (!enabled) return;
@@ -2623,7 +2652,7 @@ function useSpreadsheetUndoRedo({
 }
 
 // src/hooks/useSpreadsheetKeyboardShortcuts.ts
-import { useEffect as useEffect4, useState as useState9 } from "react";
+import { useEffect as useEffect5, useState as useState10 } from "react";
 function useSpreadsheetKeyboardShortcuts({
   onUndo,
   onRedo,
@@ -2635,10 +2664,10 @@ function useSpreadsheetKeyboardShortcuts({
   customShortcuts = [],
   enabled = true
 } = {}) {
-  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState9(false);
+  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState10(false);
   const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
   const modifierKey = isMac ? "\u2318" : "Ctrl";
-  useEffect4(() => {
+  useEffect5(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -2855,8 +2884,6 @@ function Spreadsheet({
     cellHasComments,
     commentModalCell,
     setCommentModalCell,
-    commentText,
-    setCommentText,
     viewCommentsCell,
     setViewCommentsCell,
     handleAddCellComment,
@@ -2881,15 +2908,15 @@ function Spreadsheet({
     enabled: enableUndoRedo,
     autoSave
   });
-  const [selectedRows, setSelectedRows] = useState10(/* @__PURE__ */ new Set());
-  const [lastSelectedRow, setLastSelectedRow] = useState10(null);
-  const [focusedCell, setFocusedCell] = useState10(null);
-  const [editingCell, setEditingCell] = useState10(null);
-  const [editValue, setEditValue] = useState10("");
-  const [hoveredRow, setHoveredRow] = useState10(null);
-  const [internalCurrentPage, setInternalCurrentPage] = useState10(1);
-  const [internalPageSize, setInternalPageSize] = useState10(defaultPageSize);
-  const [zoom, setZoom] = useState10(defaultZoom);
+  const [selectedRows, setSelectedRows] = useState11(/* @__PURE__ */ new Set());
+  const [lastSelectedRow, setLastSelectedRow] = useState11(null);
+  const [focusedCell, setFocusedCell] = useState11(null);
+  const [editingCell, setEditingCell] = useState11(null);
+  const [editValue, setEditValue] = useState11("");
+  const [hoveredRow, setHoveredRow] = useState11(null);
+  const [internalCurrentPage, setInternalCurrentPage] = useState11(1);
+  const [internalPageSize, setInternalPageSize] = useState11(defaultPageSize);
+  const [zoom, setZoom] = useState11(defaultZoom);
   const currentPage = controlledCurrentPage ?? internalCurrentPage;
   const pageSize = controlledPageSize ?? internalPageSize;
   const handlePageChange = useCallback6(
@@ -2913,8 +2940,8 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
-  const [showSettingsModal, setShowSettingsModal] = useState10(false);
-  const [spreadsheetSettings, setSpreadsheetSettings] = useState10({
+  const [showSettingsModal, setShowSettingsModal] = useState11(false);
+  const [spreadsheetSettings, setSpreadsheetSettings] = useState11({
     defaultPinnedColumns: [],
     defaultSort: null,
     defaultPageSize,
@@ -2925,7 +2952,7 @@ function Spreadsheet({
     pinRowIndex: false,
     rowIndexHighlightColor: void 0
   });
-  useEffect5(() => {
+  useEffect6(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
       defaultSort: sortConfig
@@ -3053,7 +3080,7 @@ function Spreadsheet({
   const tableRef = useRef3(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
-  useEffect5(() => {
+  useEffect6(() => {
     if (!serverSide && currentPage > totalPages) {
       setInternalCurrentPage(1);
     }
@@ -3346,52 +3373,9 @@ function Spreadsheet({
                           left: 0
                         }
                       },
-                      children: /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
-                        /* @__PURE__ */ jsx11("div", { className: "py-1 px-1", children: displayIndex }),
-                        cellHasComments(
-                          rowId,
-                          ROW_INDEX_COLUMN_ID
-                        ) && /* @__PURE__ */ jsxs11(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: (e) => {
-                              e.stopPropagation();
-                              setViewCommentsCell({
-                                rowId,
-                                columnId: ROW_INDEX_COLUMN_ID
-                              });
-                            },
-                            style: {
-                              top: "5px",
-                              right: "5px"
-                            },
-                            className: "absolute p-0.5 hover:bg-gray-100 rounded z-10",
-                            title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} unresolved comment(s)`,
-                            children: [
-                              /* @__PURE__ */ jsx11(
-                                FaComment,
-                                {
-                                  className: cn(
-                                    "h-2.5 w-2.5",
-                                    getCellUnresolvedCommentCount(
-                                      rowId,
-                                      ROW_INDEX_COLUMN_ID
-                                    ) > 0 ? "text-amber-500" : "text-gray-400"
-                                  )
-                                }
-                              ),
-                              getCellUnresolvedCommentCount(
-                                rowId,
-                                ROW_INDEX_COLUMN_ID
-                              ) > 0 && /* @__PURE__ */ jsx11("span", { className: "absolute -top-1 -right-1 bg-amber-500 text-white text-[6px] rounded-full w-2.5 h-2.5 flex items-center justify-center", children: getCellUnresolvedCommentCount(
-                                rowId,
-                                ROW_INDEX_COLUMN_ID
-                              ) })
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs11("div", { className: "absolute inset-x-0 bottom-0 opacity-0 group-hover:opacity-100 flex items-center justify-center gap-0.5 transition-opacity bg-white/90 py-0.5 border-t border-gray-100", children: [
+                      children: /* @__PURE__ */ jsxs11("div", { className: "relative flex items-center justify-center", children: [
+                        /* @__PURE__ */ jsx11("span", { children: displayIndex }),
+                        /* @__PURE__ */ jsxs11("div", { className: "absolute right-0 flex items-center gap-0.5", children: [
                           onRowClone && /* @__PURE__ */ jsx11(
                             "button",
                             {
@@ -3400,7 +3384,7 @@ function Spreadsheet({
                                 e.stopPropagation();
                                 handleRowClone(row, rowId);
                               },
-                              className: "p-0.5 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: "Duplicate row",
                               children: /* @__PURE__ */ jsx11(HiDuplicate, { className: "h-2.5 w-2.5 text-gray-500" })
                             }
@@ -3415,7 +3399,7 @@ function Spreadsheet({
                                   rowId
                                 );
                               },
-                              className: "p-0.5 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: "Highlight row",
                               children: /* @__PURE__ */ jsx11(
                                 AiFillHighlight,
@@ -3428,7 +3412,37 @@ function Spreadsheet({
                               )
                             }
                           ),
-                          enableComments && /* @__PURE__ */ jsx11(
+                          enableComments && (cellHasComments(
+                            rowId,
+                            ROW_INDEX_COLUMN_ID
+                          ) ? /* @__PURE__ */ jsxs11(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                setViewCommentsCell({
+                                  rowId,
+                                  columnId: ROW_INDEX_COLUMN_ID
+                                });
+                              },
+                              className: "p-0.5 bg-amber-100 hover:bg-amber-200 rounded transition-colors flex items-center gap-0.5",
+                              title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} comment(s) - click to view`,
+                              children: [
+                                /* @__PURE__ */ jsx11(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
+                                getCellUnresolvedCommentCount(
+                                  rowId,
+                                  ROW_INDEX_COLUMN_ID
+                                ) > 0 && /* @__PURE__ */ jsx11("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
+                                  rowId,
+                                  ROW_INDEX_COLUMN_ID
+                                ) > 99 ? "99+" : getCellUnresolvedCommentCount(
+                                  rowId,
+                                  ROW_INDEX_COLUMN_ID
+                                ) })
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx11(
                             "button",
                             {
                               type: "button",
@@ -3439,11 +3453,11 @@ function Spreadsheet({
                                   columnId: ROW_INDEX_COLUMN_ID
                                 });
                               },
-                              className: "p-0.5 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: "Add comment",
                               children: /* @__PURE__ */ jsx11(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
                             }
-                          ),
+                          )),
                           rowActions?.map((action) => {
                             if (action.visible && !action.visible(row))
                               return null;
@@ -3459,7 +3473,7 @@ function Spreadsheet({
                                   );
                                 },
                                 className: cn(
-                                  "p-0.5 hover:bg-gray-200 rounded",
+                                  "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-gray-200 rounded",
                                   action.className
                                 ),
                                 title: action.tooltip,
@@ -3480,7 +3494,7 @@ function Spreadsheet({
                     const isColPinned = isColumnPinned(column.id);
                     const colPinSide = getColumnPinSide(column.id);
                     return /* @__PURE__ */ jsx11(
-                      SpreadsheetCell,
+                      MemoizedSpreadsheetCell,
                       {
                         value: isEditing ? editValue : value,
                         column,
@@ -3555,12 +3569,9 @@ function Spreadsheet({
       AddCommentModal,
       {
         isOpen: commentModalCell !== null,
-        commentText,
         columnLabel: commentModalCell ? commentModalCell.columnId === ROW_INDEX_COLUMN_ID ? "Row #" : columns.find((c) => c.id === commentModalCell.columnId)?.label : void 0,
-        onCommentTextChange: setCommentText,
-        onAdd: () => commentModalCell !== null && handleAddCellComment(commentModalCell.rowId, commentModalCell.columnId),
+        onAdd: (text) => commentModalCell !== null && handleAddCellComment(commentModalCell.rowId, commentModalCell.columnId, text),
         onClose: () => {
-          setCommentText("");
           setCommentModalCell(null);
         }
       }
@@ -3572,6 +3583,11 @@ function Spreadsheet({
         comments: viewCommentsCell !== null ? getCellComments(viewCommentsCell.rowId, viewCommentsCell.columnId) : [],
         columnLabel: viewCommentsCell ? viewCommentsCell.columnId === ROW_INDEX_COLUMN_ID ? "Row #" : columns.find((c) => c.id === viewCommentsCell.columnId)?.label : void 0,
         onToggleResolved: handleToggleCommentResolved,
+        onAddComment: viewCommentsCell !== null ? () => {
+          const cell = viewCommentsCell;
+          setViewCommentsCell(null);
+          setCommentModalCell(cell);
+        } : void 0,
         onClose: () => setViewCommentsCell(null)
       }
     ),
@@ -3640,7 +3656,7 @@ function Spreadsheet({
 Spreadsheet.displayName = "Spreadsheet";
 export {
   Spreadsheet,
-  SpreadsheetCell,
+  MemoizedSpreadsheetCell as SpreadsheetCell,
   SpreadsheetFilterDropdown,
   SpreadsheetHeader,
   SpreadsheetSettingsModal,