eidos-ui 0.1.0

package/dist/chunk-GI7WPGP2.cjs

@@ -0,0 +1,454 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkCDV2OAS3cjs = require('./chunk-CDV2OAS3.cjs');
+
+
+var _chunkKV2FG7ANcjs = require('./chunk-KV2FG7AN.cjs');
+
+// src/components/Combobox/Combobox.component.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var Combobox = ({
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  onSearch,
+  placeholder = "Search or select\u2026",
+  loading = false,
+  loadingText = "Searching\u2026",
+  emptyText = "No results found",
+  allowFreeText = false,
+  clearable = true,
+  disabled = false,
+  size = "md",
+  label,
+  error,
+  hint,
+  fullWidth = false,
+  className = "",
+  maxHeight = "300px",
+  renderOption
+}) => {
+  const uid = _react.useId.call(void 0, );
+  const containerRef = _react.useRef.call(void 0, null);
+  const comboboxTriggerRef = _react.useRef.call(void 0, null);
+  const dropdownSpanRef = _react.useRef.call(void 0, null);
+  const inputRef = _react.useRef.call(void 0, null);
+  const optionRefs = _react.useRef.call(void 0, []);
+  const isOpenRef = _react.useRef.call(void 0, false);
+  const isControlled = value !== void 0;
+  const getInitialInputValue = () => {
+    const seed = isControlled ? value : defaultValue;
+    if (!seed) return "";
+    const match = options.find((o) => o.value === seed);
+    return match ? match.label : allowFreeText ? seed : "";
+  };
+  const getInitialCommittedValue = () => {
+    return isControlled ? _nullishCoalesce(value, () => ( "")) : _nullishCoalesce(defaultValue, () => ( ""));
+  };
+  const [inputValue, _setInputValue] = _react.useState.call(void 0, getInitialInputValue);
+  const inputValueRef = _react.useRef.call(void 0, inputValue);
+  const setInputValue = _react.useCallback.call(void 0, (v) => {
+    inputValueRef.current = v;
+    _setInputValue(v);
+  }, []);
+  const [committedValue, _setCommittedValue] = _react.useState.call(void 0, getInitialCommittedValue);
+  const committedValueRef = _react.useRef.call(void 0, committedValue);
+  const setCommittedValue = _react.useCallback.call(void 0, (v) => {
+    committedValueRef.current = v;
+    _setCommittedValue(v);
+  }, []);
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [menuKey, setMenuKey] = _react.useState.call(void 0, 0);
+  const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, -1);
+  _react.useEffect.call(void 0, () => {
+    if (!isControlled) return;
+    const v = _nullishCoalesce(value, () => ( ""));
+    const match = options.find((o) => o.value === v);
+    const label2 = match ? match.label : allowFreeText ? v : "";
+    setInputValue(label2);
+    setCommittedValue(v);
+  }, [value, isControlled, options, allowFreeText, setInputValue, setCommittedValue]);
+  const filteredOptions = _react.useMemo.call(void 0, () => {
+    const q = inputValue.toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, inputValue]);
+  _react.useEffect.call(void 0, () => {
+    setFocusedIndex(-1);
+  }, [filteredOptions]);
+  _react.useEffect.call(void 0, () => {
+    optionRefs.current = optionRefs.current.slice(0, filteredOptions.length);
+  }, [filteredOptions.length]);
+  const optionEntries = _react.useMemo.call(void 0, () => {
+    const entries = [];
+    const hasGroups = filteredOptions.some((o) => o.group);
+    if (!hasGroups) {
+      filteredOptions.forEach((option, index) => {
+        entries.push({ type: "option", option, index, key: option.id });
+      });
+      return entries;
+    }
+    const groupMap = /* @__PURE__ */ new Map();
+    for (const option of filteredOptions) {
+      const g = _nullishCoalesce(option.group, () => ( null));
+      if (!groupMap.has(g)) groupMap.set(g, []);
+      groupMap.get(g).push(option);
+    }
+    let optionIndex = 0;
+    for (const [group, opts] of groupMap.entries()) {
+      if (group !== null) {
+        entries.push({ type: "group", group, key: `group-${group}` });
+      }
+      for (const option of opts) {
+        entries.push({ type: "option", option, index: optionIndex++, key: option.id });
+      }
+    }
+    return entries;
+  }, [filteredOptions]);
+  const openDropdown = _react.useCallback.call(void 0, () => {
+    if (isOpenRef.current || disabled) return;
+    _optionalChain([dropdownSpanRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.click, 'call', _3 => _3()]);
+    isOpenRef.current = true;
+    setIsOpen(true);
+  }, [disabled]);
+  const closeDropdown = _react.useCallback.call(void 0, 
+    (revertInput = false) => {
+      isOpenRef.current = false;
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      setMenuKey((prev) => prev + 1);
+      if (revertInput) {
+        const match = options.find((o) => o.value === committedValueRef.current);
+        setInputValue(match ? match.label : allowFreeText ? committedValueRef.current : "");
+      }
+    },
+    [options, allowFreeText, setInputValue]
+  );
+  _react.useEffect.call(void 0, () => {
+    const handleMouseDown = (e) => {
+      if (!isOpenRef.current) return;
+      if (e.defaultPrevented) return;
+      if (_optionalChain([containerRef, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.contains, 'call', _6 => _6(e.target)])) return;
+      isOpenRef.current = false;
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      setMenuKey((prev) => prev + 1);
+      const current = inputValueRef.current;
+      const committed = committedValueRef.current;
+      if (!allowFreeText) {
+        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());
+        if (match) {
+          if (match.value !== committed) {
+            setCommittedValue(match.value);
+            _optionalChain([onChange, 'optionalCall', _7 => _7(match.value)]);
+            setInputValue(match.label);
+          }
+        } else {
+          const revertMatch = options.find((o) => o.value === committed);
+          setInputValue(revertMatch ? revertMatch.label : "");
+        }
+      } else {
+        if (current !== committed) {
+          setCommittedValue(current);
+          _optionalChain([onChange, 'optionalCall', _8 => _8(current)]);
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);
+  const handleFocus = _react.useCallback.call(void 0, () => {
+    openDropdown();
+  }, [openDropdown]);
+  const handleChange = _react.useCallback.call(void 0, 
+    (e) => {
+      const query = e.target.value;
+      setInputValue(query);
+      _optionalChain([onSearch, 'optionalCall', _9 => _9(query)]);
+      if (!isOpenRef.current) openDropdown();
+    },
+    [setInputValue, onSearch, openDropdown]
+  );
+  const handleBlur = _react.useCallback.call(void 0, () => {
+    const current = inputValueRef.current;
+    const committed = committedValueRef.current;
+    setTimeout(() => {
+      if (_optionalChain([containerRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.contains, 'call', _12 => _12(document.activeElement)])) return;
+      isOpenRef.current = false;
+      setIsOpen(false);
+      setFocusedIndex(-1);
+      setMenuKey((prev) => prev + 1);
+      if (!allowFreeText) {
+        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());
+        if (match) {
+          if (match.value !== committed) {
+            setCommittedValue(match.value);
+            _optionalChain([onChange, 'optionalCall', _13 => _13(match.value)]);
+            setInputValue(match.label);
+          } else {
+            setInputValue(match.label);
+          }
+        } else {
+          const revertMatch = options.find((o) => o.value === committed);
+          setInputValue(revertMatch ? revertMatch.label : "");
+        }
+      } else {
+        if (current !== committed) {
+          setCommittedValue(current);
+          _optionalChain([onChange, 'optionalCall', _14 => _14(current)]);
+        }
+      }
+    }, 0);
+  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpenRef.current) {
+            openDropdown();
+            setFocusedIndex(0);
+          } else {
+            setFocusedIndex((prev) => {
+              const next = prev < filteredOptions.length - 1 ? prev + 1 : 0;
+              setTimeout(
+                () => _optionalChain([optionRefs, 'access', _15 => _15.current, 'access', _16 => _16[next], 'optionalAccess', _17 => _17.scrollIntoView, 'call', _18 => _18({
+                  block: "nearest",
+                  behavior: "smooth"
+                })]),
+                0
+              );
+              return next;
+            });
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!isOpenRef.current) {
+            openDropdown();
+            setFocusedIndex(filteredOptions.length - 1);
+          } else {
+            setFocusedIndex((prev) => {
+              const next = prev > 0 ? prev - 1 : filteredOptions.length - 1;
+              setTimeout(
+                () => _optionalChain([optionRefs, 'access', _19 => _19.current, 'access', _20 => _20[next], 'optionalAccess', _21 => _21.scrollIntoView, 'call', _22 => _22({
+                  block: "nearest",
+                  behavior: "smooth"
+                })]),
+                0
+              );
+              return next;
+            });
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (isOpenRef.current && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+            handleOptionSelect(filteredOptions[focusedIndex]);
+          } else if (allowFreeText && inputValue.trim()) {
+            const trimmed = inputValue.trim();
+            setCommittedValue(trimmed);
+            _optionalChain([onChange, 'optionalCall', _23 => _23(trimmed)]);
+            closeDropdown();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          if (isOpenRef.current) {
+            closeDropdown(
+              true
+              /* revert */
+            );
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      disabled,
+      filteredOptions,
+      focusedIndex,
+      allowFreeText,
+      inputValue,
+      onChange,
+      openDropdown,
+      closeDropdown,
+      setCommittedValue
+    ]
+  );
+  const handleOptionSelect = _react.useCallback.call(void 0, 
+    (option) => {
+      if (option.disabled) return;
+      setInputValue(option.label);
+      setCommittedValue(option.value);
+      _optionalChain([onChange, 'optionalCall', _24 => _24(option.value)]);
+      closeDropdown();
+      _optionalChain([inputRef, 'access', _25 => _25.current, 'optionalAccess', _26 => _26.focus, 'call', _27 => _27()]);
+    },
+    [onChange, closeDropdown, setInputValue, setCommittedValue]
+  );
+  const handleClearClick = _react.useCallback.call(void 0, () => {
+    setInputValue("");
+    setCommittedValue("");
+    _optionalChain([onChange, 'optionalCall', _28 => _28("")]);
+    _optionalChain([inputRef, 'access', _29 => _29.current, 'optionalAccess', _30 => _30.focus, 'call', _31 => _31()]);
+  }, [onChange, setInputValue, setCommittedValue]);
+  const handleChevronClick = _react.useCallback.call(void 0, () => {
+    if (isOpenRef.current) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+  }, [closeDropdown, openDropdown]);
+  const renderOptionItem = _react.useCallback.call(void 0, 
+    (option, index) => {
+      const isSelected = option.value === committedValue;
+      const isFocused = index === focusedIndex;
+      const classes = [
+        "eidos-combobox-option",
+        isSelected && "eidos-combobox-option--selected",
+        isFocused && "eidos-combobox-option--focused",
+        option.disabled && "eidos-combobox-option--disabled"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          ref: (el) => {
+            optionRefs.current[index] = el;
+          },
+          className: classes,
+          onClick: () => handleOptionSelect(option),
+          onMouseEnter: () => !option.disabled && setFocusedIndex(index),
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": option.disabled,
+          id: `${uid}-option-${index}`,
+          children: renderOption ? renderOption(option) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _lucidereact.Check,
+              {
+                className: `eidos-combobox-option-icon${!isSelected ? " eidos-combobox-option-icon--hidden" : ""}`
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-combobox-option-label", children: option.label }),
+            option.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-combobox-option-description", children: option.description })
+          ] })
+        },
+        option.id
+      );
+    },
+    [committedValue, focusedIndex, handleOptionSelect, renderOption, uid]
+  );
+  const dropdownContent = _react.useMemo.call(void 0, () => {
+    if (loading) {
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-combobox-loading", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Loader2, { className: "eidos-combobox-loading-icon" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: loadingText })
+      ] });
+    }
+    if (filteredOptions.length === 0) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-combobox-empty", children: emptyText });
+    }
+    return optionEntries.map((entry) => {
+      if (entry.type === "group") {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-combobox-option-group-label", children: entry.group }, entry.key);
+      }
+      return renderOptionItem(entry.option, entry.index);
+    });
+  }, [loading, loadingText, filteredOptions.length, emptyText, optionEntries, renderOptionItem]);
+  const hasClearableValue = clearable && !!inputValue;
+  const posIcon = hasClearableValue ? _lucidereact.X : _lucidereact.ChevronDown;
+  const posIconClick = hasClearableValue ? handleClearClick : handleChevronClick;
+  const containerClasses = [
+    "eidos-combobox",
+    fullWidth && "eidos-combobox--fullWidth",
+    error && "eidos-combobox--error",
+    disabled && "eidos-combobox--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const maxHeightValue = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      ref: containerRef,
+      className: containerClasses,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: comboboxTriggerRef, className: "eidos-combobox-trigger", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkCDV2OAS3cjs.Input,
+            {
+              ref: inputRef,
+              value: inputValue,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              size,
+              fullWidth: true,
+              label,
+              clearable: false,
+              isSelect: false,
+              posIcon,
+              posIconButton: true,
+              onPosIconClick: posIconClick,
+              "aria-autocomplete": "list",
+              "aria-controls": `${uid}-listbox`,
+              "aria-activedescendant": focusedIndex >= 0 ? `${uid}-option-${focusedIndex}` : void 0
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkKV2FG7ANcjs.Dropdown,
+            {
+              trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  ref: dropdownSpanRef,
+                  className: "eidos-combobox-dropdown-anchor",
+                  "aria-hidden": "true"
+                }
+              ),
+              content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "div",
+                {
+                  id: `${uid}-listbox`,
+                  className: "eidos-combobox-options",
+                  role: "listbox",
+                  "aria-label": _nullishCoalesce(label, () => ( "Options")),
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: dropdownContent
+                }
+              ),
+              triggerRef: comboboxTriggerRef,
+              maxHeight: maxHeightValue,
+              autoWidth: true,
+              closeOnClickOutside: false,
+              closeOnEscape: false
+            },
+            menuKey
+          )
+        ] }),
+        hint && !error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-combobox-hint", children: hint }),
+        error && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "eidos-combobox-error-message", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleAlert, { className: "eidos-combobox-error-icon" }),
+          error
+        ] })
+      ]
+    }
+  );
+};
+Combobox.displayName = "Combobox";
+
+
+
+exports.Combobox = Combobox;
+//# sourceMappingURL=chunk-GI7WPGP2.cjs.map

package/dist/chunk-GI7WPGP2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-GI7WPGP2.cjs","../src/components/Combobox/Combobox.component.tsx"],"names":["label"],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-GI7WPGP2.cjs","sourcesContent":[null,"import React, { useState, useCallback, useRef, useEffect, useMemo, useId } from 'react';\r\nimport { Check, ChevronDown, X, Loader2, CircleAlert } from 'lucide-react';\r\nimport { Input } from '../Input/Input.component';\r\nimport { Dropdown } from '../Dropdown/Dropdown.component';\r\nimport type { ComboboxProps, ComboboxOption } from './Combobox.types';\r\nimport './Combobox.scss';\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\ntype OptionEntry =\r\n  | { type: 'group'; group: string; key: string }\r\n  | { type: 'option'; option: ComboboxOption; index: number; key: string };\r\n\r\n// ─── Component ───────────────────────────────────────────────────────────────\r\n\r\nexport const Combobox: React.FC<ComboboxProps> = ({\r\n  options = [],\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  onSearch,\r\n  placeholder = 'Search or select…',\r\n  loading = false,\r\n  loadingText = 'Searching…',\r\n  emptyText = 'No results found',\r\n  allowFreeText = false,\r\n  clearable = true,\r\n  disabled = false,\r\n  size = 'md',\r\n  label,\r\n  error,\r\n  hint,\r\n  fullWidth = false,\r\n  className = '',\r\n  maxHeight = '300px',\r\n  renderOption,\r\n}) => {\r\n  const uid = useId();\r\n\r\n  // ─── Refs ─────────────────────────────────────────────────────────────────\r\n\r\n  /** Entire combobox wrapper - used for click-outside detection */\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  /** The trigger wrapper div - passed to Dropdown as externalTriggerRef for width */\r\n  const comboboxTriggerRef = useRef<HTMLDivElement>(null);\r\n\r\n  /** The 0-height span that IS the Dropdown trigger element - programmatically clicked to open */\r\n  const dropdownSpanRef = useRef<HTMLSpanElement>(null);\r\n\r\n  /** Native input element */\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n  /** Focusable option divs for scroll-into-view */\r\n  const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\r\n\r\n  /**\r\n   * Synchronous open-state flag.\r\n   * React state updates are async; reading this ref inside event handlers\r\n   * gives us the true current value without waiting for a re-render.\r\n   */\r\n  const isOpenRef = useRef(false);\r\n\r\n  // ─── State ────────────────────────────────────────────────────────────────\r\n\r\n  const isControlled = value !== undefined;\r\n\r\n  const getInitialInputValue = (): string => {\r\n    const seed = isControlled ? value : defaultValue;\r\n    if (!seed) return '';\r\n    const match = options.find((o) => o.value === seed);\r\n    return match ? match.label : allowFreeText ? seed : '';\r\n  };\r\n\r\n  const getInitialCommittedValue = (): string => {\r\n    return isControlled ? (value ?? '') : (defaultValue ?? '');\r\n  };\r\n\r\n  const [inputValue, _setInputValue] = useState<string>(getInitialInputValue);\r\n  const inputValueRef = useRef<string>(inputValue);\r\n  const setInputValue = useCallback((v: string) => {\r\n    inputValueRef.current = v;\r\n    _setInputValue(v);\r\n  }, []);\r\n\r\n  const [committedValue, _setCommittedValue] = useState<string>(getInitialCommittedValue);\r\n  const committedValueRef = useRef<string>(committedValue);\r\n  const setCommittedValue = useCallback((v: string) => {\r\n    committedValueRef.current = v;\r\n    _setCommittedValue(v);\r\n  }, []);\r\n\r\n  const [isOpen, setIsOpen] = useState(false);\r\n  const [menuKey, setMenuKey] = useState(0);\r\n  const [focusedIndex, setFocusedIndex] = useState(-1);\r\n\r\n  // ─── Sync controlled value ────────────────────────────────────────────────\r\n\r\n  useEffect(() => {\r\n    if (!isControlled) return;\r\n    const v = value ?? '';\r\n    const match = options.find((o) => o.value === v);\r\n    const label = match ? match.label : allowFreeText ? v : '';\r\n    setInputValue(label);\r\n    setCommittedValue(v);\r\n  }, [value, isControlled, options, allowFreeText, setInputValue, setCommittedValue]);\r\n\r\n  // ─── Derived: filtered options ────────────────────────────────────────────\r\n\r\n  const filteredOptions = useMemo<ComboboxOption[]>(() => {\r\n    const q = inputValue.toLowerCase();\r\n    if (!q) return options;\r\n    return options.filter((o) => o.label.toLowerCase().includes(q));\r\n  }, [options, inputValue]);\r\n\r\n  // Reset focused index when the filtered set changes\r\n  useEffect(() => {\r\n    setFocusedIndex(-1);\r\n  }, [filteredOptions]);\r\n\r\n  // Keep optionRefs array in sync with filteredOptions length\r\n  useEffect(() => {\r\n    optionRefs.current = optionRefs.current.slice(0, filteredOptions.length);\r\n  }, [filteredOptions.length]);\r\n\r\n  // ─── Derived: option entries (with group headers) ─────────────────────────\r\n\r\n  const optionEntries = useMemo<OptionEntry[]>(() => {\r\n    const entries: OptionEntry[] = [];\r\n    const hasGroups = filteredOptions.some((o) => o.group);\r\n\r\n    if (!hasGroups) {\r\n      filteredOptions.forEach((option, index) => {\r\n        entries.push({ type: 'option', option, index, key: option.id });\r\n      });\r\n      return entries;\r\n    }\r\n\r\n    // Build ordered group map while preserving insertion order\r\n    const groupMap = new Map<string | null, ComboboxOption[]>();\r\n    for (const option of filteredOptions) {\r\n      const g = option.group ?? null;\r\n      if (!groupMap.has(g)) groupMap.set(g, []);\r\n      groupMap.get(g)!.push(option);\r\n    }\r\n\r\n    let optionIndex = 0;\r\n    for (const [group, opts] of groupMap.entries()) {\r\n      if (group !== null) {\r\n        entries.push({ type: 'group', group, key: `group-${group}` });\r\n      }\r\n      for (const option of opts) {\r\n        entries.push({ type: 'option', option, index: optionIndex++, key: option.id });\r\n      }\r\n    }\r\n\r\n    return entries;\r\n  }, [filteredOptions]);\r\n\r\n  // ─── Open / Close helpers ─────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Open the dropdown by programmatically clicking the 0-height span trigger.\r\n   * The click bubbles to div.eidos-dropdown-trigger → Dropdown.handleTriggerClick → opens.\r\n   *\r\n   * We set isOpenRef AFTER the synthetic click so that the Dropdown's toggle\r\n   * handler fires while isOpenRef is still false (allowing it to open).\r\n   */\r\n  const openDropdown = useCallback(() => {\r\n    if (isOpenRef.current || disabled) return;\r\n    dropdownSpanRef.current?.click(); // opens the Dropdown (bubbles to trigger)\r\n    isOpenRef.current = true;\r\n    setIsOpen(true);\r\n  }, [disabled]);\r\n\r\n  /**\r\n   * Close the dropdown by remounting it (menuKey increment resets internal state).\r\n   * Optionally revert inputValue to the last committed value.\r\n   */\r\n  const closeDropdown = useCallback(\r\n    (revertInput = false) => {\r\n      isOpenRef.current = false;\r\n      setIsOpen(false);\r\n      setFocusedIndex(-1);\r\n      setMenuKey((prev) => prev + 1);\r\n\r\n      if (revertInput) {\r\n        const match = options.find((o) => o.value === committedValueRef.current);\r\n        setInputValue(match ? match.label : allowFreeText ? committedValueRef.current : '');\r\n      }\r\n    },\r\n    [options, allowFreeText, setInputValue],\r\n  );\r\n\r\n  // ─── Click-outside detection ──────────────────────────────────────────────\r\n\r\n  useEffect(() => {\r\n    const handleMouseDown = (e: MouseEvent) => {\r\n      if (!isOpenRef.current) return;\r\n      // defaultPrevented is set by the listbox's onMouseDown - means the user\r\n      // clicked an option in the portal, not truly outside the combobox.\r\n      if (e.defaultPrevented) return;\r\n      if (containerRef.current?.contains(e.target as Node)) return;\r\n\r\n      // Focus leaving to a non-focusable target: validate and close\r\n      isOpenRef.current = false;\r\n      setIsOpen(false);\r\n      setFocusedIndex(-1);\r\n      setMenuKey((prev) => prev + 1);\r\n\r\n      const current = inputValueRef.current;\r\n      const committed = committedValueRef.current;\r\n\r\n      if (!allowFreeText) {\r\n        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());\r\n        if (match) {\r\n          if (match.value !== committed) {\r\n            setCommittedValue(match.value);\r\n            onChange?.(match.value);\r\n            setInputValue(match.label);\r\n          }\r\n        } else {\r\n          const revertMatch = options.find((o) => o.value === committed);\r\n          setInputValue(revertMatch ? revertMatch.label : '');\r\n        }\r\n      } else {\r\n        if (current !== committed) {\r\n          setCommittedValue(current);\r\n          onChange?.(current);\r\n        }\r\n      }\r\n    };\r\n\r\n    document.addEventListener('mousedown', handleMouseDown);\r\n    return () => document.removeEventListener('mousedown', handleMouseDown);\r\n  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);\r\n\r\n  // ─── Input handlers ───────────────────────────────────────────────────────\r\n\r\n  const handleFocus = useCallback(() => {\r\n    openDropdown();\r\n  }, [openDropdown]);\r\n\r\n  const handleChange = useCallback(\r\n    (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      const query = e.target.value;\r\n      setInputValue(query);\r\n      onSearch?.(query);\r\n      if (!isOpenRef.current) openDropdown();\r\n    },\r\n    [setInputValue, onSearch, openDropdown],\r\n  );\r\n\r\n  /**\r\n   * On blur, validate the typed value against options.\r\n   * A 0ms defer ensures a click on a posIcon button (X / chevron) inside the\r\n   * Input completes its onClick before we run close logic, so we can check\r\n   * document.activeElement reliably.\r\n   */\r\n  const handleBlur = useCallback(() => {\r\n    const current = inputValueRef.current;\r\n    const committed = committedValueRef.current;\r\n\r\n    setTimeout(() => {\r\n      // If focus came back inside the container (e.g., posIcon button clicked),\r\n      // don't close or validate yet.\r\n      if (containerRef.current?.contains(document.activeElement)) return;\r\n\r\n      // Close\r\n      isOpenRef.current = false;\r\n      setIsOpen(false);\r\n      setFocusedIndex(-1);\r\n      setMenuKey((prev) => prev + 1);\r\n\r\n      // Validate\r\n      if (!allowFreeText) {\r\n        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());\r\n        if (match) {\r\n          if (match.value !== committed) {\r\n            setCommittedValue(match.value);\r\n            onChange?.(match.value);\r\n            setInputValue(match.label);\r\n          } else {\r\n            // Normalize the display label (fix casing)\r\n            setInputValue(match.label);\r\n          }\r\n        } else {\r\n          // No match - revert to last committed value\r\n          const revertMatch = options.find((o) => o.value === committed);\r\n          setInputValue(revertMatch ? revertMatch.label : '');\r\n        }\r\n      } else {\r\n        // allowFreeText: commit whatever the user typed\r\n        if (current !== committed) {\r\n          setCommittedValue(current);\r\n          onChange?.(current);\r\n        }\r\n      }\r\n    }, 0);\r\n  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);\r\n\r\n  const handleKeyDown = useCallback(\r\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (disabled) return;\r\n\r\n      switch (e.key) {\r\n        case 'ArrowDown':\r\n          e.preventDefault();\r\n          if (!isOpenRef.current) {\r\n            openDropdown();\r\n            setFocusedIndex(0);\r\n          } else {\r\n            setFocusedIndex((prev) => {\r\n              const next = prev < filteredOptions.length - 1 ? prev + 1 : 0;\r\n              setTimeout(\r\n                () =>\r\n                  optionRefs.current[next]?.scrollIntoView({\r\n                    block: 'nearest',\r\n                    behavior: 'smooth',\r\n                  }),\r\n                0,\r\n              );\r\n              return next;\r\n            });\r\n          }\r\n          break;\r\n\r\n        case 'ArrowUp':\r\n          e.preventDefault();\r\n          if (!isOpenRef.current) {\r\n            openDropdown();\r\n            setFocusedIndex(filteredOptions.length - 1);\r\n          } else {\r\n            setFocusedIndex((prev) => {\r\n              const next = prev > 0 ? prev - 1 : filteredOptions.length - 1;\r\n              setTimeout(\r\n                () =>\r\n                  optionRefs.current[next]?.scrollIntoView({\r\n                    block: 'nearest',\r\n                    behavior: 'smooth',\r\n                  }),\r\n                0,\r\n              );\r\n              return next;\r\n            });\r\n          }\r\n          break;\r\n\r\n        case 'Enter':\r\n          e.preventDefault();\r\n          if (isOpenRef.current && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\r\n            handleOptionSelect(filteredOptions[focusedIndex]);\r\n          } else if (allowFreeText && inputValue.trim()) {\r\n            const trimmed = inputValue.trim();\r\n            setCommittedValue(trimmed);\r\n            onChange?.(trimmed);\r\n            closeDropdown();\r\n          }\r\n          break;\r\n\r\n        case 'Escape':\r\n          e.preventDefault();\r\n          if (isOpenRef.current) {\r\n            closeDropdown(true /* revert */);\r\n          }\r\n          break;\r\n\r\n        default:\r\n          break;\r\n      }\r\n    },\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [\r\n      disabled,\r\n      filteredOptions,\r\n      focusedIndex,\r\n      allowFreeText,\r\n      inputValue,\r\n      onChange,\r\n      openDropdown,\r\n      closeDropdown,\r\n      setCommittedValue,\r\n    ],\r\n  );\r\n\r\n  // ─── Option selection ─────────────────────────────────────────────────────\r\n\r\n  const handleOptionSelect = useCallback(\r\n    (option: ComboboxOption) => {\r\n      if (option.disabled) return;\r\n      setInputValue(option.label);\r\n      setCommittedValue(option.value);\r\n      onChange?.(option.value);\r\n      closeDropdown();\r\n      // Return focus to the input so the user can continue interacting\r\n      inputRef.current?.focus();\r\n    },\r\n    [onChange, closeDropdown, setInputValue, setCommittedValue],\r\n  );\r\n\r\n  // ─── Clear ────────────────────────────────────────────────────────────────\r\n\r\n  const handleClearClick = useCallback(() => {\r\n    setInputValue('');\r\n    setCommittedValue('');\r\n    onChange?.('');\r\n    // Re-focus input so the user can immediately start typing again\r\n    inputRef.current?.focus();\r\n  }, [onChange, setInputValue, setCommittedValue]);\r\n\r\n  // ─── Chevron toggle ───────────────────────────────────────────────────────\r\n\r\n  const handleChevronClick = useCallback(() => {\r\n    if (isOpenRef.current) {\r\n      closeDropdown();\r\n    } else {\r\n      openDropdown();\r\n    }\r\n  }, [closeDropdown, openDropdown]);\r\n\r\n  // ─── Render: individual option ────────────────────────────────────────────\r\n\r\n  const renderOptionItem = useCallback(\r\n    (option: ComboboxOption, index: number): React.ReactNode => {\r\n      const isSelected = option.value === committedValue;\r\n      const isFocused = index === focusedIndex;\r\n\r\n      const classes = [\r\n        'eidos-combobox-option',\r\n        isSelected && 'eidos-combobox-option--selected',\r\n        isFocused && 'eidos-combobox-option--focused',\r\n        option.disabled && 'eidos-combobox-option--disabled',\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ');\r\n\r\n      return (\r\n        <div\r\n          key={option.id}\r\n          ref={(el) => {\r\n            optionRefs.current[index] = el;\r\n          }}\r\n          className={classes}\r\n          onClick={() => handleOptionSelect(option)}\r\n          onMouseEnter={() => !option.disabled && setFocusedIndex(index)}\r\n          role=\"option\"\r\n          aria-selected={isSelected}\r\n          aria-disabled={option.disabled}\r\n          id={`${uid}-option-${index}`}\r\n        >\r\n          {renderOption ? (\r\n            renderOption(option)\r\n          ) : (\r\n            <>\r\n              <Check\r\n                className={`eidos-combobox-option-icon${\r\n                  !isSelected ? ' eidos-combobox-option-icon--hidden' : ''\r\n                }`}\r\n              />\r\n              <span className=\"eidos-combobox-option-label\">{option.label}</span>\r\n              {option.description && (\r\n                <span className=\"eidos-combobox-option-description\">{option.description}</span>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n      );\r\n    },\r\n    [committedValue, focusedIndex, handleOptionSelect, renderOption, uid],\r\n  );\r\n\r\n  // ─── Render: dropdown content ─────────────────────────────────────────────\r\n\r\n  const dropdownContent = useMemo(() => {\r\n    if (loading) {\r\n      return (\r\n        <div className=\"eidos-combobox-loading\">\r\n          <Loader2 className=\"eidos-combobox-loading-icon\" />\r\n          <span>{loadingText}</span>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (filteredOptions.length === 0) {\r\n      return <div className=\"eidos-combobox-empty\">{emptyText}</div>;\r\n    }\r\n\r\n    return optionEntries.map((entry) => {\r\n      if (entry.type === 'group') {\r\n        return (\r\n          <div key={entry.key} className=\"eidos-combobox-option-group-label\">\r\n            {entry.group}\r\n          </div>\r\n        );\r\n      }\r\n      return renderOptionItem(entry.option, entry.index);\r\n    });\r\n  }, [loading, loadingText, filteredOptions.length, emptyText, optionEntries, renderOptionItem]);\r\n\r\n  // ─── posIcon / posIconButton wiring ───────────────────────────────────────\r\n\r\n  const hasClearableValue = clearable && !!inputValue;\r\n  const posIcon = hasClearableValue ? X : ChevronDown;\r\n  const posIconClick = hasClearableValue ? handleClearClick : handleChevronClick;\r\n\r\n  // ─── CSS classes ──────────────────────────────────────────────────────────\r\n\r\n  const containerClasses = [\r\n    'eidos-combobox',\r\n    fullWidth && 'eidos-combobox--fullWidth',\r\n    error && 'eidos-combobox--error',\r\n    disabled && 'eidos-combobox--disabled',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\r\n\r\n  // ─── Render ───────────────────────────────────────────────────────────────\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={containerClasses}\r\n      aria-expanded={isOpen}\r\n      aria-haspopup=\"listbox\"\r\n    >\r\n      <div ref={comboboxTriggerRef} className=\"eidos-combobox-trigger\">\r\n        {/*\r\n          The Input is a direct child of eidos-combobox-trigger.\r\n          It is NOT inside the Dropdown trigger div, so clicking it\r\n          never bubbles to Dropdown.handleTriggerClick and never\r\n          accidentally toggles the dropdown closed mid-edit.\r\n        */}\r\n        <Input\r\n          ref={inputRef}\r\n          value={inputValue}\r\n          onChange={handleChange}\r\n          onFocus={handleFocus}\r\n          onBlur={handleBlur}\r\n          onKeyDown={handleKeyDown}\r\n          placeholder={placeholder}\r\n          disabled={disabled}\r\n          size={size}\r\n          fullWidth\r\n          label={label}\r\n          clearable={false} // we render our own clear via posIcon\r\n          isSelect={false}\r\n          posIcon={posIcon}\r\n          posIconButton\r\n          onPosIconClick={posIconClick}\r\n          aria-autocomplete=\"list\"\r\n          aria-controls={`${uid}-listbox`}\r\n          aria-activedescendant={focusedIndex >= 0 ? `${uid}-option-${focusedIndex}` : undefined}\r\n        />\r\n\r\n        {/*\r\n          The Dropdown trigger is a 0-height span placed AFTER the Input\r\n          in the normal document flow. Its getBoundingClientRect sits at\r\n          exactly the bottom edge of the Input, giving the Dropdown correct\r\n          placement without any click-toggle collision with the Input above.\r\n          closeOnClickOutside and closeOnEscape are disabled because we own\r\n          those interactions in our mousedown listener and onKeyDown handler.\r\n        */}\r\n        <Dropdown\r\n          key={menuKey}\r\n          trigger={\r\n            <span\r\n              ref={dropdownSpanRef}\r\n              className=\"eidos-combobox-dropdown-anchor\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          }\r\n          content={\r\n            <div\r\n              id={`${uid}-listbox`}\r\n              className=\"eidos-combobox-options\"\r\n              role=\"listbox\"\r\n              aria-label={label ?? 'Options'}\r\n              // Prevent the input from blurring when the user clicks an option,\r\n              // and mark this event so the click-outside handler ignores it.\r\n              onMouseDown={(e) => e.preventDefault()}\r\n            >\r\n              {dropdownContent}\r\n            </div>\r\n          }\r\n          triggerRef={comboboxTriggerRef as React.RefObject<HTMLElement | null>}\r\n          maxHeight={maxHeightValue}\r\n          autoWidth\r\n          closeOnClickOutside={false}\r\n          closeOnEscape={false}\r\n        />\r\n      </div>\r\n\r\n      {hint && !error && <span className=\"eidos-combobox-hint\">{hint}</span>}\r\n      {error && (\r\n        <span className=\"eidos-combobox-error-message\">\r\n          <CircleAlert className=\"eidos-combobox-error-icon\" />\r\n          {error}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nCombobox.displayName = 'Combobox';\r\n"]}