@papernote/ui 2.0.1 → 2.0.2

package/dist/index.js

@@ -2546,9 +2546,9 @@ TimezoneSelector.displayName = 'TimezoneSelector';
  * />
  * ```
  */
-const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, onCreateOption, label, placeholder = 'Search or select...', allowCustomValue = false, loading = false, validationState, validationMessage, helperText, required = false, disabled = false, className = '', size = 'md', }, ref) => {
+const Combobox = React.forwardRef(({ value = "", onChange, options, onSearch, onCreateOption, label, placeholder = "Search or select...", allowCustomValue = false, loading = false, validationState, validationMessage, helperText, required = false, disabled = false, className = "", size = "md", }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
-    const [searchQuery, setSearchQuery] = React.useState('');
+    const [searchQuery, setSearchQuery] = React.useState("");
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
     const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
@@ -2565,23 +2565,26 @@ const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, on
         close: () => setIsOpen(false),
     }));
     // Filter options based on search query
-    const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
+    const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
     // Get display value
-    const selectedOption = options.find(opt => opt.value === value);
-    const displayValue = isOpen ? searchQuery : (selectedOption?.label || value || '');
+    const selectedOption = options.find((opt) => opt.value === value);
+    const displayValue = isOpen
+        ? searchQuery
+        : selectedOption?.label || value || "";
     // Close on click outside
     React.useEffect(() => {
         const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
             }
         };
         if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
+            document.addEventListener("mousedown", handleClickOutside);
         }
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
     // Scroll highlighted option into view
@@ -2589,7 +2592,10 @@ const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, on
         if (isOpen && listRef.current) {
             const highlightedElement = listRef.current.children[highlightedIndex];
             if (highlightedElement) {
-                highlightedElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                highlightedElement.scrollIntoView({
+                    block: "nearest",
+                    behavior: "smooth",
+                });
             }
         }
     }, [highlightedIndex, isOpen]);
@@ -2613,7 +2619,7 @@ const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, on
         if (option.disabled)
             return;
         onChange?.(option.value);
-        setSearchQuery('');
+        setSearchQuery("");
         setIsOpen(false);
         inputRef.current?.blur();
     };
@@ -2621,14 +2627,14 @@ const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, on
     const handleCreateOption = () => {
         if (searchQuery.trim() && onCreateOption) {
             onCreateOption(searchQuery.trim());
-            setSearchQuery('');
+            setSearchQuery("");
             setIsOpen(false);
         }
     };
     // Handle clear
     const handleClear = () => {
-        onChange?.('');
-        setSearchQuery('');
+        onChange?.("");
+        setSearchQuery("");
         inputRef.current?.focus();
     };
     // Keyboard navigation
@@ -2636,22 +2642,22 @@ const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, on
         if (disabled)
             return;
         switch (e.key) {
-            case 'ArrowDown':
+            case "ArrowDown":
                 e.preventDefault();
                 if (!isOpen) {
                     setIsOpen(true);
                 }
                 else {
-                    setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+                    setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
                 }
                 break;
-            case 'ArrowUp':
+            case "ArrowUp":
                 e.preventDefault();
                 if (isOpen) {
-                    setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0));
+                    setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0));
                 }
                 break;
-            case 'Enter':
+            case "Enter":
                 e.preventDefault();
                 if (isOpen && filteredOptions.length > 0) {
                     handleSelectOption(filteredOptions[highlightedIndex]);
@@ -2661,64 +2667,83 @@ const Combobox = React.forwardRef(({ value = '', onChange, options, onSearch, on
                     setIsOpen(false);
                 }
                 break;
-            case 'Escape':
+            case "Escape":
                 e.preventDefault();
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
                 break;
-            case 'Tab':
+            case "Tab":
                 setIsOpen(false);
-                setSearchQuery('');
+                setSearchQuery("");
                 break;
         }
     };
     // Size classes
     const sizeClasses = {
-        sm: 'text-sm py-1.5 px-3',
-        md: 'text-sm py-2 px-3',
-        lg: 'text-base py-2.5 px-4',
+        sm: "text-sm py-1.5 px-3",
+        md: "text-sm py-2 px-3",
+        lg: "text-base py-2.5 px-4",
     };
     const iconSizeClasses = {
-        sm: 'h-4 w-4',
-        md: 'h-4 w-4',
-        lg: 'h-5 w-5',
+        sm: "h-4 w-4",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
     };
     // Validation classes
     const validationClasses = {
-        error: 'border-error-500 focus:ring-error-500 focus:border-error-500',
-        success: 'border-success-500 focus:ring-success-500 focus:border-success-500',
-        warning: 'border-warning-500 focus:ring-warning-500 focus:border-warning-500',
+        error: "border-error-500 focus:ring-error-500 focus:border-error-500",
+        success: "border-success-500 focus:ring-success-500 focus:border-success-500",
+        warning: "border-warning-500 focus:ring-warning-500 focus:border-warning-500",
     };
     const validationMessageColors = {
-        error: 'text-error-600',
-        success: 'text-success-600',
-        warning: 'text-warning-600',
+        error: "text-error-600",
+        success: "text-success-600",
+        warning: "text-warning-600",
     };
     // Check if can create custom option
     const canCreateOption = onCreateOption &&
         searchQuery.trim() &&
-        !filteredOptions.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase());
-    return (jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-700 mb-1", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), placeholder: placeholder, disabled: disabled, className: `
+        !filteredOptions.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase());
+    return (jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "block text-sm font-medium text-ink-700 mb-1", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), onMouseDown: (e) => {
+                                // Toggle close on click when the input is already focused + open.
+                                // Without this, the second click is a no-op because onFocus only
+                                // fires on focus transition.
+                                if (isOpen && document.activeElement === inputRef.current) {
+                                    e.preventDefault();
+                                    setIsOpen(false);
+                                }
+                            }, placeholder: placeholder, disabled: disabled, className: `
               w-full rounded-md border bg-white
               ${sizeClasses[size]}
-              ${validationState ? validationClasses[validationState] : 'border-paper-300 focus:ring-primary-500 focus:border-primary-500'}
-              ${disabled ? 'bg-paper-100 text-ink-400 cursor-not-allowed' : ''}
+              ${validationState ? validationClasses[validationState] : "border-paper-300 focus:ring-primary-500 focus:border-primary-500"}
+              ${disabled ? "bg-paper-100 text-ink-400 cursor-not-allowed" : ""}
               focus:outline-none focus:ring-2
               pr-20
-            `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? 'Combobox' : undefined, "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-activedescendant": isOpen && filteredOptions.length > 0 ? `option-${highlightedIndex}` : undefined, "aria-invalid": validationState === 'error' ? 'true' : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, "aria-required": required, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [loading && (jsxRuntime.jsx("div", { className: "animate-spin", children: jsxRuntime.jsx(lucideReact.Search, { className: `${iconSizeClasses[size]} text-ink-400` }) })), !loading && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] }) })), !loading && (jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${iconSizeClasses[size]} text-ink-400 transition-transform ${isOpen ? 'rotate-180' : ''}` }))] })] }) }), validationMessage && (jsxRuntime.jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : 'text-ink-500'}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsxRuntime.jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 w-full bg-white rounded-md shadow-lg border border-paper-200 max-h-60 overflow-auto", role: "listbox", id: listboxId, "aria-label": "Available options", children: loading ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "Loading..." })) : filteredOptions.length === 0 && !canCreateOption ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "No options found" })) : (jsxRuntime.jsxs("ul", { ref: listRef, children: [filteredOptions.map((option, index) => {
+            `, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? "Combobox" : undefined, "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-activedescendant": isOpen && filteredOptions.length > 0
+                                ? `option-${highlightedIndex}`
+                                : undefined, "aria-invalid": validationState === "error" ? "true" : undefined, "aria-describedby": validationMessage ? descriptionId : undefined, "aria-required": required, role: "combobox" }), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 gap-1", children: [loading && (jsxRuntime.jsx("div", { className: "animate-spin", children: jsxRuntime.jsx(lucideReact.Search, { className: `${iconSizeClasses[size]} text-ink-400` }) })), !loading && value && !disabled && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": "Clear", tabIndex: -1, children: jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] }) })), !loading && !disabled && (jsxRuntime.jsx("button", { type: "button", onMouseDown: (e) => {
+                                        // preventDefault keeps the input from losing focus on
+                                        // mousedown so the toggle stays smooth. Manually re-focus
+                                        // when opening so keyboard nav works immediately.
+                                        e.preventDefault();
+                                        setIsOpen((o) => !o);
+                                        if (!isOpen) {
+                                            inputRef.current?.focus();
+                                        }
+                                    }, className: "p-0.5 text-ink-400 hover:text-ink-600 focus:outline-none", "aria-label": isOpen ? "Close options" : "Open options", tabIndex: -1, children: jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${iconSizeClasses[size]} transition-transform ${isOpen ? "rotate-180" : ""}` }) })), !loading && disabled && (jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${iconSizeClasses[size]} text-ink-400 transition-transform` }))] })] }) }), validationMessage && (jsxRuntime.jsx("p", { id: descriptionId, className: `mt-1 text-xs ${validationState ? validationMessageColors[validationState] : "text-ink-500"}`, role: "alert", "aria-live": "polite", children: validationMessage })), helperText && !validationMessage && (jsxRuntime.jsx("p", { className: "mt-1 text-xs text-ink-500", children: helperText })), isOpen && (jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 w-full bg-white rounded-md shadow-lg border border-paper-200 max-h-60 overflow-auto", role: "listbox", id: listboxId, "aria-label": "Available options", children: loading ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "Loading..." })) : filteredOptions.length === 0 && !canCreateOption ? (jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-ink-500 text-sm", role: "status", "aria-live": "polite", children: "No options found" })) : (jsxRuntime.jsxs("ul", { ref: listRef, children: [filteredOptions.map((option, index) => {
                             const Icon = option.icon;
                             const isSelected = option.value === value;
                             const isHighlighted = index === highlightedIndex;
                             return (jsxRuntime.jsxs("li", { id: `option-${index}`, role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, onClick: () => handleSelectOption(option), onMouseEnter: () => setHighlightedIndex(index), className: `
                       px-3 py-2 cursor-pointer flex items-center justify-between gap-2
-                      ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}
-                      ${isHighlighted ? 'bg-primary-50' : ''}
-                      ${isSelected ? 'bg-primary-100 font-medium' : ''}
+                      ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}
+                      ${isHighlighted ? "bg-primary-50" : ""}
+                      ${isSelected ? "bg-primary-100 font-medium" : ""}
                       hover:bg-primary-50
-                    `, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [Icon && jsxRuntime.jsx(Icon, { className: `${iconSizeClasses[size]} flex-shrink-0 text-ink-600` }), jsxRuntime.jsx("span", { className: "truncate text-sm text-ink-900", children: option.label })] }), isSelected && (jsxRuntime.jsx(lucideReact.Check, { className: `${iconSizeClasses[size]} flex-shrink-0 text-primary-600` }))] }, option.value));
+                    `, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [Icon && (jsxRuntime.jsx(Icon, { className: `${iconSizeClasses[size]} flex-shrink-0 text-ink-600` })), jsxRuntime.jsx("span", { className: "truncate text-sm text-ink-900", children: option.label })] }), isSelected && (jsxRuntime.jsx(lucideReact.Check, { className: `${iconSizeClasses[size]} flex-shrink-0 text-primary-600` }))] }, option.value));
                         }), canCreateOption && (jsxRuntime.jsxs("li", { role: "option", onClick: handleCreateOption, className: "px-3 py-2 cursor-pointer flex items-center gap-2 border-t border-paper-200 hover:bg-primary-50 bg-success-50", children: [jsxRuntime.jsx(lucideReact.Plus, { className: `${iconSizeClasses[size]} text-success-600` }), jsxRuntime.jsxs("span", { className: "text-sm text-success-700 font-medium", children: ["Create \"", searchQuery, "\""] })] }))] })) }))] }));
 });
-Combobox.displayName = 'Combobox';
+Combobox.displayName = "Combobox";
 
 /**
  * FormControl wrapper component for consistent form field layout.
@@ -15816,52 +15841,44 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-var collection;
-var hasRequiredCollection;
-
-function requireCollection () {
-	if (hasRequiredCollection) return collection;
-	hasRequiredCollection = 1;
-	class Collection {
+let Collection$3 = class Collection {
 
-	    constructor(data, refs) {
-	        if (data == null && refs == null) {
-	            this._data = [];
-	            this._refs = [];
-	        } else {
-	            if (data.length !== refs.length)
-	                throw Error('Collection: data length should match references length.');
-	            this._data = data;
-	            this._refs = refs;
-	        }
-	    }
+    constructor(data, refs) {
+        if (data == null && refs == null) {
+            this._data = [];
+            this._refs = [];
+        } else {
+            if (data.length !== refs.length)
+                throw Error('Collection: data length should match references length.');
+            this._data = data;
+            this._refs = refs;
+        }
+    }
 
-	    get data() {
-	        return this._data;
-	    }
+    get data() {
+        return this._data;
+    }
 
-	    get refs() {
-	        return this._refs;
-	    }
+    get refs() {
+        return this._refs;
+    }
 
-	    get length() {
-	        return this._data.length;
-	    }
+    get length() {
+        return this._data.length;
+    }
 
-	    /**
-	     * Add data and references to this collection.
-	     * @param {{}} obj - data
-	     * @param {{}} ref - reference
-	     */
-	    add(obj, ref) {
-	        this._data.push(obj);
-	        this._refs.push(ref);
-	    }
-	}
+    /**
+     * Add data and references to this collection.
+     * @param {{}} obj - data
+     * @param {{}} ref - reference
+     */
+    add(obj, ref) {
+        this._data.push(obj);
+        this._refs.push(ref);
+    }
+};
 
-	collection = Collection;
-	return collection;
-}
+var collection = Collection$3;
 
 var helpers;
 var hasRequiredHelpers;
@@ -15870,7 +15887,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = requireCollection();
+	const Collection = collection;
 
 	const Types = {
 	    NUMBER: 0,
@@ -25524,7 +25541,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = requireCollection();
+const Collection$2 = collection;
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -37152,7 +37169,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = requireCollection();
+const Collection$1 = collection;
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -37914,7 +37931,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = requireCollection();
+const Collection = collection;
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {