@xcelsior/ui-spreadsheets 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xcelsior/ui-spreadsheets",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/Spreadsheet.tsx

@@ -285,7 +285,7 @@ export function Spreadsheet<T extends Record<string, any>>({
     const [showSettingsModal, setShowSettingsModal] = useState(false);
 
     // Filters panel state
-    const [showFiltersPanel, setShowFiltersPanel] = useState(false);
+    const [showFiltersPanel, setShowFiltersPanel] = useState(true);
 
     // Undo/Redo hook
     const {
@@ -465,7 +465,7 @@ export function Spreadsheet<T extends Record<string, any>>({
     const paginatedData = useMemo(() => {
         if (serverSide) {
             // In server-side mode, data is already paginated by the server
-            return filteredData;
+            return filteredData.toArray();
         }
         const startIndex = (currentPage - 1) * pageSize;
         return filteredData.slice(startIndex, startIndex + pageSize);
@@ -718,16 +718,23 @@ export function Spreadsheet<T extends Record<string, any>>({
         ]
     );
 
-    // Handle cell click - focus only (edit mode requires double-click or F2)
+    // Handle cell click - enter edit mode on single click for editable cells
+    // Skip edit mode when shift is held (for multi-cell selection)
     const handleCellClick = useCallback(
         (rowId: string | number, columnId: string, event: React.MouseEvent) => {
             event.stopPropagation();
             handleCellMouseDown(rowId, columnId, event);
+            if (!event.shiftKey && !event.metaKey && !event.ctrlKey) {
+                const column = columns.find((c) => c.id === columnId);
+                if (column?.editable && enableCellEditing) {
+                    setEditingCell({ rowId, columnId });
+                }
+            }
         },
-        [handleCellMouseDown]
+        [handleCellMouseDown, columns, enableCellEditing, setEditingCell]
     );
 
-    // Handle cell double-click - enter edit mode
+    // Handle cell double-click - kept for row-level double click handler
     const handleCellDoubleClick = useCallback(
         (rowId: string | number, columnId: string) => {
             const column = columns.find((c) => c.id === columnId);
@@ -1086,17 +1093,62 @@ export function Spreadsheet<T extends Record<string, any>>({
 
                         <tbody>
                             {isLoading ? (
-                                <tr>
-                                    <td
-                                        colSpan={columnRenderItems.length + 1}
-                                        className="text-center py-8 text-gray-500"
-                                    >
-                                        <div className="flex items-center justify-center gap-2">
-                                            <div className="w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
-                                            Loading...
-                                        </div>
-                                    </td>
-                                </tr>
+                                Array.from({ length: Math.min(pageSize, 10) }).map((_, rowIdx) => (
+                                    <tr key={`skeleton-${rowIdx}`}>
+                                        {/* Row index skeleton */}
+                                        <td
+                                            className={cn(
+                                                'border border-gray-200 sticky',
+                                                effectiveCompactMode ? 'px-1.5 py-0.5' : 'px-2.5 py-1.5'
+                                            )}
+                                            style={{
+                                                minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
+                                                width: `${ROW_INDEX_COLUMN_WIDTH}px`,
+                                                left: 0,
+                                                zIndex: 40,
+                                                backgroundColor: rowIdx % 2 !== 0 ? '#f9fafb' : 'white',
+                                            }}
+                                        >
+                                            <div
+                                                className="h-4 bg-gray-200 rounded animate-pulse"
+                                                style={{ width: '60%', animationDelay: `${rowIdx * 50}ms` }}
+                                            />
+                                        </td>
+                                        {/* Column skeletons */}
+                                        {columnRenderItems.map((item, colIdx) => {
+                                            if (item.type === 'collapsed-placeholder') {
+                                                return (
+                                                    <td
+                                                        key={`skeleton-${rowIdx}-placeholder-${item.groupId}`}
+                                                        className="border border-gray-200"
+                                                        style={{ backgroundColor: rowIdx % 2 !== 0 ? '#f9fafb' : 'white' }}
+                                                    />
+                                                );
+                                            }
+                                            return (
+                                                <td
+                                                    key={`skeleton-${rowIdx}-${item.column.id}`}
+                                                    className={cn(
+                                                        'border border-gray-200',
+                                                        effectiveCompactMode ? 'px-1.5 py-0.5' : 'px-2.5 py-1.5'
+                                                    )}
+                                                    style={{
+                                                        minWidth: item.column.width ?? 120,
+                                                        backgroundColor: rowIdx % 2 !== 0 ? '#f9fafb' : 'white',
+                                                    }}
+                                                >
+                                                    <div
+                                                        className="h-4 bg-gray-200 rounded animate-pulse"
+                                                        style={{
+                                                            width: `${55 + ((rowIdx * 7 + colIdx * 13) % 35)}%`,
+                                                            animationDelay: `${(rowIdx * columnRenderItems.length + colIdx) * 30}ms`,
+                                                        }}
+                                                    />
+                                                </td>
+                                            );
+                                        })}
+                                    </tr>
+                                ))
                             ) : paginatedData.length === 0 ? (
                                 <tr>
                                     <td

package/src/components/SpreadsheetCell.tsx

@@ -365,9 +365,11 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
         }
 
         if (column.type === 'autocomplete') {
-            if (column.getOptionLabel) return column.getOptionLabel(value, row);
-            const match = column.autocompleteOptions?.find((o) => o.value === value);
-            return match ? match.label : String(value);
+            // Use localValue to reflect pending changes before parent re-renders with new data
+            const displayVal = localValue ?? value;
+            if (column.getOptionLabel) return column.getOptionLabel(displayVal, row);
+            const match = column.autocompleteOptions?.find((o) => o.value === displayVal);
+            return match ? match.label : (displayVal != null && displayVal !== '' ? String(displayVal) : null);
         }
 
         return String(value);
@@ -386,7 +388,10 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                     value={localValue}
                     column={column}
                     compactMode={compactMode}
-                    onConfirm={onConfirm}
+                    onConfirm={(newVal) => {
+                        setLocalValue(newVal);
+                        onConfirm?.(newVal);
+                    }}
                     onCancel={onCancel}
                 />
             );

package/src/hooks/useSpreadsheetFiltering.ts

@@ -252,7 +252,12 @@ export function useSpreadsheetFiltering<T extends Record<string, any>>({
 
                 // Text condition filter (advanced)
                 if (filter.textCondition) {
-                    return applyTextCondition(value, filter.textCondition);
+                    // For autocomplete columns, filter against the display label instead of the raw value
+                    const filterableValue =
+                        column.type === 'autocomplete' && column.getOptionLabel
+                            ? column.getOptionLabel(value, row)
+                            : value;
+                    return applyTextCondition(filterableValue, filter.textCondition);
                 }
 
                 // Number condition filter (advanced)

package/src/hooks/useSpreadsheetKeyboardShortcuts.ts

@@ -89,6 +89,15 @@ export function useSpreadsheetKeyboardShortcuts({
         if (!enabled) return;
 
         const handleKeyDown = (event: KeyboardEvent) => {
+            // Skip keyboard shortcuts when user is typing in a form element (e.g., filter dropdown inputs)
+            const activeEl = document.activeElement;
+            const isInFormElement = activeEl instanceof HTMLInputElement
+                || activeEl instanceof HTMLTextAreaElement
+                || activeEl instanceof HTMLSelectElement;
+            if (isInFormElement && event.key !== 'Escape') {
+                return;
+            }
+
             // Escape key
             if (event.key === 'Escape') {
                 if (showKeyboardShortcuts) {

package/src/hooks/useSpreadsheetSummary.ts

@@ -39,8 +39,8 @@ export function useSpreadsheetSummary<T>({
 
         for (const { position, value } of selectedCellValues) {
             const column = columns.find((c) => c.id === position.columnId);
-            // Include values from numeric columns or any parseable number
-            if (column?.type === 'number' || typeof value === 'number') {
+            // Only include values from columns explicitly typed as 'number'
+            if (column?.type === 'number') {
                 const num = typeof value === 'number' ? value : parseFloat(value);
                 if (!isNaN(num)) {
                     numericValues.push(num);