@papernote/ui 1.7.5 → 1.7.7

package/dist/index.js

@@ -5027,7 +5027,7 @@ const MaskedInput = React.forwardRef(({ value, onChange, maskType = 'phone', cus
 });
 MaskedInput.displayName = 'MaskedInput';
 
-const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch, label, placeholder = 'Search...', required = false, disabled = false, error, helperText, minChars = 1, debounceMs = 300, maxResults = 10, clearable = true, className = '', }, ref) => {
+const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch, label, placeholder = 'Search...', required = false, disabled = false, error, helperText, minChars = 1, debounceMs = 300, maxResults = 10, clearable = true, className = '', showOptionsOnFocus = true, }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [filteredOptions, setFilteredOptions] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
@@ -5039,6 +5039,30 @@ const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch
     const labelId = React.useId();
     const listboxId = React.useId();
     const errorId = React.useId();
+    // Helper to find next selectable (non-header) index
+    const findNextSelectableIndex = (currentIndex, optionsList) => {
+        for (let i = currentIndex + 1; i < optionsList.length; i++) {
+            if (!optionsList[i].isHeader)
+                return i;
+        }
+        return currentIndex; // Stay at current if no next selectable
+    };
+    // Helper to find previous selectable (non-header) index
+    const findPrevSelectableIndex = (currentIndex, optionsList) => {
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            if (!optionsList[i].isHeader)
+                return i;
+        }
+        return -1; // Go to -1 if no previous selectable
+    };
+    // Helper to find first selectable (non-header) index
+    const findFirstSelectableIndex = (optionsList) => {
+        for (let i = 0; i < optionsList.length; i++) {
+            if (!optionsList[i].isHeader)
+                return i;
+        }
+        return -1;
+    };
     // Expose methods via ref
     React.useImperativeHandle(ref, () => ({
         focus: () => inputRef.current?.focus(),
@@ -5068,11 +5092,14 @@ const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch
                 const results = await onSearch(query);
                 setFilteredOptions(results.slice(0, maxResults));
                 setIsOpen(results.length > 0);
+                // Auto-highlight first selectable (non-header) result
+                setHighlightedIndex(findFirstSelectableIndex(results.slice(0, maxResults)));
             }
             catch (err) {
                 console.error('Autocomplete search error:', err);
                 setFilteredOptions([]);
                 setIsOpen(false);
+                setHighlightedIndex(-1);
             }
             finally {
                 setLoading(false);
@@ -5083,6 +5110,16 @@ const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch
             const filtered = filterOptions(query);
             setFilteredOptions(filtered);
             setIsOpen(filtered.length > 0);
+            // Auto-highlight first selectable (non-header) result
+            setHighlightedIndex(findFirstSelectableIndex(filtered));
+        }
+    };
+    // Show static options (for focus/arrow down when input is empty)
+    const showStaticOptions = () => {
+        if (options.length > 0) {
+            setFilteredOptions(options.slice(0, maxResults));
+            setIsOpen(true);
+            setHighlightedIndex(findFirstSelectableIndex(options.slice(0, maxResults)));
         }
     };
     // Debounced search
@@ -5119,23 +5156,40 @@ const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch
     const handleKeyDown = (e) => {
         if (!isOpen) {
             if (e.key === 'ArrowDown') {
-                handleSearch(value);
+                e.preventDefault();
+                // If we have cached results from a previous search, show them
+                if (filteredOptions.length > 0) {
+                    setIsOpen(true);
+                    setHighlightedIndex(findFirstSelectableIndex(filteredOptions));
+                }
+                else if (value.length < minChars && options.length > 0) {
+                    // Show static options when input is empty/below minChars
+                    showStaticOptions();
+                }
+                else if (value.length >= minChars) {
+                    // Otherwise trigger a new search
+                    handleSearch(value);
+                }
             }
             return;
         }
         switch (e.key) {
             case 'ArrowDown':
                 e.preventDefault();
-                setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+                setHighlightedIndex((prev) => findNextSelectableIndex(prev, filteredOptions));
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : -1));
+                setHighlightedIndex((prev) => findPrevSelectableIndex(prev, filteredOptions));
                 break;
             case 'Enter':
                 e.preventDefault();
                 if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
-                    handleSelect(filteredOptions[highlightedIndex]);
+                    const option = filteredOptions[highlightedIndex];
+                    // Don't select headers
+                    if (!option.isHeader) {
+                        handleSelect(option);
+                    }
                 }
                 break;
             case 'Escape':
@@ -5165,7 +5219,16 @@ const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch
             }
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: `relative ${className}`, children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-900 mb-1.5", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: loading ? (jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 text-ink-400 animate-spin" })) : (jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 text-ink-400" })) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => value.length >= minChars && handleSearch(value), placeholder: placeholder, disabled: disabled, className: `
+    return (jsxRuntime.jsxs("div", { className: `relative ${className}`, children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-900 mb-1.5", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: loading ? (jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 text-ink-400 animate-spin" })) : (jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 text-ink-400" })) }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => {
+                            if (showOptionsOnFocus && value.length < minChars && options.length > 0) {
+                                // Show static options when input is empty/below minChars
+                                showStaticOptions();
+                            }
+                            else if (value.length >= minChars) {
+                                // Trigger search if we have enough chars
+                                handleSearch(value);
+                            }
+                        }, placeholder: placeholder, disabled: disabled, className: `
             w-full pl-9 pr-9 py-2
             text-sm text-ink-900 placeholder-ink-400
             bg-white border rounded-lg
@@ -5175,12 +5238,16 @@ const Autocomplete = React.forwardRef(({ value, onChange, options = [], onSearch
             ${error
                             ? 'border-error-500 focus:ring-error-400 focus:border-error-400'
                             : 'border-paper-300'}
-          `, role: "combobox", "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Search' : undefined, "aria-autocomplete": "list", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? `autocomplete-option-${highlightedIndex}` : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : undefined, "aria-busy": loading }), clearable && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "absolute right-3 top-1/2 -translate-y-1/2 text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Clear", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }), isOpen && filteredOptions.length > 0 && (jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: "absolute z-50 w-full mt-1 bg-white border border-paper-200 rounded-lg shadow-lg max-h-60 overflow-y-auto", role: "listbox", "aria-label": "Search results", children: filteredOptions.map((option, index) => (jsxRuntime.jsxs("button", { id: `autocomplete-option-${index}`, type: "button", onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": highlightedIndex === index, className: `
-                w-full text-left px-3 py-2 transition-colors
-                ${highlightedIndex === index
+          `, role: "combobox", "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Search' : undefined, "aria-autocomplete": "list", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? `autocomplete-option-${highlightedIndex}` : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : undefined, "aria-busy": loading }), clearable && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "absolute right-3 top-1/2 -translate-y-1/2 text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Clear", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }), isOpen && filteredOptions.length > 0 && (jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: "absolute z-50 w-full mt-1 bg-white border border-paper-200 rounded-lg shadow-lg max-h-60 overflow-y-auto", role: "listbox", "aria-label": "Search results", children: filteredOptions.map((option, index) => (option.isHeader ? (
+                // Render section header (non-selectable)
+                jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs font-semibold text-ink-500 uppercase tracking-wide bg-paper-50 border-t border-paper-200 first:border-t-0 first:rounded-t-lg cursor-default", role: "presentation", children: option.label }, `header-${option.value}`)) : (
+                // Render selectable option
+                jsxRuntime.jsxs("button", { id: `autocomplete-option-${index}`, type: "button", onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": highlightedIndex === index, className: `
+                  w-full text-left px-3 py-2 transition-colors
+                  ${highlightedIndex === index
                         ? 'bg-accent-50'
                         : 'hover:bg-paper-50'}
-              `, children: [jsxRuntime.jsx("div", { className: "text-sm font-medium text-ink-900", children: option.label }), option.description && (jsxRuntime.jsx("div", { className: "text-xs text-ink-600 mt-0.5", children: option.description }))] }, option.value))) })), isOpen && !loading && filteredOptions.length === 0 && value.length >= minChars && (jsxRuntime.jsx("div", { className: "absolute z-50 w-full mt-1 bg-white border border-paper-200 rounded-lg shadow-lg p-3", role: "status", "aria-live": "polite", children: jsxRuntime.jsx("p", { className: "text-sm text-ink-500 text-center", children: "No results found" }) })), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-1.5 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-ink-600", children: helperText }))] }));
+                `, children: [jsxRuntime.jsx("div", { className: "text-sm font-medium text-ink-900", children: option.label }), option.description && (jsxRuntime.jsx("div", { className: "text-xs text-ink-600 mt-0.5", children: option.description }))] }, option.value)))) })), isOpen && !loading && filteredOptions.length === 0 && value.length >= minChars && (jsxRuntime.jsx("div", { className: "absolute z-50 w-full mt-1 bg-white border border-paper-200 rounded-lg shadow-lg p-3", role: "status", "aria-live": "polite", children: jsxRuntime.jsx("p", { className: "text-sm text-ink-500 text-center", children: "No results found" }) })), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-1.5 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-ink-600", children: helperText }))] }));
 });
 Autocomplete.displayName = 'Autocomplete';