@xcelsior/ui-spreadsheets 1.0.7 → 1.0.9

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 */
@@ -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 */
@@ -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);
 }
@@ -317,8 +320,12 @@ var SpreadsheetCell = ({
         },
         onKeyDown: handleKeyDown,
         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",
+          "w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 bg-[#edf7ff]",
           compactMode ? "px-1 py-0.5" : "px-2 py-1"
         )
       }
@@ -368,7 +375,7 @@ var SpreadsheetCell = ({
           {
             className: cn(
               "flex-1 truncate",
-              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-yellow-50/50"
+              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-[#edf7ff]/50"
             ),
             title: String(value ?? ""),
             children: renderContent()
@@ -2167,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"));
@@ -2833,6 +2878,7 @@ function Spreadsheet({
   onRowClick,
   onRowDoubleClick,
   onRowClone,
+  onRowDelete,
   onAddCellComment,
   onRowHighlight,
   showToolbar = true,
@@ -3221,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]);
@@ -3424,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",
                             {