@optilogic/core 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/combobox.tsx

@@ -0,0 +1,340 @@
+import * as React from "react";
+import { Check, ChevronDown, X } from "lucide-react";
+
+import { cn } from "../utils/cn";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover";
+import type { AutocompleteOption } from "./autocomplete";
+
+export interface ComboboxProps {
+  /** Array of options to display */
+  options: AutocompleteOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Callback when selection changes */
+  onChange?: (value: string | undefined) => void;
+  /** Callback when the input text changes (for controlled/async filtering) */
+  onInputChange?: (input: string) => void;
+  /** Placeholder text when empty */
+  placeholder?: string;
+  /** Text to show when no options match */
+  emptyText?: string;
+  /** Whether the combobox is disabled */
+  disabled?: boolean;
+  /** Additional class name for the trigger */
+  className?: string;
+  /** Whether to allow clearing the selection */
+  clearable?: boolean;
+  /** Whether to allow custom values not in the options list */
+  allowCustomValue?: boolean;
+}
+
+/**
+ * Combobox component - a searchable input that also allows custom values
+ *
+ * Unlike Autocomplete (button trigger, select-only), Combobox uses an
+ * inline text input as the trigger. Users can type to filter options
+ * AND optionally commit custom values not in the list.
+ *
+ * Features:
+ * - Inline text input trigger
+ * - Dropdown opens on focus/typing
+ * - Grouped options with descriptions
+ * - Custom value support (allowCustomValue)
+ * - Clearable selection
+ * - Async filtering via onInputChange
+ *
+ * @example
+ * <Combobox
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Type or select..."
+ *   allowCustomValue
+ * />
+ */
+export function Combobox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Type or select...",
+  emptyText = "No options found.",
+  disabled = false,
+  className,
+  clearable = false,
+  allowCustomValue = true,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+  // Sync input display with selected value
+  const selectedOption = React.useMemo(
+    () => options.find((opt) => opt.value === value),
+    [options, value]
+  );
+
+  // When value changes externally, update input display
+  React.useEffect(() => {
+    if (!open) {
+      setInputValue(selectedOption?.label ?? value ?? "");
+    }
+  }, [value, selectedOption, open]);
+
+  // Filter options based on input
+  const filteredOptions = React.useMemo(() => {
+    if (!inputValue.trim()) return options;
+    const searchLower = inputValue.toLowerCase();
+    return options.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(searchLower) ||
+        opt.description?.toLowerCase().includes(searchLower)
+    );
+  }, [options, inputValue]);
+
+  // Group options
+  const groupedOptions = React.useMemo(() => {
+    const groups: Record<string, AutocompleteOption[]> = {};
+    const ungrouped: AutocompleteOption[] = [];
+
+    filteredOptions.forEach((opt) => {
+      if (opt.group) {
+        if (!groups[opt.group]) groups[opt.group] = [];
+        groups[opt.group]!.push(opt);
+      } else {
+        ungrouped.push(opt);
+      }
+    });
+
+    return { groups, ungrouped };
+  }, [filteredOptions]);
+
+  const hasGroups = Object.keys(groupedOptions.groups).length > 0;
+
+  const handleInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      onInputChange?.(newValue);
+      if (!open) setOpen(true);
+    },
+    [onInputChange, open]
+  );
+
+  const handleSelect = React.useCallback(
+    (optionValue: string) => {
+      const option = options.find((o) => o.value === optionValue);
+      onChange?.(optionValue);
+      setInputValue(option?.label ?? optionValue);
+      setOpen(false);
+    },
+    [onChange, options]
+  );
+
+  const handleClear = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      onChange?.(undefined);
+      setInputValue("");
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+
+  const handleFocus = React.useCallback(() => {
+    setOpen(true);
+    // Select all text on focus for easy replacement
+    inputRef.current?.select();
+  }, []);
+
+  const handleBlur = React.useCallback(() => {
+    // Delay to allow click events on options to fire
+    setTimeout(() => {
+      // If focus moved outside the wrapper entirely, close
+      if (!wrapperRef.current?.contains(document.activeElement)) {
+        setOpen(false);
+      }
+
+      if (allowCustomValue && inputValue.trim()) {
+        // Check if input matches an existing option label
+        const matchingOption = options.find(
+          (opt) => opt.label.toLowerCase() === inputValue.toLowerCase()
+        );
+        if (matchingOption) {
+          onChange?.(matchingOption.value);
+          setInputValue(matchingOption.label);
+        } else {
+          // Commit custom value
+          onChange?.(inputValue.trim());
+        }
+      } else if (!allowCustomValue) {
+        // Reset to selected option or clear
+        setInputValue(selectedOption?.label ?? "");
+      }
+    }, 200);
+  }, [allowCustomValue, inputValue, options, onChange, selectedOption]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        setInputValue(selectedOption?.label ?? value ?? "");
+        inputRef.current?.blur();
+      } else if (e.key === "Enter" && open) {
+        e.preventDefault();
+        // If there's exactly one filtered option, select it
+        if (filteredOptions.length === 1) {
+          handleSelect(filteredOptions[0]!.value);
+        } else if (allowCustomValue && inputValue.trim()) {
+          // Check for exact match first
+          const exactMatch = filteredOptions.find(
+            (opt) => opt.label.toLowerCase() === inputValue.toLowerCase()
+          );
+          if (exactMatch) {
+            handleSelect(exactMatch.value);
+          } else {
+            onChange?.(inputValue.trim());
+            setOpen(false);
+          }
+        }
+      }
+    },
+    [
+      open,
+      filteredOptions,
+      handleSelect,
+      allowCustomValue,
+      inputValue,
+      onChange,
+      selectedOption,
+      value,
+    ]
+  );
+
+  const renderOption = (option: AutocompleteOption) => (
+    <button
+      key={option.value}
+      type="button"
+      disabled={option.disabled}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => handleSelect(option.value)}
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus:bg-accent focus:text-accent-foreground",
+        option.disabled && "pointer-events-none opacity-50",
+        value === option.value && "bg-accent/50"
+      )}
+    >
+      <span className="flex h-4 w-4 items-center justify-center flex-shrink-0 mt-0.5">
+        {value === option.value && <Check className="h-4 w-4" />}
+      </span>
+      <div className="flex-1 min-w-0">
+        <div className="truncate">{option.label}</div>
+        {option.description && (
+          <div className="text-xs text-muted-foreground truncate">
+            {option.description}
+          </div>
+        )}
+      </div>
+    </button>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div
+          ref={wrapperRef}
+          className={cn(
+            "flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-sm ring-offset-background",
+            "hover:border-input-hover",
+            "focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
+            disabled &&
+              "cursor-not-allowed opacity-50 hover:border-input",
+            className
+          )}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className="flex-1 min-w-0 bg-transparent py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+          />
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {clearable && value && (
+              <span
+                role="button"
+                tabIndex={-1}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={handleClear}
+                className="rounded-sm hover:bg-muted p-0.5"
+              >
+                <X className="h-3.5 w-3.5 text-muted-foreground" />
+              </span>
+            )}
+            <ChevronDown className="h-4 w-4 opacity-50" />
+          </div>
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        className="p-0"
+        style={{ width: wrapperRef.current?.offsetWidth }}
+        align="start"
+        sideOffset={4}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onFocusOutside={(e) => {
+          if (wrapperRef.current?.contains(e.target as Node)) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e) => {
+          if (wrapperRef.current?.contains(e.target as Node)) {
+            e.preventDefault();
+          }
+        }}
+      >
+        {/* Options list */}
+        <div className="max-h-[300px] overflow-y-auto p-1">
+          {filteredOptions.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </div>
+          ) : hasGroups ? (
+            <>
+              {groupedOptions.ungrouped.map(renderOption)}
+              {Object.entries(groupedOptions.groups).map(([group, opts]) => (
+                <div key={group}>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    {group}
+                  </div>
+                  {opts.map(renderOption)}
+                </div>
+              ))}
+            </>
+          ) : (
+            filteredOptions.map(renderOption)
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+Combobox.displayName = "Combobox";
+
+export default Combobox;