@12-apps/ui 5.0.0 → 5.0.1

package/dist/form/Autocomplete.js

@@ -0,0 +1,768 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/Autocomplete/Autocomplete.tsx
+import { Box as Box2, ClickAwayListener } from "@mui/material";
+
+// src/components/form/Autocomplete/Autocomplete.helpers.ts
+var defaultGetKey = (item) => {
+  if (typeof item === "string") return item;
+  if (typeof item === "object" && item !== null) {
+    const obj = item;
+    return String(obj.id ?? obj.key ?? obj.value ?? obj.label ?? obj);
+  }
+  return String(item);
+};
+var defaultGetLabel = (item) => {
+  if (typeof item === "string") return item;
+  if (typeof item === "object" && item !== null) {
+    const obj = item;
+    return String(obj.label ?? obj.name ?? obj.text ?? obj);
+  }
+  return String(item);
+};
+var defaultGetSuggestionType = (item) => {
+  if (typeof item === "object" && item !== null) {
+    const { type } = item;
+    if (type === "search" || type === "link") return type;
+  }
+  return void 0;
+};
+var defaultGetUrl = (item) => {
+  if (typeof item === "object" && item !== null) {
+    const { url } = item;
+    if (typeof url === "string") return url;
+  }
+  return void 0;
+};
+var defaultOpenLink = (url) => {
+  if (typeof window !== "undefined") {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+};
+function fuzzyMatch(label, query) {
+  let labelIndex = 0;
+  for (let queryIndex = 0; queryIndex < query.length; queryIndex++) {
+    const char = query[queryIndex];
+    if (!char) continue;
+    labelIndex = label.indexOf(char, labelIndex);
+    if (labelIndex === -1) return false;
+    labelIndex++;
+  }
+  return true;
+}
+function matchesQuery(label, query, matchMode) {
+  const haystack = label.toLowerCase();
+  const needle = query.toLowerCase();
+  if (matchMode === "startsWith") return haystack.startsWith(needle);
+  if (matchMode === "fuzzy") return fuzzyMatch(haystack, needle);
+  return haystack.includes(needle);
+}
+function filterSuggestions(suggestions, query, matchMode, getLabel) {
+  if (!query) return suggestions;
+  return suggestions.filter((item) => matchesQuery(getLabel(item), query, matchMode));
+}
+function firstGhostSuggestion(list, inputValue, getLabel, getSuggestionType) {
+  const needle = inputValue.toLowerCase();
+  return list.find((item) => {
+    const label = getLabel(item).toLowerCase();
+    return getSuggestionType(item) !== "link" && label.startsWith(needle) && label !== needle;
+  });
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function highlightLabel(label, query, matchMode) {
+  if (!query || matchMode === "fuzzy") return label;
+  const regex = new RegExp(`(${escapeRegExp(query)})`, "gi");
+  return label.replace(regex, "<mark>$1</mark>");
+}
+
+// src/components/form/Autocomplete/Autocomplete.parts.tsx
+import LinkIcon from "@mui/icons-material/Link";
+import SearchIcon from "@mui/icons-material/Search";
+import {
+  Box,
+  Chip,
+  CircularProgress,
+  List,
+  ListItem,
+  ListItemText,
+  Paper,
+  Popper,
+  TextField,
+  Typography
+} from "@mui/material";
+import { styled } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledPopper = styled(Popper)(({ theme }) => ({
+  zIndex: theme.zIndex.tooltip,
+  width: "100%",
+  maxHeight: 300,
+  overflow: "auto",
+  // Popper.js writes the computed position (and stamps `data-popper-placement`)
+  // in a layout effect that can land AFTER the first paint. Until it does, the
+  // element would paint once unpositioned — at the offset-parent origin, far
+  // left and full width — then jump under the input, a visible per-keystroke
+  // flash as the list re-renders. Hide that unpositioned first frame; it becomes
+  // visible the instant popper assigns a placement.
+  "&:not([data-popper-placement])": { visibility: "hidden" }
+}));
+var InlineSuggestionDisplay = styled("div")(() => ({
+  position: "absolute",
+  pointerEvents: "none",
+  left: "14px",
+  // Match TextField padding
+  top: "50%",
+  transform: "translateY(-50%)",
+  fontSize: "inherit",
+  fontFamily: "inherit",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  zIndex: 1
+}));
+var UserTextTwin = styled("span")({
+  visibility: "hidden"
+});
+var GhostText = styled("span")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  opacity: 0.6
+}));
+var ChipContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(0.5),
+  marginBottom: theme.spacing(1)
+}));
+function suggestionTypeIcon(type) {
+  const sx = { color: "text.secondary", flexShrink: 0 };
+  if (type === "link") return /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", sx });
+  if (type === "search") return /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx });
+  return null;
+}
+function GhostOverlay({ inputValue, ghost }) {
+  return /* @__PURE__ */ jsxs(InlineSuggestionDisplay, { children: [
+    /* @__PURE__ */ jsx(UserTextTwin, { children: inputValue }),
+    /* @__PURE__ */ jsx(GhostText, { children: ghost })
+  ] });
+}
+function AutocompleteInput(props) {
+  const showOverlay = Boolean(props.ghost) && props.showGhost && props.isInputFocused;
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    showOverlay && /* @__PURE__ */ jsx(GhostOverlay, { inputValue: props.inputValue, ghost: props.ghost }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        ref: props.inputRef,
+        fullWidth: true,
+        value: props.inputValue,
+        onChange: props.onChange,
+        onKeyDown: props.onKeyDown,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onCompositionStart: props.onCompositionStart,
+        onCompositionEnd: props.onCompositionEnd,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        autoFocus: props.autoFocus,
+        className: props.inputClassName,
+        InputProps: {
+          startAdornment: props.startAdornment,
+          endAdornment: props.isLoading ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : void 0
+        },
+        inputProps: {
+          role: "combobox",
+          "aria-expanded": props.open,
+          "aria-controls": props.open ? props.listId : void 0,
+          "aria-activedescendant": props.activeDescendant,
+          "aria-autocomplete": "list",
+          "aria-label": props.inputAriaLabel,
+          id: props.id
+        }
+      }
+    )
+  ] });
+}
+function ChipList({
+  items,
+  getKey,
+  getLabel,
+  onRemove,
+  chipClassName
+}) {
+  return /* @__PURE__ */ jsx(ChipContainer, { "data-testid": "selected-items-container", children: items.map((item, index) => /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: getLabel(item),
+      onDelete: () => onRemove(item),
+      size: "small",
+      className: chipClassName,
+      "data-testid": `selected-chip-${index}`
+    },
+    `${getKey(item)}-${index}`
+  )) });
+}
+function DefaultSuggestion({
+  item,
+  state,
+  getLabel,
+  getDescription,
+  getSuggestionType,
+  matchMode
+}) {
+  const label = getLabel(item);
+  const description = getDescription?.(item);
+  const displayLabel = highlightLabel(label, state.query, matchMode);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        width: "100%",
+        // Bold the matched prefix (not a yellow <mark> highlight).
+        "& mark": { backgroundColor: "transparent", color: "inherit", fontWeight: 700 }
+      },
+      children: [
+        suggestionTypeIcon(getSuggestionType(item)),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: displayLabel } }),
+            secondary: description
+          }
+        )
+      ]
+    }
+  );
+}
+function LoadingRow() {
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+    /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Loading..." })
+  ] }) });
+}
+function NoResultsRow() {
+  return /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No results found" }) });
+}
+var SAME_WIDTH_MODIFIER = {
+  name: "sameWidth",
+  enabled: true,
+  fn: ({ state }) => {
+    if (state.elements.reference && state.styles.popper) {
+      state.styles.popper.width = `${state.rects.reference.width}px`;
+    }
+  },
+  phase: "beforeWrite",
+  requires: ["computeStyles"]
+};
+function SuggestionListBox({
+  open,
+  anchorEl,
+  portal,
+  listRef,
+  listId,
+  optionIdPrefix,
+  items,
+  activeIndex,
+  isLoading,
+  showNoResults,
+  getKey,
+  onSelect,
+  onHover,
+  renderItem,
+  listClassName,
+  itemClassName,
+  activeItemClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    StyledPopper,
+    {
+      open,
+      anchorEl,
+      placement: "bottom-start",
+      disablePortal: !portal,
+      modifiers: [SAME_WIDTH_MODIFIER],
+      children: /* @__PURE__ */ jsx(Paper, { elevation: 8, className: listClassName, "data-testid": "suggestions-dropdown", children: /* @__PURE__ */ jsxs(
+        List,
+        {
+          ref: listRef,
+          role: "listbox",
+          id: listId,
+          dense: true,
+          sx: { maxHeight: 300, overflow: "auto" },
+          "data-testid": "suggestions-list",
+          children: [
+            items.map((item, index) => /* @__PURE__ */ jsx(
+              ListItem,
+              {
+                id: `${optionIdPrefix}-${index}`,
+                role: "option",
+                component: "div",
+                sx: {
+                  cursor: "pointer",
+                  backgroundColor: index === activeIndex ? "action.hover" : "transparent",
+                  "&:hover": { backgroundColor: "action.hover" }
+                },
+                "aria-selected": index === activeIndex,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => onSelect(item),
+                onMouseEnter: () => onHover(index),
+                className: `${itemClassName} ${index === activeIndex ? activeItemClassName : ""}`,
+                "data-testid": `suggestion-item-${index}`,
+                children: renderItem(item, index === activeIndex)
+              },
+              getKey(item)
+            )),
+            isLoading && /* @__PURE__ */ jsx(LoadingRow, {}),
+            showNoResults && /* @__PURE__ */ jsx(NoResultsRow, {})
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/form/Autocomplete/useAutocomplete.ts
+import { useEffect, useId, useRef, useState } from "react";
+
+// src/components/form/Autocomplete/Autocomplete.keys.ts
+function canAcceptGhost(ctx) {
+  return Boolean(ctx.ghost) && ctx.isInputFocused && ctx.filteredSuggestions.length > 0;
+}
+function commitCompletion(ctx, newValue) {
+  ctx.setJustCompletedGhost(true);
+  ctx.setInputValue(newValue);
+  ctx.debouncedOnChange(newValue);
+  ctx.setGhost("");
+  ctx.setOpen(false);
+  ctx.setActiveIndex(-1);
+}
+var onArrowDown = (event, ctx) => {
+  event.preventDefault();
+  if (!ctx.open && ctx.filteredSuggestions.length > 0) {
+    ctx.setOpen(true);
+    ctx.setUserClosedDropdown(false);
+  }
+  const max = Math.min(ctx.filteredSuggestions.length - 1, ctx.maxVisibleItems - 1);
+  ctx.setActiveIndex((prev) => prev < max ? prev + 1 : prev);
+};
+var onArrowUp = (event, ctx) => {
+  event.preventDefault();
+  ctx.setActiveIndex((prev) => prev > 0 ? prev - 1 : -1);
+};
+var onEnter = (event, ctx) => {
+  event.preventDefault();
+  const inRange = ctx.open && ctx.activeIndex >= 0 && ctx.activeIndex < ctx.filteredSuggestions.length;
+  if (inRange) {
+    const selected = ctx.filteredSuggestions[ctx.activeIndex];
+    if (selected) ctx.selectItem(selected);
+  } else if (ctx.allowFreeText && ctx.inputValue.trim()) {
+    ctx.setOpen(false);
+  }
+};
+var onTab = (event, ctx) => {
+  if (!canAcceptGhost(ctx)) return;
+  event.preventDefault();
+  commitCompletion(ctx, ctx.inputValue + ctx.ghost);
+};
+var onArrowRight = (event, ctx) => {
+  if (!canAcceptGhost(ctx)) return;
+  event.preventDefault();
+  const first = firstGhostSuggestion(
+    ctx.filteredSuggestions,
+    ctx.inputValue,
+    ctx.getLabel,
+    ctx.getSuggestionType
+  );
+  commitCompletion(ctx, first ? ctx.getLabel(first) : ctx.inputValue);
+};
+var onEscape = (event, ctx) => {
+  event.preventDefault();
+  ctx.setOpen(false);
+  ctx.setActiveIndex(-1);
+  ctx.setUserClosedDropdown(true);
+  if (event.detail === 2) {
+    ctx.setInputValue("");
+    ctx.debouncedOnChange("");
+  }
+};
+var onBackspace = (_event, ctx) => {
+  if (ctx.multiple && ctx.inputValue === "" && ctx.selectedItems.length > 0) {
+    ctx.onSelectedItemsChange?.(ctx.selectedItems.slice(0, -1));
+  }
+};
+var KEY_HANDLERS = {
+  ArrowDown: onArrowDown,
+  ArrowUp: onArrowUp,
+  Enter: onEnter,
+  Tab: onTab,
+  ArrowRight: onArrowRight,
+  Escape: onEscape,
+  Backspace: onBackspace
+};
+function handleAutocompleteKey(event, composition, ctx) {
+  if (composition) return;
+  const handler = KEY_HANDLERS[event.key];
+  handler?.(event, ctx);
+}
+
+// src/components/form/Autocomplete/useAutocomplete.ts
+function useAutocompleteState(value, suggestions) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [ghost, setGhost] = useState("");
+  const [inputValue, setInputValue] = useState(value);
+  const [composition, setComposition] = useState(false);
+  const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [justCompletedGhost, setJustCompletedGhost] = useState(false);
+  const [userClosedDropdown, setUserClosedDropdown] = useState(false);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const debounceRef = useRef(void 0);
+  return {
+    open,
+    setOpen,
+    activeIndex,
+    setActiveIndex,
+    ghost,
+    setGhost,
+    inputValue,
+    setInputValue,
+    composition,
+    setComposition,
+    filteredSuggestions,
+    setFilteredSuggestions,
+    isInputFocused,
+    setIsInputFocused,
+    justCompletedGhost,
+    setJustCompletedGhost,
+    userClosedDropdown,
+    setUserClosedDropdown,
+    inputRef,
+    listRef,
+    debounceRef
+  };
+}
+function useValueSync(value, setInputValue) {
+  useEffect(() => setInputValue(value), [value, setInputValue]);
+}
+function useDebounceCleanup(debounceRef) {
+  useEffect(
+    () => () => {
+      if (debounceRef.current) window.clearTimeout(debounceRef.current);
+    },
+    [debounceRef]
+  );
+}
+function useScrollActiveIntoView(activeIndex, optionIdPrefix, listRef) {
+  useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return;
+    document.getElementById(`${optionIdPrefix}-${activeIndex}`)?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, optionIdPrefix, listRef]);
+}
+function useGhostFlagReset(justCompletedGhost, setJustCompletedGhost) {
+  useEffect(() => {
+    if (!justCompletedGhost) return;
+    const timer = setTimeout(() => setJustCompletedGhost(false), 50);
+    return () => clearTimeout(timer);
+  }, [justCompletedGhost, setJustCompletedGhost]);
+}
+function useLoadingOpen(isLoading, inputValue, disabled, setOpen, setActiveIndex) {
+  useEffect(() => {
+    if (isLoading && inputValue.trim().length > 0 && !disabled) setOpen(true);
+    if (disabled) {
+      setOpen(false);
+      setActiveIndex(-1);
+    }
+  }, [isLoading, inputValue, disabled, setOpen, setActiveIndex]);
+}
+function maybeAutoOpen(a, hasResults) {
+  const canAutoOpen = a.inputValue.trim() && a.isInputFocused && !a.composition && !a.justCompletedGhost && !a.userClosedDropdown;
+  if (!canAutoOpen) return;
+  a.setOpen(true);
+  if (hasResults && a.activeIndex === -1) a.setActiveIndex(0);
+}
+function useLocalFilter(p, s) {
+  const propSuggestions = p.suggestions;
+  const getLabel = p.getLabel ?? defaultGetLabel;
+  const matchMode = p.matchMode ?? "contains";
+  const async = Boolean(p.async);
+  const {
+    inputValue,
+    isInputFocused,
+    composition,
+    justCompletedGhost,
+    userClosedDropdown,
+    activeIndex,
+    setFilteredSuggestions,
+    setOpen,
+    setActiveIndex
+  } = s;
+  useEffect(() => {
+    const suggestions = propSuggestions ?? [];
+    if (async || !inputValue) {
+      setFilteredSuggestions(suggestions);
+      return;
+    }
+    const filtered = filterSuggestions(suggestions, inputValue, matchMode, getLabel);
+    setFilteredSuggestions(filtered);
+    maybeAutoOpen(
+      { inputValue, isInputFocused, composition, justCompletedGhost, userClosedDropdown, activeIndex, setOpen, setActiveIndex },
+      filtered.length > 0
+    );
+  }, [
+    propSuggestions,
+    inputValue,
+    async,
+    getLabel,
+    matchMode,
+    isInputFocused,
+    composition,
+    justCompletedGhost,
+    userClosedDropdown,
+    activeIndex,
+    setFilteredSuggestions,
+    setOpen,
+    setActiveIndex
+  ]);
+}
+function useGhostText(p, s) {
+  const getLabel = p.getLabel ?? defaultGetLabel;
+  const getType = p.getSuggestionType ?? defaultGetSuggestionType;
+  const showGhost = p.showGhostText ?? true;
+  const { inputValue, filteredSuggestions, isInputFocused, composition, setGhost } = s;
+  useEffect(() => {
+    if (!inputValue || !isInputFocused || composition || !showGhost) {
+      setGhost("");
+      return;
+    }
+    const first = firstGhostSuggestion(filteredSuggestions, inputValue, getLabel, getType);
+    setGhost(first ? getLabel(first).slice(inputValue.length) : "");
+  }, [inputValue, filteredSuggestions, isInputFocused, composition, showGhost, getLabel, getType, setGhost]);
+}
+function commitMultiSelect(item, p, s, onChange) {
+  const getKey = p.getKey ?? defaultGetKey;
+  const current = p.selectedItems ?? [];
+  if (!current.some((sel) => getKey(sel) === getKey(item))) p.onSelectedItemsChange?.([...current, item]);
+  s.setInputValue("");
+  onChange("");
+  s.setUserClosedDropdown(false);
+}
+function commitSingleSelect(item, p, s, onChange) {
+  const label = (p.getLabel ?? defaultGetLabel)(item);
+  s.setInputValue(label);
+  onChange(label);
+}
+function runSelectItem(item, p, s, onChange) {
+  const url = (p.getUrl ?? defaultGetUrl)(item);
+  const isLink = (p.getSuggestionType ?? defaultGetSuggestionType)(item) === "link" && Boolean(url);
+  if (isLink) {
+    (p.openLink ?? defaultOpenLink)(url, item);
+  } else if (p.multiple) {
+    commitMultiSelect(item, p, s, onChange);
+  } else {
+    commitSingleSelect(item, p, s, onChange);
+  }
+  s.setOpen(false);
+  s.setActiveIndex(-1);
+  p.onSelect?.(item);
+  s.inputRef.current?.focus();
+}
+function buildKeyContext(p, s, selectItem, onChange) {
+  return {
+    open: s.open,
+    activeIndex: s.activeIndex,
+    filteredSuggestions: s.filteredSuggestions,
+    maxVisibleItems: p.maxVisibleItems ?? 10,
+    allowFreeText: p.allowFreeText ?? true,
+    inputValue: s.inputValue,
+    ghost: s.ghost,
+    isInputFocused: s.isInputFocused,
+    multiple: Boolean(p.multiple),
+    selectedItems: p.selectedItems ?? [],
+    getLabel: p.getLabel ?? defaultGetLabel,
+    getSuggestionType: p.getSuggestionType ?? defaultGetSuggestionType,
+    setOpen: s.setOpen,
+    setActiveIndex: s.setActiveIndex,
+    setUserClosedDropdown: s.setUserClosedDropdown,
+    setInputValue: s.setInputValue,
+    setGhost: s.setGhost,
+    setJustCompletedGhost: s.setJustCompletedGhost,
+    debouncedOnChange: onChange,
+    selectItem,
+    onSelectedItemsChange: p.onSelectedItemsChange
+  };
+}
+function useAutocomplete(p) {
+  const componentId = useId();
+  const id = p.id || componentId;
+  const optionIdPrefix = `${id}-option`;
+  const s = useAutocompleteState(p.value, p.suggestions ?? []);
+  const debouncedOnChange = (val) => {
+    if (s.debounceRef.current) window.clearTimeout(s.debounceRef.current);
+    s.debounceRef.current = window.setTimeout(() => p.onChange(val), p.debounceMs ?? 150);
+  };
+  useValueSync(p.value, s.setInputValue);
+  useDebounceCleanup(s.debounceRef);
+  useScrollActiveIntoView(s.activeIndex, optionIdPrefix, s.listRef);
+  useGhostFlagReset(s.justCompletedGhost, s.setJustCompletedGhost);
+  useLoadingOpen(Boolean(p.isLoading), s.inputValue, Boolean(p.disabled), s.setOpen, s.setActiveIndex);
+  useLocalFilter(p, s);
+  useGhostText(p, s);
+  const selectItem = (item) => runSelectItem(item, p, s, debouncedOnChange);
+  return {
+    id,
+    listId: `${id}-listbox`,
+    optionIdPrefix,
+    state: s,
+    visibleSuggestions: s.filteredSuggestions.slice(0, p.maxVisibleItems ?? 10),
+    activeDescendant: s.activeIndex >= 0 ? `${optionIdPrefix}-${s.activeIndex}` : void 0,
+    selectItem,
+    removeSelectedItem: (item) => {
+      const getKey = p.getKey ?? defaultGetKey;
+      p.onSelectedItemsChange?.((p.selectedItems ?? []).filter((sel) => getKey(sel) !== getKey(item)));
+      s.inputRef.current?.focus();
+    },
+    onKeyDown: (e) => handleAutocompleteKey(e, s.composition, buildKeyContext(p, s, selectItem, debouncedOnChange)),
+    onInputChange: (e) => {
+      s.setInputValue(e.target.value);
+      debouncedOnChange(e.target.value);
+      if (!s.open || s.filteredSuggestions.length === 0) s.setActiveIndex(-1);
+      s.setUserClosedDropdown(false);
+    },
+    onFocus: () => {
+      s.setIsInputFocused(true);
+      s.setUserClosedDropdown(false);
+      if (!s.inputValue.trim()) return;
+      s.setOpen(true);
+      if (s.filteredSuggestions.length > 0 && s.activeIndex === -1) s.setActiveIndex(0);
+    },
+    onBlur: () => {
+      window.setTimeout(() => s.setIsInputFocused(false), 150);
+    },
+    onClickAway: () => {
+      s.setOpen(false);
+      s.setActiveIndex(-1);
+      s.setUserClosedDropdown(true);
+    }
+  };
+}
+
+// src/components/form/Autocomplete/Autocomplete.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function resolveRenderConfig(p) {
+  return {
+    getKey: p.getKey ?? defaultGetKey,
+    getLabel: p.getLabel ?? defaultGetLabel,
+    getSuggestionType: p.getSuggestionType ?? defaultGetSuggestionType,
+    getDescription: p.getDescription,
+    renderSuggestion: p.renderSuggestion,
+    matchMode: p.matchMode ?? "contains",
+    multiple: Boolean(p.multiple),
+    selectedItems: p.selectedItems ?? [],
+    isLoading: Boolean(p.isLoading),
+    showGhostText: p.showGhostText ?? true,
+    placeholder: p.placeholder ?? "Type to search...",
+    autoFocus: Boolean(p.autoFocus),
+    disabled: Boolean(p.disabled),
+    portal: p.portal ?? false,
+    className: p.className,
+    chipClassName: p.chipClassName,
+    inputAriaLabel: p.inputAriaLabel,
+    inputClassName: p.inputClassName,
+    listClassName: p.listClassName,
+    itemClassName: p.itemClassName,
+    activeItemClassName: p.activeItemClassName
+  };
+}
+function renderSuggestionNode(item, active, query, cfg) {
+  if (cfg.renderSuggestion) return cfg.renderSuggestion(item, { active, query });
+  return /* @__PURE__ */ jsx2(
+    DefaultSuggestion,
+    {
+      item,
+      state: { active, query },
+      getLabel: cfg.getLabel,
+      getDescription: cfg.getDescription,
+      getSuggestionType: cfg.getSuggestionType,
+      matchMode: cfg.matchMode
+    }
+  );
+}
+var Autocomplete = (props) => {
+  const cfg = resolveRenderConfig(props);
+  const view = useAutocomplete(props);
+  const s = view.state;
+  const showNoResults = !cfg.isLoading && view.visibleSuggestions.length === 0 && Boolean(s.inputValue.trim());
+  return /* @__PURE__ */ jsx2(ClickAwayListener, { onClickAway: view.onClickAway, children: /* @__PURE__ */ jsxs2(Box2, { className: cfg.className, "data-testid": "autocomplete-container", children: [
+    cfg.multiple && cfg.selectedItems.length > 0 && /* @__PURE__ */ jsx2(
+      ChipList,
+      {
+        items: cfg.selectedItems,
+        getKey: cfg.getKey,
+        getLabel: cfg.getLabel,
+        onRemove: view.removeSelectedItem,
+        chipClassName: cfg.chipClassName
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      AutocompleteInput,
+      {
+        id: view.id,
+        listId: view.listId,
+        inputRef: s.inputRef,
+        inputValue: s.inputValue,
+        ghost: s.ghost,
+        showGhost: cfg.showGhostText,
+        isInputFocused: s.isInputFocused,
+        open: s.open,
+        activeDescendant: view.activeDescendant,
+        isLoading: cfg.isLoading,
+        disabled: cfg.disabled,
+        autoFocus: cfg.autoFocus,
+        placeholder: cfg.placeholder,
+        startAdornment: props.startAdornment,
+        inputAriaLabel: cfg.inputAriaLabel,
+        inputClassName: cfg.inputClassName,
+        onChange: view.onInputChange,
+        onKeyDown: view.onKeyDown,
+        onFocus: view.onFocus,
+        onBlur: view.onBlur,
+        onCompositionStart: () => s.setComposition(true),
+        onCompositionEnd: () => s.setComposition(false)
+      }
+    ),
+    s.open && /* @__PURE__ */ jsx2(
+      SuggestionListBox,
+      {
+        open: s.open,
+        anchorEl: s.inputRef.current,
+        portal: cfg.portal,
+        listRef: s.listRef,
+        listId: view.listId,
+        optionIdPrefix: view.optionIdPrefix,
+        items: view.visibleSuggestions,
+        activeIndex: s.activeIndex,
+        isLoading: cfg.isLoading,
+        showNoResults,
+        getKey: cfg.getKey,
+        onSelect: view.selectItem,
+        onHover: s.setActiveIndex,
+        renderItem: (item, active) => renderSuggestionNode(item, active, s.inputValue, cfg),
+        listClassName: cfg.listClassName,
+        itemClassName: cfg.itemClassName,
+        activeItemClassName: cfg.activeItemClassName
+      }
+    )
+  ] }) });
+};
+Autocomplete.displayName = "Autocomplete";
+var Autocomplete_default = Autocomplete;
+export {
+  Autocomplete,
+  Autocomplete_default as default
+};
+//# sourceMappingURL=Autocomplete.js.map