@xcelsior/ui-spreadsheets 1.0.15 → 1.0.17

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Spreadsheet.tsx
-import { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState12 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState12 } from "react";
 
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
 import React2 from "react";
@@ -153,7 +153,7 @@ function cn(...inputs) {
 // src/components/SpreadsheetCell.tsx
 import { useState, useRef, useEffect, memo } from "react";
 import { jsx, jsxs } from "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,
@@ -329,7 +329,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",
@@ -1148,7 +1149,7 @@ ColumnHeaderActions.displayName = "ColumnHeaderActions";
 
 // src/components/SpreadsheetHeader.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "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,
@@ -1184,7 +1185,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",
@@ -1354,6 +1356,8 @@ function useSpreadsheetPinning({
 
 // src/components/RowIndexColumnHeader.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var cellPaddingCompact3 = "px-1 py-0.5";
+var cellPaddingNormal3 = "px-2 py-1.5";
 function RowIndexColumnHeader({
   enableHighlighting = false,
   highlightColor,
@@ -1361,13 +1365,17 @@ function RowIndexColumnHeader({
   onHighlightClick,
   onPinClick,
   hasColumnGroups = false,
+  compactMode = false,
   className
 }) {
+  const cellPadding = compactMode ? cellPaddingCompact3 : cellPaddingNormal3;
   return /* @__PURE__ */ jsx6(
     "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
       ),
@@ -2601,16 +2609,19 @@ function useSpreadsheetComments({
 }
 
 // src/hooks/useSpreadsheetUndoRedo.ts
-import { useCallback as useCallback5, useState as useState9 } from "react";
+import { useCallback as useCallback5, useRef as useRef3, useState as useState9 } from "react";
 function useSpreadsheetUndoRedo({
   enabled = true,
   maxStackSize = 50,
-  autoSave = true
+  autoSave = true,
+  onSave
 }) {
   const [undoStack, setUndoStack] = useState9([]);
   const [redoStack, setRedoStack] = useState9([]);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState9(false);
   const [saveStatus, setSaveStatus] = useState9("saved");
+  const onSaveRef = useRef3(onSave);
+  onSaveRef.current = onSave;
   const pushToUndoStack = useCallback5(
     (snapshot) => {
       if (!enabled) return;
@@ -2651,19 +2662,36 @@ function useSpreadsheetUndoRedo({
     });
     return nextSnapshot;
   }, [enabled, redoStack, maxStackSize]);
-  const handleSave = useCallback5(() => {
-    if (!hasUnsavedChanges) return;
+  const handleSave = useCallback5(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 = useCallback5(() => {
     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");
     }
@@ -2859,7 +2887,7 @@ function useSpreadsheetKeyboardShortcuts({
 }
 
 // src/hooks/useSpreadsheetSelection.ts
-import { useCallback as useCallback6, useState as useState11, useRef as useRef3, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback6, useState as useState11, useRef as useRef4, useMemo as useMemo3 } from "react";
 function useSpreadsheetSelection({
   data,
   columns,
@@ -2872,7 +2900,7 @@ function useSpreadsheetSelection({
   const [selectedCellRange, setSelectedCellRangeState] = useState11(null);
   const [isDragging, setIsDragging] = useState11(false);
   const [clipboardData, setClipboardData] = useState11(null);
-  const anchorCell = useRef3(null);
+  const anchorCell = useRef4(null);
   const rowIndexMap = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
     data.forEach((row, index) => {
@@ -3315,6 +3343,7 @@ function Spreadsheet({
   pageSizeOptions = [25, 50, 100, 200],
   defaultZoom = 100,
   autoSave = true,
+  onSave,
   compactMode = false,
   isLoading = false,
   className,
@@ -3399,6 +3428,19 @@ function Spreadsheet({
     externalCellComments,
     onAddCellComment
   });
+  const [showSettingsModal, setShowSettingsModal] = useState12(false);
+  const [spreadsheetSettings, setSpreadsheetSettings] = useState12({
+    defaultPinnedColumns: [],
+    defaultSort: null,
+    defaultPageSize,
+    defaultZoom,
+    autoSave,
+    compactView: compactMode,
+    showRowIndex,
+    pinRowIndex: false,
+    rowIndexHighlightColor: void 0
+  });
+  const effectiveAutoSave = spreadsheetSettings.autoSave ?? autoSave;
   const {
     canUndo,
     canRedo,
@@ -3413,7 +3455,8 @@ function Spreadsheet({
     markAsChanged
   } = useSpreadsheetUndoRedo({
     enabled: enableUndoRedo,
-    autoSave
+    autoSave: effectiveAutoSave,
+    onSave
   });
   const [selectedRows, setSelectedRows] = useState12(/* @__PURE__ */ new Set());
   const [lastSelectedRow, setLastSelectedRow] = useState12(null);
@@ -3444,18 +3487,6 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
-  const [showSettingsModal, setShowSettingsModal] = useState12(false);
-  const [spreadsheetSettings, setSpreadsheetSettings] = useState12({
-    defaultPinnedColumns: [],
-    defaultSort: null,
-    defaultPageSize,
-    defaultZoom,
-    autoSave,
-    compactView: compactMode,
-    showRowIndex,
-    pinRowIndex: false,
-    rowIndexHighlightColor: void 0
-  });
   useEffect6(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
@@ -3621,8 +3652,9 @@ function Spreadsheet({
     enabled: true
   });
   const effectiveShowRowIndex = spreadsheetSettings.showRowIndex !== false;
+  const effectiveCompactMode = spreadsheetSettings.compactView ?? compactMode;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
-  const tableRef = useRef4(null);
+  const tableRef = useRef5(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
   useEffect6(() => {
@@ -3641,8 +3673,9 @@ function Spreadsheet({
           const start = Math.min(currentIndex, lastIndex);
           const end = Math.max(currentIndex, lastIndex);
           const newSelection = new Set(selectedRows);
-          for (let i = start; i <= end; i++) {
-            newSelection.add(getRowId(filteredData[i]));
+          const rangeRows = filteredData.slice(start, end + 1);
+          for (const row of rangeRows) {
+            newSelection.add(getRowId(row));
           }
           setSelectedRows(newSelection);
           onSelectionChange?.(Array.from(newSelection));
@@ -3747,7 +3780,7 @@ function Spreadsheet({
         selectedRowCount: selectedRows.size,
         hasUnsavedChanges,
         saveStatus,
-        autoSave,
+        autoSave: effectiveAutoSave,
         hasActiveFilters,
         onClearFilters: clearAllFilters,
         onZoomIn: () => setZoom((z) => Math.min(z + 10, 200)),
@@ -3785,7 +3818,8 @@ function Spreadsheet({
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
                   onPinClick: handleToggleRowIndexPin,
-                  hasColumnGroups: true
+                  hasColumnGroups: true,
+                  compactMode: effectiveCompactMode
                 }
               ),
               columnGroups.map((group) => {
@@ -3828,7 +3862,8 @@ function Spreadsheet({
                   isPinned: isRowIndexPinned,
                   onHighlightClick: handleRowIndexHighlightClick,
                   onPinClick: handleToggleRowIndexPin,
-                  hasColumnGroups: false
+                  hasColumnGroups: false,
+                  compactMode: effectiveCompactMode
                 }
               ),
               visibleColumns.map((column) => {
@@ -3843,7 +3878,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
@@ -3905,6 +3940,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 && "",
@@ -4076,7 +4112,7 @@ function Spreadsheet({
                         isRowSelected,
                         isRowHovered,
                         highlightColor: cellOrRowOrColumnHighlight,
-                        compactMode,
+                        compactMode: effectiveCompactMode,
                         isPinned: isColPinned,
                         pinSide: colPinSide,
                         leftOffset: getColumnLeftOffset(column.id),