@xcelsior/ui-spreadsheets 1.0.6 → 1.0.7

package/dist/index.d.mts

@@ -377,10 +377,10 @@ interface SpreadsheetCellProps {
     rightOffset?: number;
     /** Callback when cell is clicked */
     onClick?: (event: React$1.MouseEvent) => void;
-    /** Callback when cell value changes */
+    /** Callback when cell value changes (only called on blur/confirm, not during typing) */
     onChange?: (newValue: any) => void;
-    /** Callback when editing is confirmed */
-    onConfirm?: () => void;
+    /** Callback when editing is confirmed, receives the final value */
+    onConfirm?: (finalValue?: any) => void;
     /** Callback when editing is cancelled */
     onCancel?: () => void;
     /** Callback to copy value down */

package/dist/index.d.ts

@@ -377,10 +377,10 @@ interface SpreadsheetCellProps {
     rightOffset?: number;
     /** Callback when cell is clicked */
     onClick?: (event: React$1.MouseEvent) => void;
-    /** Callback when cell value changes */
+    /** Callback when cell value changes (only called on blur/confirm, not during typing) */
     onChange?: (newValue: any) => void;
-    /** Callback when editing is confirmed */
-    onConfirm?: () => void;
+    /** Callback when editing is confirmed, receives the final value */
+    onConfirm?: (finalValue?: any) => void;
     /** Callback when editing is cancelled */
     onCancel?: () => void;
     /** Callback to copy value down */

package/dist/index.js

@@ -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);
     }
@@ -2037,12 +2035,7 @@ SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
 // src/components/CommentModals.tsx
 var import_react9 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function AddCommentModal({
-  isOpen,
-  columnLabel,
-  onAdd,
-  onClose
-}) {
+function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
   const [commentText, setCommentText] = (0, import_react9.useState)("");
   (0, import_react9.useEffect)(() => {
     if (!isOpen) {
@@ -2070,6 +2063,10 @@ function AddCommentModal({
       {
         value: commentText,
         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",
         autoFocus: true
@@ -2953,7 +2950,6 @@ function Spreadsheet({
   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 [editValue, setEditValue] = (0, import_react15.useState)("");
   const [hoveredRow, setHoveredRow] = (0, import_react15.useState)(null);
   const [internalCurrentPage, setInternalCurrentPage] = (0, import_react15.useState)(1);
   const [internalPageSize, setInternalPageSize] = (0, import_react15.useState)(defaultPageSize);
@@ -3100,9 +3096,7 @@ function Spreadsheet({
     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]);
@@ -3182,9 +3176,7 @@ 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);
         }
       }
     },
@@ -3211,15 +3203,17 @@ function Spreadsheet({
     },
     [data, getRowId, enableUndoRedo, onCellEdit, pushToUndoStack, markAsChanged]
   );
-  const handleConfirmEdit = (0, import_react15.useCallback)(() => {
-    if (editingCell) {
-      handleCellChange(editingCell.rowId, editingCell.columnId, editValue);
-      setEditingCell(null);
-    }
-  }, [editingCell, editValue, handleCellChange]);
+  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_react15.useCallback)(
     (row, rowId) => {
@@ -3537,7 +3531,7 @@ function Spreadsheet({
                     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       MemoizedSpreadsheetCell,
                       {
-                        value: isEditing ? editValue : value,
+                        value,
                         column,
                         row,
                         rowIndex,
@@ -3554,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 ? () => {