@xsolla/xui-autocomplete 0.65.0 → 0.66.0-pr91.1768892553

package/native/index.d.mts

@@ -1,11 +1,21 @@
 import React from 'react';
 
+interface AutocompleteOption {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
 interface AutocompleteProps {
     value?: string;
     placeholder?: string;
     onValueChange?: (value: string) => void;
-    onSelect?: (option: string) => void;
+    onSelect?: (option: string | AutocompleteOption) => void;
+    /** Simple string options for basic usage */
     options?: string[];
+    /** Rich options with id, label, description, icon */
+    list?: AutocompleteOption[];
     isLoading?: boolean;
     size?: "xl" | "l" | "m" | "s" | "xs";
     state?: "default" | "hover" | "focus" | "disable" | "error";
@@ -14,7 +24,13 @@ interface AutocompleteProps {
     iconLeft?: React.ReactNode;
     chevronRight?: boolean;
     filled?: boolean;
+    /** Maximum height of the dropdown (default: 250) */
+    maxHeight?: number;
+    /** Width of the dropdown (default: matches input width) */
+    dropdownWidth?: number | string;
+    /** Empty state message when no options match */
+    emptyMessage?: string;
 }
 declare const Autocomplete: React.FC<AutocompleteProps>;
 
-export { Autocomplete, type AutocompleteProps };
+export { Autocomplete, type AutocompleteOption, type AutocompleteProps };

package/native/index.d.ts

@@ -1,11 +1,21 @@
 import React from 'react';
 
+interface AutocompleteOption {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
 interface AutocompleteProps {
     value?: string;
     placeholder?: string;
     onValueChange?: (value: string) => void;
-    onSelect?: (option: string) => void;
+    onSelect?: (option: string | AutocompleteOption) => void;
+    /** Simple string options for basic usage */
     options?: string[];
+    /** Rich options with id, label, description, icon */
+    list?: AutocompleteOption[];
     isLoading?: boolean;
     size?: "xl" | "l" | "m" | "s" | "xs";
     state?: "default" | "hover" | "focus" | "disable" | "error";
@@ -14,7 +24,13 @@ interface AutocompleteProps {
     iconLeft?: React.ReactNode;
     chevronRight?: boolean;
     filled?: boolean;
+    /** Maximum height of the dropdown (default: 250) */
+    maxHeight?: number;
+    /** Width of the dropdown (default: matches input width) */
+    dropdownWidth?: number | string;
+    /** Empty state message when no options match */
+    emptyMessage?: string;
 }
 declare const Autocomplete: React.FC<AutocompleteProps>;
 
-export { Autocomplete, type AutocompleteProps };
+export { Autocomplete, type AutocompleteOption, type AutocompleteProps };

package/native/index.js

@@ -518,6 +518,7 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
 
 // src/Autocomplete.tsx
 var import_xui_core = require("@xsolla/xui-core");
+var import_xui_spinner = require("@xsolla/xui-spinner");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
   "svg",
@@ -623,12 +624,28 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     ]
   }
 );
+var mapToContextMenuSize = (size) => {
+  switch (size) {
+    case "xs":
+    case "s":
+      return "s";
+    case "m":
+      return "m";
+    case "l":
+      return "l";
+    case "xl":
+      return "xl";
+    default:
+      return "m";
+  }
+};
 var Autocomplete = ({
   value: propValue,
   placeholder = "Search...",
   onValueChange,
   onSelect,
   options = [],
+  list,
   isLoading = false,
   size = "m",
   state: externalState,
@@ -636,12 +653,17 @@ var Autocomplete = ({
   errorLabel,
   iconLeft = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchIcon, {}),
   chevronRight = true,
-  filled = true
+  filled = true,
+  maxHeight = 250,
+  dropdownWidth,
+  emptyMessage = "No results found"
 }) => {
   const { theme } = (0, import_xui_core.useDesignSystem)();
   const [internalValue, setInternalValue] = (0, import_react4.useState)(propValue || "");
   const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react4.useState)(-1);
   const containerRef = (0, import_react4.useRef)(null);
+  const inputRef = (0, import_react4.useRef)(null);
   const value = propValue !== void 0 ? propValue : internalValue;
   const state = externalState || (isFocused ? "focus" : "default");
   const isDisable = state === "disable";
@@ -649,6 +671,19 @@ var Autocomplete = ({
   const isFocus = state === "focus";
   const sizeStyles = theme.sizing.input(size);
   const inputColors = theme.colors.control.input;
+  const contextMenuSize = mapToContextMenuSize(size);
+  const menuSizeStyles = theme.sizing.contextMenu(contextMenuSize);
+  const normalizedOptions = list || options.map((opt, index) => ({
+    id: String(index),
+    label: opt
+  }));
+  const hasOptions = normalizedOptions.length > 0;
+  const showDropdown = isFocus && (hasOptions || isLoading || value.length > 0);
+  (0, import_react4.useEffect)(() => {
+    if (!showDropdown) {
+      setActiveIndex(-1);
+    }
+  }, [showDropdown]);
   (0, import_react4.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -662,23 +697,81 @@ var Autocomplete = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isFocused]);
+  (0, import_react4.useEffect)(() => {
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && isFocused) {
+        setIsFocused(false);
+      }
+    };
+    if (isFocused) {
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isFocused]);
   const handleInputChange = (text) => {
     if (!isDisable) {
       setInternalValue(text);
       if (onValueChange) onValueChange(text);
-      setIsFocused(true);
+      setActiveIndex(-1);
     }
   };
-  const handleSelect = (option) => {
-    setInternalValue(option);
-    setIsFocused(false);
-    if (onSelect) onSelect(option);
-    if (onValueChange) onValueChange(option);
-  };
+  const handleSelect = (0, import_react4.useCallback)(
+    (option) => {
+      setInternalValue(option.label);
+      setIsFocused(false);
+      if (onSelect) {
+        if (list) {
+          onSelect(option);
+        } else {
+          onSelect(option.label);
+        }
+      }
+      if (onValueChange) onValueChange(option.label);
+    },
+    [list, onSelect, onValueChange]
+  );
   const handleClear = (e) => {
     e.stopPropagation();
     handleInputChange("");
   };
+  const findNextEnabledIndex = (currentIndex, direction) => {
+    const length = normalizedOptions.length;
+    let nextIndex = currentIndex;
+    for (let i = 0; i < length; i++) {
+      nextIndex = (nextIndex + direction + length) % length;
+      if (!normalizedOptions[nextIndex].disabled) {
+        return nextIndex;
+      }
+    }
+    return -1;
+  };
+  const handleInputKeyDown = (event) => {
+    if (!showDropdown || normalizedOptions.length === 0) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActiveIndex((prev) => findNextEnabledIndex(prev, 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActiveIndex((prev) => findNextEnabledIndex(prev, -1));
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (activeIndex >= 0 && activeIndex < normalizedOptions.length) {
+          const option = normalizedOptions[activeIndex];
+          if (!option.disabled) {
+            handleSelect(option);
+          }
+        }
+        break;
+      case "Tab":
+        setIsFocused(false);
+        break;
+    }
+  };
   let backgroundColor = inputColors.bg;
   let borderColor = inputColors.border;
   if (isDisable) {
@@ -699,6 +792,12 @@ var Autocomplete = ({
   const textColor = isDisable ? inputColors.textDisable : inputColors.text;
   const placeholderColor = inputColors.placeholder;
   const iconColor = isDisable ? inputColors.textDisable : inputColors.text;
+  const getItemBackgroundColor = (index, disabled) => {
+    if (activeIndex === index && !disabled) {
+      return theme.colors.control.input.bgHover;
+    }
+    return "transparent";
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Box,
     {
@@ -740,24 +839,49 @@ var Autocomplete = ({
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 InputPrimitive,
                 {
+                  ref: inputRef,
                   value,
                   placeholder,
                   onChangeText: handleInputChange,
                   onFocus: () => !isDisable && setIsFocused(true),
+                  onKeyDown: handleInputKeyDown,
                   disabled: isDisable,
                   color: textColor,
                   fontSize: sizeStyles.fontSize,
-                  placeholderTextColor: placeholderColor
+                  placeholderTextColor: placeholderColor,
+                  role: "combobox",
+                  "aria-expanded": showDropdown,
+                  "aria-haspopup": "listbox",
+                  "aria-controls": "autocomplete-listbox",
+                  "aria-activedescendant": activeIndex >= 0 ? `autocomplete-option-${normalizedOptions[activeIndex]?.id}` : void 0
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
                 value.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { onPress: handleClear, padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize - 2, color: iconColor, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) }) }),
-                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: sizeStyles.iconSize, color: iconColor }) : chevronRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: isFocus ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronDown, {}) }) })
+                chevronRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  Box,
+                  {
+                    alignItems: "center",
+                    justifyContent: "center",
+                    onPress: (e) => {
+                      e.stopPropagation();
+                      if (!isDisable) {
+                        const newFocusState = !isFocused;
+                        setIsFocused(newFocusState);
+                        if (newFocusState && inputRef.current) {
+                          inputRef.current.focus();
+                        }
+                      }
+                    },
+                    style: { cursor: isDisable ? "not-allowed" : "pointer" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: isFocus ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronDown, {}) })
+                  }
+                )
               ] })
             ]
           }
         ),
-        isFocus && (options.length > 0 || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showDropdown && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Box,
           {
             position: "absolute",
@@ -768,33 +892,96 @@ var Autocomplete = ({
             borderColor: theme.colors.border.secondary,
             borderWidth: 1,
             borderRadius: theme.radius.button,
-            paddingVertical: 4,
+            paddingVertical: menuSizeStyles.paddingVertical,
+            width: dropdownWidth,
             style: {
               zIndex: 1e3,
-              boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-              maxHeight: 250,
+              boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+              maxHeight,
               overflowY: "auto"
             },
-            children: isLoading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { padding: 12, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: 24, color: theme.colors.content.secondary }) }) : options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            id: "autocomplete-listbox",
+            role: "listbox",
+            "aria-label": "Autocomplete suggestions",
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Box,
               {
-                paddingHorizontal: sizeStyles.padding,
-                paddingVertical: 8,
-                onPress: () => handleSelect(option),
-                hoverStyle: {
-                  backgroundColor: theme.colors.control.input.bgHover
+                padding: 16,
+                alignItems: "center",
+                justifyContent: "center",
+                minHeight: 60,
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_xui_spinner.Spinner, { size: "m", color: theme.colors.control.brand.primary.bg })
+              }
+            ) : hasOptions ? normalizedOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              Box,
+              {
+                id: `autocomplete-option-${option.id}`,
+                role: "option",
+                "aria-selected": activeIndex === index,
+                "aria-disabled": option.disabled,
+                flexDirection: "row",
+                alignItems: option.description ? "flex-start" : "center",
+                gap: menuSizeStyles.gap,
+                paddingHorizontal: menuSizeStyles.itemPaddingHorizontal,
+                paddingVertical: menuSizeStyles.itemPaddingVertical,
+                backgroundColor: getItemBackgroundColor(index, option.disabled),
+                hoverStyle: !option.disabled ? { backgroundColor: theme.colors.control.input.bgHover } : void 0,
+                pressStyle: !option.disabled ? { backgroundColor: theme.colors.control.input.bgDisable } : void 0,
+                onPress: () => !option.disabled && handleSelect(option),
+                style: {
+                  cursor: option.disabled ? "not-allowed" : "pointer",
+                  opacity: option.disabled ? 0.5 : 1
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                  Text,
-                  {
-                    color: theme.colors.content.primary,
-                    fontSize: sizeStyles.fontSize,
-                    children: option
-                  }
-                )
+                children: [
+                  option.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    Box,
+                    {
+                      width: menuSizeStyles.iconSize,
+                      marginTop: option.description ? 2 : 0,
+                      alignItems: "center",
+                      justifyContent: "center",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        Icon,
+                        {
+                          size: menuSizeStyles.iconSize,
+                          color: option.disabled ? theme.colors.content.tertiary : theme.colors.content.secondary,
+                          children: option.icon
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      Text,
+                      {
+                        color: option.disabled ? theme.colors.control.input.textDisable : theme.colors.content.primary,
+                        fontSize: menuSizeStyles.fontSize,
+                        fontWeight: "400",
+                        lineHeight: menuSizeStyles.fontSize + 2,
+                        children: option.label
+                      }
+                    ),
+                    option.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      Text,
+                      {
+                        color: theme.colors.content.tertiary,
+                        fontSize: menuSizeStyles.descriptionFontSize,
+                        lineHeight: menuSizeStyles.descriptionFontSize + 2,
+                        children: option.description
+                      }
+                    )
+                  ] })
+                ]
               },
-              index
-            ))
+              option.id
+            )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { padding: 16, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              Text,
+              {
+                color: theme.colors.content.tertiary,
+                fontSize: menuSizeStyles.fontSize,
+                children: emptyMessage
+              }
+            ) })
           }
         ),
         isError && errorLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(