@xsolla/xui-autocomplete 0.89.0 → 0.90.0

package/native/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Autocomplete.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -238,41 +238,10 @@ var Text = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
 };
 
-// ../primitives-native/src/Spinner.tsx
-var import_react_native3 = require("react-native");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Spinner = ({
-  color,
-  size,
-  role,
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive,
-  testID
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react_native3.View,
-    {
-      accessible: true,
-      accessibilityRole: role === "status" ? "none" : void 0,
-      accessibilityLabel: ariaLabel,
-      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
-      testID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native3.ActivityIndicator,
-        {
-          color,
-          size: typeof size === "number" ? size : "small"
-        }
-      )
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
 // ../primitives-native/src/Icon.tsx
 var import_react = __toESM(require("react"));
-var import_react_native4 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Icon = ({ children, color, size }) => {
   const style = {
     width: typeof size === "number" ? size : void 0,
@@ -290,17 +259,13 @@ var Icon = ({ children, color, size }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, children: childrenWithProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: childrenWithProps });
 };
 
-// ../primitives-native/src/Divider.tsx
-var import_react_native5 = require("react-native");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-
 // ../primitives-native/src/Input.tsx
 var import_react2 = require("react");
-var import_react_native6 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var keyboardTypeMap = {
   text: "default",
   number: "numeric",
@@ -373,8 +338,8 @@ var InputPrimitive = (0, import_react2.forwardRef)(
     };
     const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
     const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native6.TextInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native4.TextInput,
       {
         ref,
         value,
@@ -420,101 +385,11 @@ var InputPrimitive = (0, import_react2.forwardRef)(
 );
 InputPrimitive.displayName = "InputPrimitive";
 
-// ../primitives-native/src/TextArea.tsx
-var import_react3 = require("react");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native7.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        multiline: true,
-        numberOfLines: rows || 4,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlignVertical: "top",
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-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)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
   "svg",
   {
     width: "100%",
@@ -523,7 +398,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "path",
         {
           d: "M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z",
@@ -533,7 +408,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "path",
         {
           d: "M15.75 15.75L12.4875 12.4875",
@@ -546,7 +421,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     ]
   }
 );
-var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "svg",
   {
     width: "100%",
@@ -554,7 +429,7 @@ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         d: "M4.5 6.75L9 11.25L13.5 6.75",
@@ -566,7 +441,7 @@ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     )
   }
 );
-var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
   "svg",
   {
     width: "100%",
@@ -574,7 +449,7 @@ var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         d: "M13.5 11.25L9 6.75L4.5 11.25",
@@ -586,7 +461,7 @@ var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     )
   }
 );
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
   "svg",
   {
     width: "100%",
@@ -595,7 +470,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "path",
         {
           d: "M13.5 4.5L4.5 13.5",
@@ -605,7 +480,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "path",
         {
           d: "M4.5 4.5L13.5 13.5",
@@ -645,7 +520,7 @@ var Autocomplete = ({
   state: externalState,
   label,
   errorLabel,
-  iconLeft = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchIcon, {}),
+  iconLeft = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchIcon, {}),
   chevronRight = true,
   filled = true,
   maxHeight = 250,
@@ -653,11 +528,11 @@ var Autocomplete = ({
   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 [internalValue, setInternalValue] = (0, import_react3.useState)(propValue || "");
+  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1);
+  const containerRef = (0, import_react3.useRef)(null);
+  const inputRef = (0, import_react3.useRef)(null);
   const value = propValue !== void 0 ? propValue : internalValue;
   const state = externalState || (isFocused ? "focus" : "default");
   const isDisable = state === "disable";
@@ -673,12 +548,12 @@ var Autocomplete = ({
   }));
   const hasOptions = normalizedOptions.length > 0;
   const showDropdown = isFocus && (hasOptions || isLoading || value.length > 0);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!showDropdown) {
       setActiveIndex(-1);
     }
   }, [showDropdown]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsFocused(false);
@@ -691,7 +566,7 @@ var Autocomplete = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isFocused]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape" && isFocused) {
         setIsFocused(false);
@@ -711,7 +586,7 @@ var Autocomplete = ({
       setActiveIndex(-1);
     }
   };
-  const handleSelect = (0, import_react4.useCallback)(
+  const handleSelect = (0, import_react3.useCallback)(
     (option) => {
       setInternalValue(option.label);
       setIsFocused(false);
@@ -792,7 +667,7 @@ var Autocomplete = ({
     }
     return "transparent";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Box,
     {
       ref: containerRef,
@@ -801,7 +676,7 @@ var Autocomplete = ({
       width: "100%",
       position: "relative",
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Text,
           {
             color: theme.colors.content.secondary,
@@ -811,7 +686,7 @@ var Autocomplete = ({
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           Box,
           {
             backgroundColor,
@@ -829,8 +704,8 @@ var Autocomplete = ({
               borderColor: inputColors.borderHover
             } : void 0,
             children: [
-              iconLeft && /* @__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: iconLeft }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              iconLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 InputPrimitive,
                 {
                   ref: inputRef,
@@ -850,9 +725,9 @@ var Autocomplete = ({
                   "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, {}) }) }),
-                chevronRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
+                value.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { onPress: handleClear, padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize - 2, color: iconColor, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) }) }),
+                chevronRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   Box,
                   {
                     alignItems: "center",
@@ -868,14 +743,14 @@ var Autocomplete = ({
                       }
                     },
                     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, {}) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: isFocus ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDown, {}) })
                   }
                 )
               ] })
             ]
           }
         ),
-        showDropdown && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showDropdown && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Box,
           {
             position: "absolute",
@@ -897,14 +772,14 @@ var Autocomplete = ({
             id: "autocomplete-listbox",
             role: "listbox",
             "aria-label": "Autocomplete suggestions",
-            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Box,
               {
                 padding: 16,
                 alignItems: "center",
                 justifyContent: "center",
                 minHeight: 60,
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                   import_xui_spinner.Spinner,
                   {
                     size: "md",
@@ -912,7 +787,7 @@ var Autocomplete = ({
                   }
                 )
               }
-            ) : hasOptions ? normalizedOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            ) : hasOptions ? normalizedOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               Box,
               {
                 id: `autocomplete-option-${option.id}`,
@@ -933,14 +808,14 @@ var Autocomplete = ({
                   opacity: option.disabled ? 0.5 : 1
                 },
                 children: [
-                  option.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  option.icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                     Box,
                     {
                       width: menuSizeStyles.iconSize,
                       marginTop: option.description ? 2 : 0,
                       alignItems: "center",
                       justifyContent: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                         Icon,
                         {
                           size: menuSizeStyles.iconSize,
@@ -950,8 +825,8 @@ var Autocomplete = ({
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       Text,
                       {
                         color: option.disabled ? theme.colors.control.input.textDisable : theme.colors.content.primary,
@@ -961,7 +836,7 @@ var Autocomplete = ({
                         children: option.label
                       }
                     ),
-                    option.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    option.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       Text,
                       {
                         color: theme.colors.content.tertiary,
@@ -974,7 +849,7 @@ var Autocomplete = ({
                 ]
               },
               option.id
-            )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { padding: 16, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            )) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { padding: 16, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Text,
               {
                 color: theme.colors.content.tertiary,
@@ -984,7 +859,7 @@ var Autocomplete = ({
             ) })
           }
         ),
-        isError && errorLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        isError && errorLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Text,
           {
             color: theme.colors.content.alert.primary,