@papernote/ui 1.7.5 → 1.7.7

package/dist/components/Autocomplete.d.ts

@@ -8,6 +8,8 @@ export interface AutocompleteOption {
     label: string;
     description?: string;
     metadata?: Record<string, unknown>;
+    /** If true, renders as a non-selectable section header */
+    isHeader?: boolean;
 }
 export interface AutocompleteProps {
     value: string;
@@ -25,6 +27,8 @@ export interface AutocompleteProps {
     maxResults?: number;
     clearable?: boolean;
     className?: string;
+    /** Show static options dropdown on focus when input is empty. Default: true */
+    showOptionsOnFocus?: boolean;
 }
 declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<AutocompleteHandle>>;
 export default Autocomplete;

package/dist/components/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,8FAqShB,CAAC;AAGH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,YAAY,8FA6WhB,CAAC;AAGH,eAAe,YAAY,CAAC"}

package/dist/index.d.ts

@@ -1966,6 +1966,8 @@ interface AutocompleteOption {
     label: string;
     description?: string;
     metadata?: Record<string, unknown>;
+    /** If true, renders as a non-selectable section header */
+    isHeader?: boolean;
 }
 interface AutocompleteProps {
     value: string;
@@ -1983,6 +1985,8 @@ interface AutocompleteProps {
     maxResults?: number;
     clearable?: boolean;
     className?: string;
+    /** Show static options dropdown on focus when input is empty. Default: true */
+    showOptionsOnFocus?: boolean;
 }
 declare const Autocomplete: React__default.ForwardRefExoticComponent<AutocompleteProps & React__default.RefAttributes<AutocompleteHandle>>;
 

package/dist/index.esm.js

@@ -5007,7 +5007,7 @@ const MaskedInput = forwardRef(({ value, onChange, maskType = 'phone', customMas
 });
 MaskedInput.displayName = 'MaskedInput';
 
-const Autocomplete = 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 = 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] = useState(false);
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -5019,6 +5019,30 @@ const Autocomplete = forwardRef(({ value, onChange, options = [], onSearch, labe
     const labelId = useId();
     const listboxId = useId();
     const errorId = 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
     useImperativeHandle(ref, () => ({
         focus: () => inputRef.current?.focus(),
@@ -5048,11 +5072,14 @@ const Autocomplete = forwardRef(({ value, onChange, options = [], onSearch, labe
                 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);
@@ -5063,6 +5090,16 @@ const Autocomplete = forwardRef(({ value, onChange, options = [], onSearch, labe
             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
@@ -5099,23 +5136,40 @@ const Autocomplete = forwardRef(({ value, onChange, options = [], onSearch, labe
     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':
@@ -5145,7 +5199,16 @@ const Autocomplete = forwardRef(({ value, onChange, options = [], onSearch, labe
             }
         };
     }, []);
-    return (jsxs("div", { className: `relative ${className}`, children: [label && (jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-900 mb-1.5", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxs("div", { className: "relative", children: [jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: loading ? (jsx(Loader2, { className: "h-4 w-4 text-ink-400 animate-spin" })) : (jsx(Search, { className: "h-4 w-4 text-ink-400" })) }), jsx("input", { ref: inputRef, type: "text", value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => value.length >= minChars && handleSearch(value), placeholder: placeholder, disabled: disabled, className: `
+    return (jsxs("div", { className: `relative ${className}`, children: [label && (jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-900 mb-1.5", children: [label, required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxs("div", { className: "relative", children: [jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2", children: loading ? (jsx(Loader2, { className: "h-4 w-4 text-ink-400 animate-spin" })) : (jsx(Search, { className: "h-4 w-4 text-ink-400" })) }), 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
@@ -5155,12 +5218,16 @@ const Autocomplete = forwardRef(({ value, onChange, options = [], onSearch, labe
             ${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 && (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: jsx(X, { className: "h-4 w-4" }) }))] }), isOpen && filteredOptions.length > 0 && (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) => (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 && (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: jsx(X, { className: "h-4 w-4" }) }))] }), isOpen && filteredOptions.length > 0 && (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)
+                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
+                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: [jsx("div", { className: "text-sm font-medium text-ink-900", children: option.label }), option.description && (jsx("div", { className: "text-xs text-ink-600 mt-0.5", children: option.description }))] }, option.value))) })), isOpen && !loading && filteredOptions.length === 0 && value.length >= minChars && (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: jsx("p", { className: "text-sm text-ink-500 text-center", children: "No results found" }) })), error && (jsx("p", { id: errorId, className: "mt-1.5 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsx("p", { className: "mt-1.5 text-xs text-ink-600", children: helperText }))] }));
+                `, children: [jsx("div", { className: "text-sm font-medium text-ink-900", children: option.label }), option.description && (jsx("div", { className: "text-xs text-ink-600 mt-0.5", children: option.description }))] }, option.value)))) })), isOpen && !loading && filteredOptions.length === 0 && value.length >= minChars && (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: jsx("p", { className: "text-sm text-ink-500 text-center", children: "No results found" }) })), error && (jsx("p", { id: errorId, className: "mt-1.5 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsx("p", { className: "mt-1.5 text-xs text-ink-600", children: helperText }))] }));
 });
 Autocomplete.displayName = 'Autocomplete';