@xsolla/xui-select 0.89.0 → 0.91.0

package/native/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Select.tsx
-var import_react4 = __toESM(require("react"));
+var import_react2 = __toESM(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,230 +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 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 = (0, import_react2.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    type,
-    inputMode,
-    autoComplete,
-    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);
-      }
-    };
-    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,
-      {
-        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
-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/Select.tsx
 var import_xui_core = require("@xsolla/xui-core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "svg",
   {
     width: "100%",
@@ -521,7 +273,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_runtime4.jsx)(
       "path",
       {
         d: "M4.5 6.75L9 11.25L13.5 6.75",
@@ -533,7 +285,7 @@ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     )
   }
 );
-var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "svg",
   {
     width: "100%",
@@ -541,7 +293,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_runtime4.jsx)(
       "path",
       {
         d: "M13.5 11.25L9 6.75L4.5 11.25",
@@ -553,7 +305,7 @@ var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     )
   }
 );
-var ExclamationMarkCr = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var ExclamationMarkCr = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
   "svg",
   {
     width: "100%",
@@ -563,15 +315,15 @@ var ExclamationMarkCr = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     style: { stroke: "none" },
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M9.75 12.75C9.75 13.16 9.41 13.5 9 13.5C8.59 13.5 8.25 13.16 8.25 12.75C8.25 12.34 8.59 12 9 12C9.41 12 9.75 12.34 9.75 12.75Z",
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9.75 10.5H8.25V4.5H9.75V10.5Z", fill: "currentColor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9.75 10.5H8.25V4.5H9.75V10.5Z", fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -583,7 +335,7 @@ var ExclamationMarkCr = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     ]
   }
 );
-var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
   "svg",
   {
     width: "100%",
@@ -592,7 +344,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_runtime4.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",
@@ -602,7 +354,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "path",
         {
           d: "M15.75 15.75L12.4875 12.4875",
@@ -636,22 +388,22 @@ var Select = ({
   maxHeight = 300
 }) => {
   const { theme } = (0, import_xui_core.useDesignSystem)();
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
-  const [selectedValue, setSelectedValue] = (0, import_react4.useState)(value);
-  const [searchValue, setSearchValue] = (0, import_react4.useState)("");
-  const containerRef = (0, import_react4.useRef)(null);
-  const dropdownRef = (0, import_react4.useRef)(null);
-  const selectedItemRef = (0, import_react4.useRef)(null);
-  const searchInputRef = (0, import_react4.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [selectedValue, setSelectedValue] = (0, import_react2.useState)(value);
+  const [searchValue, setSearchValue] = (0, import_react2.useState)("");
+  const containerRef = (0, import_react2.useRef)(null);
+  const dropdownRef = (0, import_react2.useRef)(null);
+  const selectedItemRef = (0, import_react2.useRef)(null);
+  const searchInputRef = (0, import_react2.useRef)(null);
   const isDisable = externalState === "disable" || disabled;
   const isError = externalState === "error" || !!errorMessage;
   const isFocus = externalState === "focus" || isOpen;
-  import_react4.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (value !== void 0) {
       setSelectedValue(value);
     }
   }, [value]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (isFocus && selectedItemRef.current && dropdownRef.current) {
       const timeoutId = setTimeout(() => {
         const selectedItem = selectedItemRef.current;
@@ -662,17 +414,17 @@ var Select = ({
       return () => clearTimeout(timeoutId);
     }
   }, [isFocus]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (isFocus && searchable) {
       searchInputRef.current?.focus();
     }
   }, [isFocus, searchable]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!isFocus) {
       setSearchValue("");
     }
   }, [isFocus]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (import_xui_core.isNative || !isOpen) return;
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -736,7 +488,7 @@ var Select = ({
   ) : placeholder;
   const textColor = isDisable ? inputColors.textDisable : selectedValue ? inputColors.text : inputColors.placeholder;
   const iconColor = isDisable ? inputColors.textDisable : inputColors.text;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Box,
     {
       ref: containerRef,
@@ -745,7 +497,7 @@ var Select = ({
       width: "100%",
       position: "relative",
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Text,
           {
             color: theme.colors.content.secondary,
@@ -754,7 +506,7 @@ var Select = ({
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           Box,
           {
             onPress: handlePress,
@@ -775,8 +527,8 @@ var Select = ({
               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 }) }),
-              !iconOnly && /* @__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_runtime4.jsx)(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
+              !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 Text,
                 {
                   color: textColor,
@@ -785,21 +537,21 @@ var Select = ({
                   children: currentLabel
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
-                isError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
+                isError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   Icon,
                   {
                     size: sizeStyles.iconSize,
                     color: theme.colors.content.alert.primary,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ExclamationMarkCr, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExclamationMarkCr, {})
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronDown, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronDown, {}) })
               ] })
             ]
           }
         ),
-        isFocus && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        isFocus && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           Box,
           {
             ref: dropdownRef,
@@ -816,14 +568,14 @@ var Select = ({
               minWidth: iconOnly ? sizeStyles.height * 3 : void 0
             },
             children: [
-              searchable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              searchable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 Box,
                 {
                   paddingHorizontal: sizeStyles.paddingHorizontal,
                   paddingVertical: sizeStyles.paddingVertical,
                   borderBottomWidth: 1,
                   borderColor: theme.colors.border.secondary,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     Box,
                     {
                       flexDirection: "row",
@@ -831,15 +583,15 @@ var Select = ({
                       gap: sizeStyles.paddingHorizontal / 2,
                       paddingHorizontal: 4,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           Icon,
                           {
                             size: sizeStyles.iconSize - 2,
                             color: inputColors.placeholder,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchIcon, {})
+                            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SearchIcon, {})
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           Box,
                           {
                             as: "input",
@@ -864,7 +616,7 @@ var Select = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 Box,
                 {
                   paddingVertical: 4,
@@ -872,13 +624,13 @@ var Select = ({
                     maxHeight: searchable ? maxHeight - 60 : maxHeight,
                     overflowY: "auto"
                   },
-                  children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     Box,
                     {
                       paddingVertical: sizeStyles.paddingVertical * 2,
                       paddingHorizontal: sizeStyles.paddingHorizontal,
                       alignItems: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                         Text,
                         {
                           color: theme.colors.content.tertiary,
@@ -894,7 +646,7 @@ var Select = ({
                     const isSelected = optionValue === selectedValue;
                     const brandColors = theme.colors.control.brand.primary;
                     const contentColors = theme.colors.content;
-                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       Box,
                       {
                         ref: isSelected ? selectedItemRef : void 0,
@@ -912,7 +664,7 @@ var Select = ({
                         hoverStyle: !isSelected && !isOptionDisabled ? {
                           backgroundColor: theme.colors.control.input.bgHover
                         } : void 0,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           Text,
                           {
                             color: isSelected ? contentColors.on.brand : theme.colors.content.secondary,
@@ -930,7 +682,7 @@ var Select = ({
             ]
           }
         ),
-        isError && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        isError && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Text,
           {
             color: theme.colors.content.alert.primary,