@xcelsior/ui-spreadsheets 1.0.6 → 1.0.8

package/.turbo/turbo-build.log

@@ -0,0 +1,22 @@
+
+> @xcelsior/ui-spreadsheets@1.0.8 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
+ESM dist/index.mjs     147.91 KB
+ESM dist/index.mjs.map 4.62 MB
+ESM ⚡️ Build success in 418ms
+CJS dist/index.js     159.10 KB
+CJS dist/index.js.map 4.61 MB
+CJS ⚡️ Build success in 418ms
+DTS Build start
+DTS ⚡️ Build success in 3997ms
+DTS dist/index.d.ts  22.18 KB
+DTS dist/index.d.mts 22.18 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @xcelsior/ui-spreadsheets
 
+## 1.0.8
+
+### Patch Changes
+
+- 43355ef: add onDelete
+
 ## 1.0.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -253,6 +253,8 @@ 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 is deleted */
+    onRowDelete?: (row: T, rowId: string | number) => void;
     /** Callback when a cell comment is added */
     onAddCellComment?: (rowId: string | number, columnId: string, comment: string) => void;
     /** Callback when row highlight is toggled */
@@ -377,10 +379,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 */
@@ -554,7 +556,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -253,6 +253,8 @@ 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 is deleted */
+    onRowDelete?: (row: T, rowId: string | number) => void;
     /** Callback when a cell comment is added */
     onAddCellComment?: (rowId: string | number, columnId: string, comment: string) => void;
     /** Callback when row highlight is toggled */
@@ -377,10 +379,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 */
@@ -554,7 +556,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
+declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }

package/dist/index.js

@@ -152,6 +152,9 @@ function HiReply(props) {
 function HiSortAscending(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M3 3a1 1 0 000 2h11a1 1 0 100-2H3zM3 7a1 1 0 000 2h5a1 1 0 000-2H3zM3 11a1 1 0 100 2h4a1 1 0 100-2H3zM13 16a1 1 0 102 0v-5.586l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 101.414 1.414L13 10.414V16z" } }] })(props);
 }
+function HiTrash(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z", "clipRule": "evenodd" } }] })(props);
+}
 function HiViewBoards(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M2 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V4zM8 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1H9a1 1 0 01-1-1V4zM15 3a1 1 0 00-1 1v12a1 1 0 001 1h2a1 1 0 001-1V4a1 1 0 00-1-1h-2z" } }] })(props);
 }
@@ -253,12 +256,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 +293,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 +317,13 @@ 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),
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        spellCheck: false,
         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 +333,7 @@ var SpreadsheetCell = ({
   };
   const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
   const handleCellKeyDown = (e) => {
-    if (e.key === " ") {
+    if (e.key === " " && !isEditing) {
       e.preventDefault();
       onClick?.(e);
     }
@@ -2037,12 +2042,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 +2070,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
@@ -2170,6 +2174,44 @@ function ViewCommentsModal({
   ] }) });
 }
 ViewCommentsModal.displayName = "ViewCommentsModal";
+function DeleteConfirmationModal({
+  isOpen,
+  title = "Delete Row",
+  message = "Are you sure you want to delete this row? This action cannot be undone.",
+  confirmLabel = "Delete",
+  onConfirm,
+  onClose
+}) {
+  if (!isOpen) return null;
+  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.jsx)("h3", { className: "text-lg font-semibold mb-2", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-gray-600 mb-6", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onConfirm();
+            onClose();
+          },
+          className: "px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors",
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+DeleteConfirmationModal.displayName = "DeleteConfirmationModal";
 
 // src/components/KeyboardShortcutsModal.tsx
 var import_react10 = __toESM(require("react"));
@@ -2836,6 +2878,7 @@ function Spreadsheet({
   onRowClick,
   onRowDoubleClick,
   onRowClone,
+  onRowDelete,
   onAddCellComment,
   onRowHighlight,
   showToolbar = true,
@@ -2953,7 +2996,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 +3142,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 +3222,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 +3249,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) => {
@@ -3227,6 +3267,12 @@ function Spreadsheet({
     },
     [onRowClone]
   );
+  const handleRowDelete = (0, import_react15.useCallback)(
+    (row, rowId) => {
+      onRowDelete?.(row, rowId);
+    },
+    [onRowDelete]
+  );
   const handleRowIndexHighlightClick = (0, import_react15.useCallback)(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
@@ -3430,6 +3476,19 @@ function Spreadsheet({
                               children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiDuplicate, { className: "h-2.5 w-2.5 text-gray-500" })
                             }
                           ),
+                          onRowDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleRowDelete(row, rowId);
+                              },
+                              className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-red-100 rounded",
+                              title: "Delete row",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiTrash, { className: "h-2.5 w-2.5 text-gray-500 hover:text-red-500" })
+                            }
+                          ),
                           enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                             "button",
                             {
@@ -3537,7 +3596,7 @@ function Spreadsheet({
                     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                       MemoizedSpreadsheetCell,
                       {
-                        value: isEditing ? editValue : value,
+                        value,
                         column,
                         row,
                         rowIndex,
@@ -3554,7 +3613,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 ? () => {