@xcelsior/ui-spreadsheets 1.0.16 → 1.0.18

package/dist/index.d.mts

@@ -303,6 +303,8 @@ interface SpreadsheetProps<T = any> {
     defaultZoom?: number;
     /** Whether to auto-save changes */
     autoSave?: boolean;
+    /** Callback when changes are saved (called for both auto-save and manual save) */
+    onSave?: () => void | Promise<void>;
     /** Whether to use compact mode (smaller cells) */
     compactMode?: boolean;
     /** Loading state */
@@ -519,7 +521,7 @@ interface SpreadsheetToolbarProps {
     /** Save status */
     saveStatus: 'saved' | 'saving' | 'unsaved' | 'error';
     /** Whether auto-save is enabled */
-    autoSave: boolean;
+    autoSave?: boolean;
     /** Summary data to display */
     summary?: {
         label: string;
@@ -604,7 +606,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, 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, toolbarMenuItems, 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, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, onSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }
@@ -677,9 +679,9 @@ interface SpreadsheetSettings {
     /** Default zoom level */
     defaultZoom: number;
     /** Whether auto-save is enabled */
-    autoSave: boolean;
+    autoSave?: boolean;
     /** Whether compact view is enabled */
-    compactView: boolean;
+    compactView?: boolean;
     /** Whether to show row index column */
     showRowIndex?: boolean;
     /** Whether row index column is pinned */

package/dist/index.d.ts

@@ -303,6 +303,8 @@ interface SpreadsheetProps<T = any> {
     defaultZoom?: number;
     /** Whether to auto-save changes */
     autoSave?: boolean;
+    /** Callback when changes are saved (called for both auto-save and manual save) */
+    onSave?: () => void | Promise<void>;
     /** Whether to use compact mode (smaller cells) */
     compactMode?: boolean;
     /** Loading state */
@@ -519,7 +521,7 @@ interface SpreadsheetToolbarProps {
     /** Save status */
     saveStatus: 'saved' | 'saving' | 'unsaved' | 'error';
     /** Whether auto-save is enabled */
-    autoSave: boolean;
+    autoSave?: boolean;
     /** Summary data to display */
     summary?: {
         label: string;
@@ -604,7 +606,7 @@ interface SpreadsheetColumnGroupHeaderProps {
  * />
  * ```
  */
-declare function Spreadsheet<T extends Record<string, any>>({ data, columns, columnGroups, getRowId, onCellsEdit, 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, toolbarMenuItems, 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, onCellsEdit, onSelectionChange, onSortChange, onFilterChange, onRowClick, onRowDoubleClick, onRowClone, onRowDelete, onAddCellComment, onRowHighlight, showToolbar, showPagination, showRowIndex, enableRowSelection, enableCellEditing, enableComments, enableHighlighting, enableUndoRedo, defaultPageSize, pageSizeOptions, defaultZoom, autoSave, onSave, compactMode, isLoading, className, emptyMessage, rowHighlights: externalRowHighlights, cellComments: externalCellComments, rowActions, toolbarMenuItems, serverSide, totalItems, currentPage: controlledCurrentPage, pageSize: controlledPageSize, onPageChange, sortConfig: controlledSortConfig, filters: controlledFilters, }: SpreadsheetProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Spreadsheet {
     var displayName: string;
 }
@@ -677,9 +679,9 @@ interface SpreadsheetSettings {
     /** Default zoom level */
     defaultZoom: number;
     /** Whether auto-save is enabled */
-    autoSave: boolean;
+    autoSave?: boolean;
     /** Whether compact view is enabled */
-    compactView: boolean;
+    compactView?: boolean;
     /** Whether to show row index column */
     showRowIndex?: boolean;
     /** Whether row index column is pinned */

package/dist/index.js

@@ -194,7 +194,7 @@ function cn(...inputs) {
 // src/components/SpreadsheetCell.tsx
 var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var cellPaddingCompact = "px-1.5 py-0.5";
+var cellPaddingCompact = "px-1 py-px";
 var cellPaddingNormal = "px-2 py-1";
 var SpreadsheetCell = ({
   value,
@@ -370,7 +370,8 @@ var SpreadsheetCell = ({
       onKeyDown: handleCellKeyDown,
       "data-cell-id": `${rowId}-${column.id}`,
       className: cn(
-        "border border-gray-200 text-xs group cursor-pointer transition-colors select-none",
+        "border border-gray-200 group cursor-pointer transition-colors select-none",
+        compactMode ? "text-[10px]" : "text-xs",
         cellPadding,
         column.align === "right" && "text-right",
         column.align === "center" && "text-center",
@@ -1189,7 +1190,7 @@ ColumnHeaderActions.displayName = "ColumnHeaderActions";
 
 // src/components/SpreadsheetHeader.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var cellPaddingCompact2 = "px-1.5 py-1";
+var cellPaddingCompact2 = "px-1 py-0.5";
 var cellPaddingNormal2 = "px-2 py-1.5";
 var SpreadsheetHeader = ({
   column,
@@ -1225,7 +1226,8 @@ var SpreadsheetHeader = ({
     {
       onClick: column.sortable ? onClick : void 0,
       className: cn(
-        "border border-gray-200 text-xs font-semibold text-gray-700 sticky group",
+        "border border-gray-200 font-semibold text-gray-700 sticky group",
+        compactMode ? "text-[10px]" : "text-xs",
         cellPadding,
         column.align === "right" && "text-right",
         column.align === "center" && "text-center",
@@ -1395,6 +1397,8 @@ function useSpreadsheetPinning({
 
 // src/components/RowIndexColumnHeader.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var cellPaddingCompact3 = "px-1 py-0.5";
+var cellPaddingNormal3 = "px-2 py-1.5";
 function RowIndexColumnHeader({
   enableHighlighting = false,
   highlightColor,
@@ -1402,13 +1406,17 @@ function RowIndexColumnHeader({
   onHighlightClick,
   onPinClick,
   hasColumnGroups = false,
+  compactMode = false,
   className
 }) {
+  const cellPadding = compactMode ? cellPaddingCompact3 : cellPaddingNormal3;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "th",
     {
       className: cn(
-        "border border-gray-200 px-2 py-1.5 text-center font-bold text-gray-700 group",
+        "border border-gray-200 text-center font-bold text-gray-700 group",
+        compactMode ? "text-[10px]" : "text-xs",
+        cellPadding,
         isPinned ? "z-30" : "z-20",
         className
       ),
@@ -2646,12 +2654,15 @@ var import_react13 = require("react");
 function useSpreadsheetUndoRedo({
   enabled = true,
   maxStackSize = 50,
-  autoSave = true
+  autoSave = true,
+  onSave
 }) {
   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 onSaveRef = (0, import_react13.useRef)(onSave);
+  onSaveRef.current = onSave;
   const pushToUndoStack = (0, import_react13.useCallback)(
     (snapshot) => {
       if (!enabled) return;
@@ -2692,19 +2703,36 @@ function useSpreadsheetUndoRedo({
     });
     return nextSnapshot;
   }, [enabled, redoStack, maxStackSize]);
-  const handleSave = (0, import_react13.useCallback)(() => {
-    if (!hasUnsavedChanges) return;
+  const handleSave = (0, import_react13.useCallback)(async () => {
+    if (!hasUnsavedChanges && !autoSave) return;
     setSaveStatus("saving");
-    setTimeout(() => {
+    try {
+      if (onSaveRef.current) {
+        await onSaveRef.current();
+      }
       setSaveStatus("saved");
       setHasUnsavedChanges(false);
-    }, 500);
-  }, [hasUnsavedChanges]);
+    } catch {
+      setSaveStatus("error");
+    }
+  }, [hasUnsavedChanges, autoSave]);
   const markAsChanged = (0, import_react13.useCallback)(() => {
     setHasUnsavedChanges(true);
     if (autoSave) {
       setSaveStatus("saving");
-      setTimeout(() => setSaveStatus("saved"), 500);
+      if (onSaveRef.current) {
+        Promise.resolve(onSaveRef.current()).then(() => {
+          setSaveStatus("saved");
+          setHasUnsavedChanges(false);
+        }).catch(() => {
+          setSaveStatus("error");
+        });
+      } else {
+        setTimeout(() => {
+          setSaveStatus("saved");
+          setHasUnsavedChanges(false);
+        }, 500);
+      }
     } else {
       setSaveStatus("unsaved");
     }
@@ -3355,8 +3383,9 @@ function Spreadsheet({
   defaultPageSize = 25,
   pageSizeOptions = [25, 50, 100, 200],
   defaultZoom = 100,
-  autoSave = true,
-  compactMode = false,
+  autoSave,
+  onSave,
+  compactMode,
   isLoading = false,
   className,
   emptyMessage = "No data available",
@@ -3440,6 +3469,19 @@ function Spreadsheet({
     externalCellComments,
     onAddCellComment
   });
+  const [showSettingsModal, setShowSettingsModal] = (0, import_react16.useState)(false);
+  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react16.useState)({
+    defaultPinnedColumns: [],
+    defaultSort: null,
+    defaultPageSize,
+    defaultZoom,
+    autoSave: autoSave ?? true,
+    compactView: compactMode ?? false,
+    showRowIndex,
+    pinRowIndex: false,
+    rowIndexHighlightColor: void 0
+  });
+  const effectiveAutoSave = autoSave ?? spreadsheetSettings.autoSave;
   const {
     canUndo,
     canRedo,
@@ -3454,7 +3496,8 @@ function Spreadsheet({
     markAsChanged
   } = useSpreadsheetUndoRedo({
     enabled: enableUndoRedo,
-    autoSave
+    autoSave: effectiveAutoSave,
+    onSave
   });
   const [selectedRows, setSelectedRows] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
   const [lastSelectedRow, setLastSelectedRow] = (0, import_react16.useState)(null);
@@ -3485,18 +3528,6 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
-  const [showSettingsModal, setShowSettingsModal] = (0, import_react16.useState)(false);
-  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react16.useState)({
-    defaultPinnedColumns: [],
-    defaultSort: null,
-    defaultPageSize,
-    defaultZoom,
-    autoSave,
-    compactView: compactMode,
-    showRowIndex,
-    pinRowIndex: false,
-    rowIndexHighlightColor: void 0
-  });
   (0, import_react16.useEffect)(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
@@ -3546,7 +3577,6 @@ function Spreadsheet({
   }, [filteredData, currentPage, pageSize, serverSide]);
   const {
     focusedCell,
-    setFocusedCell,
     editingCell,
     setEditingCell,
     handleCellMouseDown,
@@ -3662,6 +3692,7 @@ function Spreadsheet({
     enabled: true
   });
   const effectiveShowRowIndex = spreadsheetSettings.showRowIndex !== false;
+  const effectiveCompactMode = compactMode ?? spreadsheetSettings.compactView;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
   const tableRef = (0, import_react16.useRef)(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
@@ -3789,7 +3820,7 @@ function Spreadsheet({
         selectedRowCount: selectedRows.size,
         hasUnsavedChanges,
         saveStatus,
-        autoSave,
+        autoSave: effectiveAutoSave,
         hasActiveFilters,
         onClearFilters: clearAllFilters,
         onZoomIn: () => setZoom((z) => Math.min(z + 10, 200)),
@@ -3827,7 +3858,8 @@ function Spreadsheet({
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
                   onPinClick: handleToggleRowIndexPin,
-                  hasColumnGroups: true
+                  hasColumnGroups: true,
+                  compactMode: effectiveCompactMode
                 }
               ),
               columnGroups.map((group) => {
@@ -3870,7 +3902,8 @@ function Spreadsheet({
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
                   onPinClick: handleToggleRowIndexPin,
-                  hasColumnGroups: false
+                  hasColumnGroups: false,
+                  compactMode: effectiveCompactMode
                 }
               ),
               visibleColumns.map((column) => {
@@ -3885,7 +3918,7 @@ function Spreadsheet({
                     pinSide: getColumnPinSide(column.id),
                     leftOffset: isPinnedLeft ? getColumnLeftOffset(column.id) : 0,
                     highlightColor: getColumnHighlight(column.id),
-                    compactMode,
+                    compactMode: effectiveCompactMode,
                     onClick: () => handleSort(column.id),
                     onFilterClick: () => setActiveFilterColumn(
                       activeFilterColumn === column.id ? null : column.id
@@ -3947,6 +3980,7 @@ function Spreadsheet({
                       onClick: (e) => handleRowSelect(rowId, e),
                       className: cn(
                         "border border-gray-200 text-center font-semibold cursor-pointer group",
+                        effectiveCompactMode ? "text-[10px] px-1 py-px" : "text-xs px-2 py-1",
                         isRowIndexPinned ? "z-20" : "z-0",
                         isRowSelected && "bg-blue-100",
                         !isRowSelected && rowHighlight && "",
@@ -4118,7 +4152,7 @@ function Spreadsheet({
                         isRowSelected,
                         isRowHovered,
                         highlightColor: cellOrRowOrColumnHighlight,
-                        compactMode,
+                        compactMode: effectiveCompactMode,
                         isPinned: isColPinned,
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),