@xsolla/xui-autocomplete 0.64.0-pr56.1768440195

package/native/index.mjs

@@ -0,0 +1,784 @@
+// src/Autocomplete.tsx
+import { useState, useRef, useEffect } from "react";
+
+// ../primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+import { Text as RNText } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
+};
+
+// ../primitives-native/src/Spinner.tsx
+import { ActivityIndicator, View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  "aria-describedby": ariaDescribedBy,
+  testID
+}) => {
+  return /* @__PURE__ */ jsx3(
+    View2,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ jsx3(
+        ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-native/src/Icon.tsx
+import React from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Icon = ({ children, color, size }) => {
+  const style = {
+    width: typeof size === "number" ? size : void 0,
+    height: typeof size === "number" ? size : void 0,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        color: child.props.color || color,
+        // Also pass size if child seems to be an icon that needs it
+        size: child.props.size || size
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx4(View3, { style, children: childrenWithProps });
+};
+
+// ../primitives-native/src/Divider.tsx
+import { View as View4 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../primitives-native/src/Input.tsx
+import { forwardRef } from "react";
+import { TextInput as RNTextInput } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var keyboardTypeMap = {
+  text: "default",
+  number: "numeric",
+  email: "email-address",
+  tel: "phone-pad",
+  url: "url",
+  decimal: "decimal-pad"
+};
+var inputModeToKeyboardType = {
+  none: "default",
+  text: "default",
+  decimal: "decimal-pad",
+  numeric: "number-pad",
+  tel: "phone-pad",
+  search: "default",
+  email: "email-address",
+  url: "url"
+};
+var autoCompleteToTextContentType = {
+  "one-time-code": "oneTimeCode",
+  email: "emailAddress",
+  username: "username",
+  password: "password",
+  "new-password": "newPassword",
+  tel: "telephoneNumber",
+  "postal-code": "postalCode",
+  name: "name"
+};
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "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);
+      }
+    };
+    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
+    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
+    return /* @__PURE__ */ jsx6(
+      RNTextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        secureTextEntry: secureTextEntry || type === "password",
+        keyboardType,
+        textContentType,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-native/src/TextArea.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { TextInput as RNTextInput2 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TextAreaPrimitive = forwardRef2(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "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__ */ jsx7(
+      RNTextInput2,
+      {
+        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
+import { useDesignSystem } from "@xsolla/xui-core";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+var SearchIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx8(
+        "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",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M15.75 15.75L12.4875 12.4875",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var ChevronDown = () => /* @__PURE__ */ jsx8(
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx8(
+      "path",
+      {
+        d: "M4.5 6.75L9 11.25L13.5 6.75",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var ChevronUp = () => /* @__PURE__ */ jsx8(
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx8(
+      "path",
+      {
+        d: "M13.5 11.25L9 6.75L4.5 11.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M13.5 4.5L4.5 13.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "path",
+        {
+          d: "M4.5 4.5L13.5 13.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var Autocomplete = ({
+  value: propValue,
+  placeholder = "Search...",
+  onValueChange,
+  onSelect,
+  options = [],
+  isLoading = false,
+  size = "m",
+  state: externalState,
+  label,
+  errorLabel,
+  iconLeft = /* @__PURE__ */ jsx8(SearchIcon, {}),
+  chevronRight = true,
+  filled = true
+}) => {
+  const { theme } = useDesignSystem();
+  const [internalValue, setInternalValue] = useState(propValue || "");
+  const [isFocused, setIsFocused] = useState(false);
+  const containerRef = useRef(null);
+  const value = propValue !== void 0 ? propValue : internalValue;
+  const state = externalState || (isFocused ? "focus" : "default");
+  const isDisable = state === "disable";
+  const isError = state === "error";
+  const isFocus = state === "focus";
+  const sizeStyles = theme.sizing.input(size);
+  const inputColors = theme.colors.control.input;
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsFocused(false);
+      }
+    };
+    if (isFocused) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isFocused]);
+  const handleInputChange = (text) => {
+    if (!isDisable) {
+      setInternalValue(text);
+      if (onValueChange) onValueChange(text);
+      setIsFocused(true);
+    }
+  };
+  const handleSelect = (option) => {
+    setInternalValue(option);
+    setIsFocused(false);
+    if (onSelect) onSelect(option);
+    if (onValueChange) onValueChange(option);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    handleInputChange("");
+  };
+  let backgroundColor = inputColors.bg;
+  let borderColor = inputColors.border;
+  if (isDisable) {
+    backgroundColor = inputColors.bgDisable;
+    borderColor = inputColors.borderDisable;
+  } else if (isError) {
+    borderColor = theme.colors.border.alert;
+  } else if (isFocus) {
+    backgroundColor = theme.colors.control.focus.bg;
+    borderColor = inputColors.borderHover;
+  } else if (state === "hover") {
+    backgroundColor = inputColors.bgHover;
+    borderColor = inputColors.borderHover;
+  }
+  if (filled === false && !isFocus && !isError && state !== "hover") {
+    backgroundColor = "transparent";
+  }
+  const textColor = isDisable ? inputColors.textDisable : inputColors.text;
+  const placeholderColor = inputColors.placeholder;
+  const iconColor = isDisable ? inputColors.textDisable : inputColors.text;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: containerRef,
+      flexDirection: "column",
+      gap: 4,
+      width: "100%",
+      position: "relative",
+      children: [
+        label && /* @__PURE__ */ jsx8(
+          Text,
+          {
+            color: theme.colors.content.secondary,
+            fontSize: sizeStyles.fontSize - 2,
+            fontWeight: "500",
+            marginBottom: 4,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            backgroundColor,
+            borderColor,
+            borderWidth: borderColor !== "transparent" ? 1 : 0,
+            borderRadius: theme.radius.button,
+            height: sizeStyles.height,
+            paddingHorizontal: sizeStyles.padding,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 10,
+            position: "relative",
+            hoverStyle: !isDisable && !isFocus && !isError ? {
+              backgroundColor: inputColors.bgHover,
+              borderColor: inputColors.borderHover
+            } : void 0,
+            children: [
+              iconLeft && /* @__PURE__ */ jsx8(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
+              /* @__PURE__ */ jsx8(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx8(
+                InputPrimitive,
+                {
+                  value,
+                  placeholder,
+                  onChangeText: handleInputChange,
+                  onFocus: () => !isDisable && setIsFocused(true),
+                  disabled: isDisable,
+                  color: textColor,
+                  fontSize: sizeStyles.fontSize,
+                  placeholderTextColor: placeholderColor
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
+                value.length > 0 && !isDisable && /* @__PURE__ */ jsx8(Box, { onPress: handleClear, padding: 2, children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize - 2, color: iconColor, children: /* @__PURE__ */ jsx8(CloseIcon, {}) }) }),
+                isLoading ? /* @__PURE__ */ jsx8(Spinner, { size: sizeStyles.iconSize, color: iconColor }) : chevronRight && /* @__PURE__ */ jsx8(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx8(Icon, { size: sizeStyles.iconSize, color: iconColor, children: isFocus ? /* @__PURE__ */ jsx8(ChevronUp, {}) : /* @__PURE__ */ jsx8(ChevronDown, {}) }) })
+              ] })
+            ]
+          }
+        ),
+        isFocus && (options.length > 0 || isLoading) && /* @__PURE__ */ jsx8(
+          Box,
+          {
+            position: "absolute",
+            top: sizeStyles.height + (label ? 28 : 0) + 4,
+            left: 0,
+            right: 0,
+            backgroundColor: theme.colors.background.secondary,
+            borderColor: theme.colors.border.secondary,
+            borderWidth: 1,
+            borderRadius: theme.radius.button,
+            paddingVertical: 4,
+            style: {
+              zIndex: 1e3,
+              boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+              maxHeight: 250,
+              overflowY: "auto"
+            },
+            children: isLoading && options.length === 0 ? /* @__PURE__ */ jsx8(Box, { padding: 12, alignItems: "center", children: /* @__PURE__ */ jsx8(Spinner, { size: 24, color: theme.colors.content.secondary }) }) : options.map((option, index) => /* @__PURE__ */ jsx8(
+              Box,
+              {
+                paddingHorizontal: sizeStyles.padding,
+                paddingVertical: 8,
+                onPress: () => handleSelect(option),
+                hoverStyle: {
+                  backgroundColor: theme.colors.control.input.bgHover
+                },
+                children: /* @__PURE__ */ jsx8(
+                  Text,
+                  {
+                    color: theme.colors.content.primary,
+                    fontSize: sizeStyles.fontSize,
+                    children: option
+                  }
+                )
+              },
+              index
+            ))
+          }
+        ),
+        isError && errorLabel && /* @__PURE__ */ jsx8(
+          Text,
+          {
+            color: theme.colors.content.alert.primary,
+            fontSize: sizeStyles.fontSize - 2,
+            marginTop: 4,
+            children: errorLabel
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Autocomplete
+};
+//# sourceMappingURL=index.mjs.map