@xcelsior/ui-spreadsheets 1.0.5 → 1.0.7

package/dist/index.js

@@ -31,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Spreadsheet: () => Spreadsheet,
-  SpreadsheetCell: () => SpreadsheetCell,
+  SpreadsheetCell: () => MemoizedSpreadsheetCell,
   SpreadsheetFilterDropdown: () => SpreadsheetFilterDropdown,
   SpreadsheetHeader: () => SpreadsheetHeader,
   SpreadsheetSettingsModal: () => SpreadsheetSettingsModal,
@@ -40,7 +40,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Spreadsheet.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
 var import_react2 = __toESM(require("react"));
@@ -253,12 +253,11 @@ var SpreadsheetCell = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
-      onConfirm?.();
+      onConfirm?.(localValue);
     } else if (e.key === "Escape") {
       e.preventDefault();
       e.stopPropagation();
       setLocalValue(value);
-      onChange?.(value);
       onCancel?.();
     }
   };
@@ -291,12 +290,12 @@ var SpreadsheetCell = ({
           ref: selectRef,
           value: localValue ?? "",
           onChange: (e) => {
-            setLocalValue(e.target.value);
-            onChange?.(e.target.value);
-            onConfirm?.();
+            const newValue = e.target.value;
+            setLocalValue(newValue);
+            onConfirm?.(newValue);
           },
           onKeyDown: handleKeyDown,
-          onBlur: () => onConfirm?.(),
+          onBlur: () => onConfirm?.(localValue),
           className: cn(
             "w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500",
             compactMode ? "px-1 py-0.5" : "px-2 py-1"
@@ -315,10 +314,9 @@ var SpreadsheetCell = ({
         onChange: (e) => {
           const newValue = column.type === "number" ? e.target.value === "" ? "" : parseFloat(e.target.value) : e.target.value;
           setLocalValue(newValue);
-          onChange?.(newValue);
         },
         onKeyDown: handleKeyDown,
-        onBlur: () => onConfirm?.(),
+        onBlur: () => onConfirm?.(localValue),
         className: cn(
           "w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 bg-yellow-50",
           compactMode ? "px-1 py-0.5" : "px-2 py-1"
@@ -328,7 +326,7 @@ var SpreadsheetCell = ({
   };
   const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
   const handleCellKeyDown = (e) => {
-    if (e.key === " ") {
+    if (e.key === " " && !isEditing) {
       e.preventDefault();
       onClick?.(e);
     }
@@ -458,6 +456,22 @@ var SpreadsheetCell = ({
   );
 };
 SpreadsheetCell.displayName = "SpreadsheetCell";
+var MemoizedSpreadsheetCell = (0, import_react3.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
 var import_react4 = require("react");
@@ -2019,16 +2033,26 @@ var SpreadsheetSettingsModal = ({
 SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
 
 // src/components/CommentModals.tsx
+var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function AddCommentModal({
-  isOpen,
-  commentText,
-  columnLabel,
-  onCommentTextChange,
-  onAdd,
-  onClose
-}) {
+function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
+  const [commentText, setCommentText] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen) {
+      setCommentText("");
+    }
+  }, [isOpen]);
   if (!isOpen) return null;
+  const handleAdd = () => {
+    if (commentText.trim()) {
+      onAdd(commentText);
+      setCommentText("");
+    }
+  };
+  const handleClose = () => {
+    setCommentText("");
+    onClose();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { className: "text-lg font-semibold mb-4", children: [
       "Add Comment",
@@ -2038,9 +2062,14 @@ function AddCommentModal({
       "textarea",
       {
         value: commentText,
-        onChange: (e) => onCommentTextChange(e.target.value),
+        onChange: (e) => setCommentText(e.target.value),
+        onKeyDown: (e) => {
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+        },
         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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-end gap-2 mt-4", children: [
@@ -2048,7 +2077,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"
         }
@@ -2057,7 +2086,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"
@@ -2140,7 +2169,7 @@ function ViewCommentsModal({
 ViewCommentsModal.displayName = "ViewCommentsModal";
 
 // src/components/KeyboardShortcutsModal.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function KeyboardShortcutsModal({
   isOpen,
@@ -2182,7 +2211,7 @@ function ShortcutSection({ title, children }) {
 function ShortcutRow({ label, keys }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-600 text-sm", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react9.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react10.default.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-400", children: "+" }),
       key.includes("Click") ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
     ] }, index)) })
@@ -2194,7 +2223,7 @@ KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
 var import_design_system = require("@xcelsior/design-system");
 
 // src/hooks/useSpreadsheetFiltering.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_utils9 = require("@xcelsior/utils");
 function useSpreadsheetFiltering({
   data,
@@ -2205,16 +2234,16 @@ function useSpreadsheetFiltering({
   controlledFilters,
   controlledSortConfig
 }) {
-  const [internalFilters, setInternalFilters] = (0, import_react10.useState)(
+  const [internalFilters, setInternalFilters] = (0, import_react11.useState)(
     {}
   );
-  const [internalSortConfig, setInternalSortConfig] = (0, import_react10.useState)(
+  const [internalSortConfig, setInternalSortConfig] = (0, import_react11.useState)(
     null
   );
-  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react10.useState)(null);
+  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react11.useState)(null);
   const filters = controlledFilters ?? internalFilters;
   const sortConfig = controlledSortConfig !== void 0 ? controlledSortConfig : internalSortConfig;
-  const applyTextCondition = (0, import_react10.useCallback)(
+  const applyTextCondition = (0, import_react11.useCallback)(
     (value, condition) => {
       const strValue = String(value ?? "").toLowerCase();
       const filterValue = (condition.value ?? "").toLowerCase();
@@ -2241,7 +2270,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const applyNumberCondition = (0, import_react10.useCallback)(
+  const applyNumberCondition = (0, import_react11.useCallback)(
     (value, condition) => {
       if (condition.operator === "isEmpty") return isBlankValue(value);
       if (condition.operator === "isNotEmpty") return !isBlankValue(value);
@@ -2270,7 +2299,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const applyDateCondition = (0, import_react10.useCallback)(
+  const applyDateCondition = (0, import_react11.useCallback)(
     (value, condition) => {
       if (condition.operator === "isEmpty") return isBlankValue(value);
       if (condition.operator === "isNotEmpty") return !isBlankValue(value);
@@ -2342,7 +2371,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const buildFilterPredicate = (0, import_react10.useCallback)(
+  const buildFilterPredicate = (0, import_react11.useCallback)(
     (column, filter) => {
       return (row) => {
         const value = column.getValue ? column.getValue(row) : row[column.id];
@@ -2376,7 +2405,7 @@ function useSpreadsheetFiltering({
     },
     [applyTextCondition, applyNumberCondition, applyDateCondition]
   );
-  const buildSortComparator = (0, import_react10.useCallback)(
+  const buildSortComparator = (0, import_react11.useCallback)(
     (column, direction) => {
       return (a, b) => {
         const aValue = column?.getValue ? column.getValue(a) : a[sortConfig?.columnId];
@@ -2391,7 +2420,7 @@ function useSpreadsheetFiltering({
     },
     [sortConfig?.columnId]
   );
-  const filteredData = (0, import_react10.useMemo)(() => {
+  const filteredData = (0, import_react11.useMemo)(() => {
     if (!data || !Array.isArray(data)) return import_utils9.LazyArray.empty();
     if (serverSide) {
       return import_utils9.LazyArray.from(data);
@@ -2414,7 +2443,7 @@ function useSpreadsheetFiltering({
     }
     return lazyResult;
   }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator]);
-  const handleFilterChange = (0, import_react10.useCallback)(
+  const handleFilterChange = (0, import_react11.useCallback)(
     (columnId, filter) => {
       const newFilters = { ...filters };
       if (filter) {
@@ -2429,7 +2458,7 @@ function useSpreadsheetFiltering({
     },
     [filters, onFilterChange, controlledFilters]
   );
-  const handleSort = (0, import_react10.useCallback)(
+  const handleSort = (0, import_react11.useCallback)(
     (columnId) => {
       let newSortConfig;
       if (sortConfig?.columnId === columnId) {
@@ -2448,13 +2477,13 @@ function useSpreadsheetFiltering({
     },
     [sortConfig, onSortChange, controlledSortConfig]
   );
-  const clearSort = (0, import_react10.useCallback)(() => {
+  const clearSort = (0, import_react11.useCallback)(() => {
     if (controlledSortConfig === void 0) {
       setInternalSortConfig(null);
     }
     onSortChange?.(null);
   }, [onSortChange, controlledSortConfig]);
-  const setSortConfig = (0, import_react10.useCallback)(
+  const setSortConfig = (0, import_react11.useCallback)(
     (config) => {
       if (controlledSortConfig === void 0) {
         setInternalSortConfig(config);
@@ -2463,7 +2492,7 @@ function useSpreadsheetFiltering({
     },
     [onSortChange, controlledSortConfig]
   );
-  const clearAllFilters = (0, import_react10.useCallback)(() => {
+  const clearAllFilters = (0, import_react11.useCallback)(() => {
     if (controlledFilters === void 0) {
       setInternalFilters({});
     }
@@ -2486,23 +2515,22 @@ function useSpreadsheetFiltering({
 }
 
 // src/hooks/useSpreadsheetComments.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useSpreadsheetComments({
   externalCellComments,
   onAddCellComment
 } = {}) {
-  const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react11.useState)([]);
-  const [commentModalCell, setCommentModalCell] = (0, import_react11.useState)(null);
-  const [commentText, setCommentText] = (0, import_react11.useState)("");
-  const [viewCommentsCell, setViewCommentsCell] = (0, import_react11.useState)(null);
+  const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react12.useState)([]);
+  const [commentModalCell, setCommentModalCell] = (0, import_react12.useState)(null);
+  const [viewCommentsCell, setViewCommentsCell] = (0, import_react12.useState)(null);
   const cellComments = externalCellComments || cellCommentsInternal;
-  const getCellComments = (0, import_react11.useCallback)(
+  const getCellComments = (0, import_react12.useCallback)(
     (rowId, columnId) => {
       return cellComments.filter((c) => c.rowId === rowId && c.columnId === columnId);
     },
     [cellComments]
   );
-  const getCellUnresolvedCommentCount = (0, import_react11.useCallback)(
+  const getCellUnresolvedCommentCount = (0, import_react12.useCallback)(
     (rowId, columnId) => {
       return cellComments.filter(
         (c) => c.rowId === rowId && c.columnId === columnId && !c.resolved
@@ -2510,17 +2538,17 @@ function useSpreadsheetComments({
     },
     [cellComments]
   );
-  const cellHasComments = (0, import_react11.useCallback)(
+  const cellHasComments = (0, import_react12.useCallback)(
     (rowId, columnId) => {
       return cellComments.some((c) => c.rowId === rowId && c.columnId === columnId);
     },
     [cellComments]
   );
-  const handleAddCellComment = (0, import_react11.useCallback)(
-    (rowId, columnId) => {
-      if (!commentText.trim()) return;
+  const handleAddCellComment = (0, import_react12.useCallback)(
+    (rowId, columnId, text) => {
+      if (!text.trim()) return;
       if (onAddCellComment) {
-        onAddCellComment(rowId, columnId, commentText);
+        onAddCellComment(rowId, columnId, text);
       } else {
         setCellCommentsInternal((prev) => [
           ...prev,
@@ -2528,18 +2556,17 @@ 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 = (0, import_react11.useCallback)((commentId) => {
+  const handleToggleCommentResolved = (0, import_react12.useCallback)((commentId) => {
     setCellCommentsInternal(
       (prev) => prev.map((c) => c.id === commentId ? { ...c, resolved: !c.resolved } : c)
     );
@@ -2552,8 +2579,6 @@ function useSpreadsheetComments({
     // Add comment modal state
     commentModalCell,
     setCommentModalCell,
-    commentText,
-    setCommentText,
     // View comments modal state
     viewCommentsCell,
     setViewCommentsCell,
@@ -2566,17 +2591,17 @@ function useSpreadsheetComments({
 }
 
 // src/hooks/useSpreadsheetUndoRedo.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useSpreadsheetUndoRedo({
   enabled = true,
   maxStackSize = 50,
   autoSave = true
 }) {
-  const [undoStack, setUndoStack] = (0, import_react12.useState)([]);
-  const [redoStack, setRedoStack] = (0, import_react12.useState)([]);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react12.useState)(false);
-  const [saveStatus, setSaveStatus] = (0, import_react12.useState)("saved");
-  const pushToUndoStack = (0, import_react12.useCallback)(
+  const [undoStack, setUndoStack] = (0, import_react13.useState)([]);
+  const [redoStack, setRedoStack] = (0, import_react13.useState)([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react13.useState)(false);
+  const [saveStatus, setSaveStatus] = (0, import_react13.useState)("saved");
+  const pushToUndoStack = (0, import_react13.useCallback)(
     (snapshot) => {
       if (!enabled) return;
       setUndoStack((prev) => {
@@ -2590,7 +2615,7 @@ function useSpreadsheetUndoRedo({
     },
     [enabled, maxStackSize]
   );
-  const handleUndo = (0, import_react12.useCallback)(() => {
+  const handleUndo = (0, import_react13.useCallback)(() => {
     if (!enabled || undoStack.length === 0) return null;
     const previousSnapshot = undoStack[undoStack.length - 1];
     setUndoStack((prev) => prev.slice(0, -1));
@@ -2603,7 +2628,7 @@ function useSpreadsheetUndoRedo({
     });
     return previousSnapshot;
   }, [enabled, undoStack, maxStackSize]);
-  const handleRedo = (0, import_react12.useCallback)(() => {
+  const handleRedo = (0, import_react13.useCallback)(() => {
     if (!enabled || redoStack.length === 0) return null;
     const nextSnapshot = redoStack[redoStack.length - 1];
     setRedoStack((prev) => prev.slice(0, -1));
@@ -2616,7 +2641,7 @@ function useSpreadsheetUndoRedo({
     });
     return nextSnapshot;
   }, [enabled, redoStack, maxStackSize]);
-  const handleSave = (0, import_react12.useCallback)(() => {
+  const handleSave = (0, import_react13.useCallback)(() => {
     if (!hasUnsavedChanges) return;
     setSaveStatus("saving");
     setTimeout(() => {
@@ -2624,7 +2649,7 @@ function useSpreadsheetUndoRedo({
       setHasUnsavedChanges(false);
     }, 500);
   }, [hasUnsavedChanges]);
-  const markAsChanged = (0, import_react12.useCallback)(() => {
+  const markAsChanged = (0, import_react13.useCallback)(() => {
     setHasUnsavedChanges(true);
     if (autoSave) {
       setSaveStatus("saving");
@@ -2633,11 +2658,11 @@ function useSpreadsheetUndoRedo({
       setSaveStatus("unsaved");
     }
   }, [autoSave]);
-  const markAsSaved = (0, import_react12.useCallback)(() => {
+  const markAsSaved = (0, import_react13.useCallback)(() => {
     setHasUnsavedChanges(false);
     setSaveStatus("saved");
   }, []);
-  const clearStacks = (0, import_react12.useCallback)(() => {
+  const clearStacks = (0, import_react13.useCallback)(() => {
     setUndoStack([]);
     setRedoStack([]);
   }, []);
@@ -2665,7 +2690,7 @@ function useSpreadsheetUndoRedo({
 }
 
 // src/hooks/useSpreadsheetKeyboardShortcuts.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useSpreadsheetKeyboardShortcuts({
   onUndo,
   onRedo,
@@ -2677,10 +2702,10 @@ function useSpreadsheetKeyboardShortcuts({
   customShortcuts = [],
   enabled = true
 } = {}) {
-  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = (0, import_react13.useState)(false);
+  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = (0, import_react14.useState)(false);
   const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
   const modifierKey = isMac ? "\u2318" : "Ctrl";
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -2897,8 +2922,6 @@ function Spreadsheet({
     cellHasComments,
     commentModalCell,
     setCommentModalCell,
-    commentText,
-    setCommentText,
     viewCommentsCell,
     setViewCommentsCell,
     handleAddCellComment,
@@ -2923,18 +2946,17 @@ function Spreadsheet({
     enabled: enableUndoRedo,
     autoSave
   });
-  const [selectedRows, setSelectedRows] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
-  const [lastSelectedRow, setLastSelectedRow] = (0, import_react14.useState)(null);
-  const [focusedCell, setFocusedCell] = (0, import_react14.useState)(null);
-  const [editingCell, setEditingCell] = (0, import_react14.useState)(null);
-  const [editValue, setEditValue] = (0, import_react14.useState)("");
-  const [hoveredRow, setHoveredRow] = (0, import_react14.useState)(null);
-  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react14.useState)(1);
-  const [internalPageSize, setInternalPageSize] = (0, import_react14.useState)(defaultPageSize);
-  const [zoom, setZoom] = (0, import_react14.useState)(defaultZoom);
+  const [selectedRows, setSelectedRows] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
+  const [lastSelectedRow, setLastSelectedRow] = (0, import_react15.useState)(null);
+  const [focusedCell, setFocusedCell] = (0, import_react15.useState)(null);
+  const [editingCell, setEditingCell] = (0, import_react15.useState)(null);
+  const [hoveredRow, setHoveredRow] = (0, import_react15.useState)(null);
+  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react15.useState)(1);
+  const [internalPageSize, setInternalPageSize] = (0, import_react15.useState)(defaultPageSize);
+  const [zoom, setZoom] = (0, import_react15.useState)(defaultZoom);
   const currentPage = controlledCurrentPage ?? internalCurrentPage;
   const pageSize = controlledPageSize ?? internalPageSize;
-  const handlePageChange = (0, import_react14.useCallback)(
+  const handlePageChange = (0, import_react15.useCallback)(
     (newPage) => {
       if (controlledCurrentPage === void 0) {
         setInternalCurrentPage(newPage);
@@ -2943,7 +2965,7 @@ function Spreadsheet({
     },
     [controlledCurrentPage, onPageChange, pageSize]
   );
-  const handlePageSizeChange = (0, import_react14.useCallback)(
+  const handlePageSizeChange = (0, import_react15.useCallback)(
     (newPageSize) => {
       if (controlledPageSize === void 0) {
         setInternalPageSize(newPageSize);
@@ -2955,8 +2977,8 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
-  const [showSettingsModal, setShowSettingsModal] = (0, import_react14.useState)(false);
-  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react14.useState)({
+  const [showSettingsModal, setShowSettingsModal] = (0, import_react15.useState)(false);
+  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react15.useState)({
     defaultPinnedColumns: [],
     defaultSort: null,
     defaultPageSize,
@@ -2967,13 +2989,13 @@ function Spreadsheet({
     pinRowIndex: false,
     rowIndexHighlightColor: void 0
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
       defaultSort: sortConfig
     }));
   }, [sortConfig]);
-  const handleEscapeCallback = (0, import_react14.useCallback)(() => {
+  const handleEscapeCallback = (0, import_react15.useCallback)(() => {
     if (commentModalCell !== null) {
       setCommentModalCell(null);
     } else if (viewCommentsCell !== null) {
@@ -3002,7 +3024,7 @@ function Spreadsheet({
     highlightPickerCell,
     setHighlightPickerCell
   ]);
-  const applyUndo = (0, import_react14.useCallback)(() => {
+  const applyUndo = (0, import_react15.useCallback)(() => {
     const entry = popUndoEntry();
     if (!entry || !onCellEdit) return;
     if (entry.type === "cell-edit") {
@@ -3010,7 +3032,7 @@ function Spreadsheet({
       markAsChanged();
     }
   }, [popUndoEntry, onCellEdit, markAsChanged]);
-  const applyRedo = (0, import_react14.useCallback)(() => {
+  const applyRedo = (0, import_react15.useCallback)(() => {
     const entry = popRedoEntry();
     if (!entry || !onCellEdit) return;
     if (entry.type === "cell-edit") {
@@ -3018,14 +3040,14 @@ function Spreadsheet({
       markAsChanged();
     }
   }, [popRedoEntry, onCellEdit, markAsChanged]);
-  const paginatedData = (0, import_react14.useMemo)(() => {
+  const paginatedData = (0, import_react15.useMemo)(() => {
     if (serverSide) {
       return filteredData;
     }
     const startIndex = (currentPage - 1) * pageSize;
     return filteredData.slice(startIndex, startIndex + pageSize);
   }, [filteredData, currentPage, pageSize, serverSide]);
-  const handleNavigate = (0, import_react14.useCallback)(
+  const handleNavigate = (0, import_react15.useCallback)(
     (direction) => {
       if (!focusedCell) return;
       const currentRowIndex = paginatedData.findIndex(
@@ -3068,15 +3090,13 @@ function Spreadsheet({
     },
     [focusedCell, paginatedData, visibleColumns, getRowId]
   );
-  const handleEnterEditMode = (0, import_react14.useCallback)(() => {
+  const handleEnterEditMode = (0, import_react15.useCallback)(() => {
     if (!focusedCell) return;
     const column = (columns || []).find((c) => c.id === focusedCell.columnId);
     if (column?.editable && enableCellEditing) {
       const row = (data || []).find((r) => getRowId(r) === focusedCell.rowId);
       if (row) {
-        const value = column.getValue ? column.getValue(row) : row[focusedCell.columnId];
         setEditingCell({ rowId: focusedCell.rowId, columnId: focusedCell.columnId });
-        setEditValue(value);
       }
     }
   }, [focusedCell, columns, data, getRowId, enableCellEditing]);
@@ -3092,15 +3112,15 @@ function Spreadsheet({
   });
   const effectiveShowRowIndex = spreadsheetSettings.showRowIndex !== false;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
-  const tableRef = (0, import_react14.useRef)(null);
+  const tableRef = (0, import_react15.useRef)(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!serverSide && currentPage > totalPages) {
       setInternalCurrentPage(1);
     }
   }, [totalPages, currentPage, serverSide]);
-  const handleRowSelect = (0, import_react14.useCallback)(
+  const handleRowSelect = (0, import_react15.useCallback)(
     (rowId, event) => {
       if (!enableRowSelection) return;
       event.stopPropagation();
@@ -3148,7 +3168,7 @@ function Spreadsheet({
       onSelectionChange
     ]
   );
-  const handleCellClick = (0, import_react14.useCallback)(
+  const handleCellClick = (0, import_react15.useCallback)(
     (rowId, columnId, event) => {
       event.stopPropagation();
       setFocusedCell({ rowId, columnId });
@@ -3156,15 +3176,13 @@ function Spreadsheet({
       if (column?.editable && enableCellEditing) {
         const row = (data || []).find((r) => getRowId(r) === rowId);
         if (row) {
-          const value = column.getValue ? column.getValue(row) : row[columnId];
           setEditingCell({ rowId, columnId });
-          setEditValue(value);
         }
       }
     },
     [columns, data, getRowId, enableCellEditing]
   );
-  const handleCellChange = (0, import_react14.useCallback)(
+  const handleCellChange = (0, import_react15.useCallback)(
     (rowId, columnId, newValue) => {
       const row = data.find((r) => getRowId(r) === rowId);
       const previousValue = row ? row[columnId] : void 0;
@@ -3185,23 +3203,25 @@ function Spreadsheet({
     },
     [data, getRowId, enableUndoRedo, onCellEdit, pushToUndoStack, markAsChanged]
   );
-  const handleConfirmEdit = (0, import_react14.useCallback)(() => {
-    if (editingCell) {
-      handleCellChange(editingCell.rowId, editingCell.columnId, editValue);
-      setEditingCell(null);
-    }
-  }, [editingCell, editValue, handleCellChange]);
-  const handleCancelEdit = (0, import_react14.useCallback)(() => {
+  const handleConfirmEdit = (0, import_react15.useCallback)(
+    (finalValue) => {
+      if (editingCell && finalValue !== void 0) {
+        handleCellChange(editingCell.rowId, editingCell.columnId, finalValue);
+        setEditingCell(null);
+      }
+    },
+    [editingCell, handleCellChange]
+  );
+  const handleCancelEdit = (0, import_react15.useCallback)(() => {
     setEditingCell(null);
-    setEditValue("");
   }, []);
-  const handleRowClone = (0, import_react14.useCallback)(
+  const handleRowClone = (0, import_react15.useCallback)(
     (row, rowId) => {
       onRowClone?.(row, rowId);
     },
     [onRowClone]
   );
-  const handleRowIndexHighlightClick = (0, import_react14.useCallback)(() => {
+  const handleRowIndexHighlightClick = (0, import_react15.useCallback)(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
@@ -3509,9 +3529,9 @@ function Spreadsheet({
                     const isColPinned = isColumnPinned(column.id);
                     const colPinSide = getColumnPinSide(column.id);
                     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      SpreadsheetCell,
+                      MemoizedSpreadsheetCell,
                       {
-                        value: isEditing ? editValue : value,
+                        value,
                         column,
                         row,
                         rowIndex,
@@ -3528,7 +3548,6 @@ function Spreadsheet({
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),
                         onClick: (e) => handleCellClick(rowId, column.id, e),
-                        onChange: (newValue) => setEditValue(newValue),
                         onConfirm: handleConfirmEdit,
                         onCancel: handleCancelEdit,
                         onHighlight: enableHighlighting ? () => {
@@ -3584,12 +3603,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);
         }
       }