@xcelsior/ui-spreadsheets 1.2.2 → 1.3.0

package/src/components/SpreadsheetCell.tsx

@@ -1,13 +1,14 @@
 import type React from 'react';
-import { useState, useRef, useEffect, memo } from 'react';
+import { useState, useRef, useEffect, useCallback, memo } from 'react';
+import { createPortal } from 'react-dom';
 import { AiFillHighlight } from 'react-icons/ai';
+import { HiChevronDown } from 'react-icons/hi';
 import { FaComment, FaRegComment } from 'react-icons/fa';
 import { cn } from '../utils';
 import type { SpreadsheetCellProps } from '../types';
-import { MIN_PINNED_COLUMN_WIDTH } from '../hooks/useSpreadsheetPinning';
 
-const cellPaddingCompact = 'px-1 py-px';
-const cellPaddingNormal = 'px-2 py-1';
+const cellPaddingCompact = 'px-1.5 py-0.5';
+const cellPaddingNormal = 'px-2.5 py-1.5';
 
 /**
  * SpreadsheetCell component - A single cell in the spreadsheet table.
@@ -27,6 +28,219 @@ const cellPaddingNormal = 'px-2 py-1';
  * />
  * ```
  */
+/**
+ * AutocompleteEditor — self-contained autocomplete dropdown for a spreadsheet cell.
+ * Uses position:fixed + getBoundingClientRect so it escapes overflow:hidden parents.
+ */
+const AutocompleteEditor: React.FC<{
+    value: any;
+    column: import('../types').SpreadsheetColumn;
+    compactMode: boolean;
+    onConfirm?: (value: any) => void;
+    onCancel?: () => void;
+}> = ({ value, column, compactMode, onConfirm, onCancel }) => {
+    // Derive initial label from value
+    const getLabel = useCallback(
+        (val: any): string => {
+            if (val === null || val === undefined || val === '') return '';
+            if (column.getOptionLabel) return column.getOptionLabel(val);
+            const match = column.autocompleteOptions?.find((o) => o.value === val);
+            return match ? match.label : String(val);
+        },
+        [column]
+    );
+
+    const [searchText, setSearchText] = useState(() => getLabel(value));
+    const [filteredOptions, setFilteredOptions] = useState<{ label: string; value: string | number }[]>(
+        column.autocompleteOptions ?? []
+    );
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [isOpen, setIsOpen] = useState(true);
+    const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number; width: number } | null>(null);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Position dropdown using fixed coordinates
+    const updateDropdownPos = useCallback(() => {
+        if (inputRef.current) {
+            const rect = inputRef.current.getBoundingClientRect();
+            setDropdownPos({
+                top: rect.bottom + 2,
+                left: rect.left,
+                width: rect.width,
+            });
+        }
+    }, []);
+
+    // Focus input on mount
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+        updateDropdownPos();
+    }, [updateDropdownPos]);
+
+    // Client-side filter helper
+    const filterClientSide = useCallback(
+        (term: string) => {
+            const opts = column.autocompleteOptions ?? [];
+            if (!term.trim()) return opts;
+            const lower = term.toLowerCase();
+            return opts.filter((o) => o.label.toLowerCase().includes(lower));
+        },
+        [column.autocompleteOptions]
+    );
+
+    // Debounced search handler
+    const handleSearchChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const term = e.target.value;
+            setSearchText(term);
+            setFocusedIndex(-1);
+            setIsOpen(true);
+            updateDropdownPos();
+
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+
+            debounceRef.current = setTimeout(async () => {
+                if (column.onAutocompleteSearch) {
+                    try {
+                        const results = await column.onAutocompleteSearch(term);
+                        setFilteredOptions(results);
+                    } catch {
+                        setFilteredOptions([]);
+                    }
+                } else {
+                    setFilteredOptions(filterClientSide(term));
+                }
+            }, 300);
+        },
+        [column, filterClientSide, updateDropdownPos]
+    );
+
+    // Cleanup debounce on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+        };
+    }, []);
+
+    const selectOption = useCallback(
+        (option: { label: string; value: string | number }) => {
+            setSearchText(option.label);
+            setIsOpen(false);
+            onConfirm?.(option.value);
+        },
+        [onConfirm]
+    );
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLInputElement>) => {
+            const visibleOptions = filteredOptions.slice(0, 8);
+
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setFocusedIndex((prev) => Math.min(prev + 1, visibleOptions.length - 1));
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setFocusedIndex((prev) => Math.max(prev - 1, -1));
+            } else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (focusedIndex >= 0 && visibleOptions[focusedIndex]) {
+                    selectOption(visibleOptions[focusedIndex]);
+                } else {
+                    // Confirm with current search text as-is (no match selected)
+                    onConfirm?.(value);
+                }
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsOpen(false);
+                onCancel?.();
+            }
+        },
+        [filteredOptions, focusedIndex, selectOption, onConfirm, onCancel, value]
+    );
+
+    const handleBlur = useCallback(
+        (e: React.FocusEvent) => {
+            // Delay to allow click on dropdown option to fire first
+            setTimeout(() => {
+                if (
+                    dropdownRef.current &&
+                    dropdownRef.current.contains(document.activeElement)
+                ) {
+                    return;
+                }
+                setIsOpen(false);
+                onConfirm?.(value);
+            }, 150);
+        },
+        [onConfirm, value]
+    );
+
+    const visibleOptions = filteredOptions.slice(0, 8);
+
+    const dropdown =
+        isOpen && visibleOptions.length > 0 && dropdownPos
+            ? createPortal(
+                  <div
+                      ref={dropdownRef}
+                      style={{
+                          position: 'fixed',
+                          top: dropdownPos.top,
+                          left: dropdownPos.left,
+                          width: Math.max(dropdownPos.width, 180),
+                          zIndex: 50,
+                      }}
+                      className="bg-white border border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto"
+                      onMouseDown={(e) => e.preventDefault()} // prevent input blur before click
+                  >
+                      {visibleOptions.map((option, index) => (
+                          <div
+                              key={`${option.value}-${index}`}
+                              onMouseDown={(e) => {
+                                  e.preventDefault();
+                                  selectOption(option);
+                              }}
+                              className={cn(
+                                  'px-3 py-1.5 cursor-pointer',
+                                  compactMode ? 'text-xs' : 'text-sm',
+                                  index === focusedIndex ? 'bg-blue-100' : 'hover:bg-blue-50'
+                              )}
+                          >
+                              {option.label}
+                          </div>
+                      ))}
+                  </div>,
+                  document.body
+              )
+            : null;
+
+    return (
+        <>
+            <input
+                ref={inputRef}
+                type="text"
+                value={searchText}
+                onChange={handleSearchChange}
+                onKeyDown={handleKeyDown}
+                onBlur={handleBlur}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck={false}
+                className={cn(
+                    'w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm',
+                    compactMode ? 'text-xs' : 'text-sm'
+                )}
+            />
+            {dropdown}
+        </>
+    );
+};
+
 const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
     value,
     column,
@@ -41,6 +255,7 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
     isRowSelected = false,
     isRowHovered = false,
     highlightColor,
+    isDuplicate = false,
     hasComments = false,
     unresolvedCommentCount = 0,
     isCopied = false,
@@ -49,7 +264,11 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
     pinSide,
     leftOffset = 0,
     rightOffset = 0,
+    isOddRow = false,
+    resolvedWidth,
+    pinnedZIndex,
     onClick,
+    onDoubleClick,
     onMouseDown,
     onMouseEnter,
     onChange,
@@ -74,7 +293,8 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
         if (isEditing) {
             if (column.type === 'select') {
                 selectRef.current?.focus();
-            } else {
+            } else if (column.type !== 'autocomplete') {
+                // autocomplete manages its own focus internally
                 inputRef.current?.focus();
                 inputRef.current?.select();
             }
@@ -96,8 +316,10 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
     // Determine background color
     const getBackgroundColor = () => {
         if (highlightColor) return highlightColor;
+        if (isDuplicate) return 'rgb(254 202 202)'; // red-200 - duplicate highlight
         if (isRowSelected) return 'rgb(219 234 254)'; // blue-100
         if (isRowHovered) return 'rgb(243 244 246)'; // gray-100
+        if (isOddRow) return 'rgb(249 250 251)'; // gray-50 zebra stripe
         return 'white';
     };
 
@@ -142,6 +364,12 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             return typeof value === 'number' ? value.toLocaleString() : value;
         }
 
+        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);
+        }
+
         return String(value);
     };
 
@@ -152,6 +380,18 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
             return renderContent();
         }
 
+        if (column.type === 'autocomplete') {
+            return (
+                <AutocompleteEditor
+                    value={localValue}
+                    column={column}
+                    compactMode={compactMode}
+                    onConfirm={onConfirm}
+                    onCancel={onCancel}
+                />
+            );
+        }
+
         if (column.type === 'select' && column.options) {
             return (
                 <select
@@ -163,10 +403,11 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                         onConfirm?.(newValue);
                     }}
                     onKeyDown={handleKeyDown}
-                    onBlur={() => onConfirm?.(localValue)}
+                    onClick={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
                     className={cn(
                         'w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm',
-                        compactMode ? 'text-[10px]' : 'text-xs'
+                        compactMode ? 'text-xs' : 'text-sm'
                     )}
                 >
                     {column.options.map((option) => (
@@ -201,7 +442,7 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                 spellCheck={false}
                 className={cn(
                     'w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm',
-                    compactMode ? 'text-[10px]' : 'text-xs'
+                    compactMode ? 'text-xs' : 'text-sm'
                 )}
             />
         );
@@ -229,63 +470,54 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
         }
     }
 
-    // Build selection edge border styles
+    // Build selection edge styles using inset box-shadow to avoid layout shift
+    // (border-width changes cause column width recalculation in border-separate tables)
     const selectionBorderStyles: React.CSSProperties = {};
     if (isInSelection && selectionEdge) {
-        const borderColor = 'rgb(59 130 246)'; // blue-500
-        const borderWidth = '2px';
-        if (selectionEdge.top) {
-            selectionBorderStyles.borderTopColor = borderColor;
-            selectionBorderStyles.borderTopWidth = borderWidth;
-        }
-        if (selectionEdge.right) {
-            selectionBorderStyles.borderRightColor = borderColor;
-            selectionBorderStyles.borderRightWidth = borderWidth;
-        }
-        if (selectionEdge.bottom) {
-            selectionBorderStyles.borderBottomColor = borderColor;
-            selectionBorderStyles.borderBottomWidth = borderWidth;
-        }
-        if (selectionEdge.left) {
-            selectionBorderStyles.borderLeftColor = borderColor;
-            selectionBorderStyles.borderLeftWidth = borderWidth;
+        const color = 'rgb(59 130 246)'; // blue-500
+        const w = '2px';
+        const shadows: string[] = [];
+        if (selectionEdge.top) shadows.push(`inset 0 ${w} 0 0 ${color}`);
+        if (selectionEdge.bottom) shadows.push(`inset 0 -${w} 0 0 ${color}`);
+        if (selectionEdge.left) shadows.push(`inset ${w} 0 0 0 ${color}`);
+        if (selectionEdge.right) shadows.push(`inset -${w} 0 0 0 ${color}`);
+        if (shadows.length > 0) {
+            selectionBorderStyles.boxShadow = shadows.join(', ');
         }
     }
 
     return (
         <td
             onClick={onClick}
+            onDoubleClick={onDoubleClick}
             onMouseDown={onMouseDown}
             onMouseEnter={onMouseEnter}
             onKeyDown={handleCellKeyDown}
             data-cell-id={`${rowId}-${column.id}`}
+            data-column-id={column.id}
             className={cn(
-                'border border-gray-200 group cursor-pointer transition-colors select-none',
-                compactMode ? 'text-[10px]' : 'text-xs',
+                'border border-gray-200 group cursor-pointer transition-colors select-none relative',
+                compactMode ? 'text-xs' : 'text-sm',
                 cellPadding,
                 column.align === 'right' && 'text-right',
                 column.align === 'center' && 'text-center',
                 isCopied && 'animate-pulse',
                 isFocused && !isInSelection && 'ring-2 ring-blue-500 ring-inset',
                 isInSelection && 'bg-blue-50',
-                isPinned ? 'z-20' : 'z-0',
+                !isPinned && 'z-0',
                 className
             )}
             style={{
                 backgroundColor: isInSelection ? 'rgb(239 246 255)' : getBackgroundColor(),
-                minWidth: column.minWidth || column.width,
-                // Pinned columns must have a fixed width so sticky offsets stay correct.
-                // Enforce MIN_PINNED_COLUMN_WIDTH so header actions always fit.
-                ...(isPinned && {
-                    width: Math.max(
-                        column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
-                        MIN_PINNED_COLUMN_WIDTH
-                    ),
-                    maxWidth: Math.max(
-                        column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
-                        MIN_PINNED_COLUMN_WIDTH
-                    ),
+                // Always set explicit width to prevent layout shift on selection/re-render
+                ...(resolvedWidth ? {
+                    width: resolvedWidth,
+                    minWidth: resolvedWidth,
+                } : {
+                    width: column.width || column.minWidth,
+                    minWidth: column.minWidth || column.width,
                 }),
+                ...(isPinned && pinnedZIndex !== undefined && { zIndex: pinnedZIndex }),
                 ...positionStyles,
                 ...selectionBorderStyles,
             }}
@@ -298,12 +530,16 @@ const SpreadsheetCell: React.FC<SpreadsheetCellProps> = ({
                     <div
                         className={cn(
                             'flex-1 truncate',
-                            isEditable && 'cursor-text bg-blue-50/50 rounded'
+                            isEditable && 'cursor-text bg-blue-50 rounded px-1'
                         )}
                         title={String(value ?? '')}
                     >
                         {renderContent()}
                     </div>
+                    {/* Dropdown indicator for select/autocomplete-type editable cells */}
+                    {isEditable && (column.type === 'select' || column.type === 'autocomplete') && !isEditing && (
+                        <HiChevronDown className="h-3 w-3 shrink-0 text-gray-400" />
+                    )}
 
                     {/* Action buttons - show on hover, except comment indicator which is always visible */}
                     {/* Hide actions when cell is focused or in a selection */}
@@ -385,6 +621,7 @@ export const MemoizedSpreadsheetCell = memo(SpreadsheetCell, (prevProps, nextPro
     if (prevProps.isRowSelected !== nextProps.isRowSelected) return false;
     if (prevProps.isRowHovered !== nextProps.isRowHovered) return false;
     if (prevProps.highlightColor !== nextProps.highlightColor) return false;
+    if (prevProps.isDuplicate !== nextProps.isDuplicate) return false;
     if (prevProps.hasComments !== nextProps.hasComments) return false;
     if (prevProps.unresolvedCommentCount !== nextProps.unresolvedCommentCount) return false;
     if (prevProps.isCopied !== nextProps.isCopied) return false;
@@ -392,6 +629,7 @@ export const MemoizedSpreadsheetCell = memo(SpreadsheetCell, (prevProps, nextPro
     if (prevProps.leftOffset !== nextProps.leftOffset) return false;
     if (prevProps.rightOffset !== nextProps.rightOffset) return false;
     if (prevProps.compactMode !== nextProps.compactMode) return false;
+    if (prevProps.isOddRow !== nextProps.isOddRow) return false;
 
     // Check selection edge changes
     const prevEdge = prevProps.selectionEdge;