@xsolla/xui-multi-select 0.94.0 → 0.95.0

package/native/index.js

@@ -653,6 +653,10 @@ var import_jsx_runtime382 = require("react/jsx-runtime");
 var import_jsx_runtime383 = require("react/jsx-runtime");
 var import_jsx_runtime384 = require("react/jsx-runtime");
 var import_jsx_runtime385 = require("react/jsx-runtime");
+var import_jsx_runtime386 = require("react/jsx-runtime");
+var import_jsx_runtime387 = require("react/jsx-runtime");
+var import_jsx_runtime388 = require("react/jsx-runtime");
+var import_jsx_runtime389 = require("react/jsx-runtime");
 var StyledIcon = import_styled_components.default.div`
   display: inline-flex;
   align-items: center;
@@ -670,15 +674,15 @@ var BaseIcon = ({
   variant = "line",
   size = 24,
   color = "currentColor",
-  solidContent: solidContent382,
-  lineContent: lineContent382,
+  solidContent: solidContent386,
+  lineContent: lineContent386,
   className,
   style,
   "data-testid": testId,
   "aria-label": ariaLabel,
   "aria-hidden": ariaHidden
 }) => {
-  const svgContent = variant === "line" ? lineContent382 : solidContent382;
+  const svgContent = variant === "line" ? lineContent386 : solidContent386;
   const sizeValue = typeof size === "number" ? `${size}px` : size;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     StyledIcon,
@@ -714,16 +718,16 @@ var import_react5 = require("react");
 // ../tag/dist/web/index.mjs
 var import_react4 = __toESM(require("react"), 1);
 var import_styled_components3 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime388 = require("react/jsx-runtime");
+var import_jsx_runtime392 = require("react/jsx-runtime");
 var import_styled_components4 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime389 = require("react/jsx-runtime");
+var import_jsx_runtime393 = require("react/jsx-runtime");
 var import_styled_components5 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime390 = require("react/jsx-runtime");
+var import_jsx_runtime394 = require("react/jsx-runtime");
 var import_xui_core = require("@xsolla/xui-core");
 
 // ../icons/dist/web/index.mjs
 var import_styled_components2 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime386 = require("react/jsx-runtime");
+var import_jsx_runtime390 = require("react/jsx-runtime");
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react3 = require("react");
@@ -803,7 +807,7 @@ var X = createLucideIcon("X", [
 ]);
 
 // ../icons/dist/web/index.mjs
-var import_jsx_runtime387 = require("react/jsx-runtime");
+var import_jsx_runtime391 = require("react/jsx-runtime");
 var StyledIcon2 = import_styled_components2.default.div`
   display: flex;
   align-items: center;
@@ -820,12 +824,12 @@ var StyledIcon2 = import_styled_components2.default.div`
   }
 `;
 var Icon3 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime386.jsx)(StyledIcon2, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(StyledIcon2, { ...props, children });
 };
-var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(X, { size: "100%" }) });
+var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(X, { size: "100%" }) });
 
 // ../tag/dist/web/index.mjs
-var import_jsx_runtime391 = require("react/jsx-runtime");
+var import_jsx_runtime395 = require("react/jsx-runtime");
 var StyledBox = import_styled_components3.default.div`
   display: flex;
   box-sizing: border-box;
@@ -939,7 +943,7 @@ var Box2 = import_react4.default.forwardRef(
     ...props
   }, ref) => {
     if (as === "img" && src) {
-      return /* @__PURE__ */ (0, import_jsx_runtime388.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
         "img",
         {
           src,
@@ -959,7 +963,7 @@ var Box2 = import_react4.default.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime388.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
       StyledBox,
       {
         ref,
@@ -1007,7 +1011,7 @@ var Text2 = ({
   role,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime389.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
     StyledText,
     {
       ...props,
@@ -1034,7 +1038,7 @@ var StyledIcon3 = import_styled_components5.default.div`
   }
 `;
 var Icon4 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(StyledIcon3, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(StyledIcon3, { ...props, children });
 };
 var Tag = ({
   size = "md",
@@ -1095,7 +1099,7 @@ var Tag = ({
     }
   };
   const { bg, text } = resolveColors();
-  return /* @__PURE__ */ (0, import_jsx_runtime391.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(
     Box2,
     {
       backgroundColor: bg,
@@ -1112,8 +1116,8 @@ var Tag = ({
         whiteSpace: "nowrap"
       },
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(
           Text2,
           {
             color: text,
@@ -1127,7 +1131,7 @@ var Tag = ({
             children
           }
         ),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
       ]
     }
   );
@@ -1135,7 +1139,7 @@ var Tag = ({
 
 // src/useMultiSelectControl.tsx
 var import_xui_core2 = require("@xsolla/xui-core");
-var import_jsx_runtime392 = require("react/jsx-runtime");
+var import_jsx_runtime396 = require("react/jsx-runtime");
 var COUNT_ITEM_VALUE = "count-item";
 var useMultiSelectControl = ({
   variant,
@@ -1195,7 +1199,7 @@ var useMultiSelectControl = ({
   };
   const setPlaceholder = () => {
     setSelectedContent(
-      /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
         Text,
         {
           color: theme.colors.control.input.placeholder,
@@ -1246,7 +1250,7 @@ var useMultiSelectControl = ({
       const isCount = item.value === COUNT_ITEM_VALUE;
       const isReducable = index === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
       if (variant === "tag") {
-        return /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
           Box,
           {
             onPress: !isCount ? (e) => {
@@ -1258,7 +1262,7 @@ var useMultiSelectControl = ({
               opacity: disabled ? 0.5 : 1,
               cursor: disabled || isCount ? "not-allowed" : "pointer"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
               Tag,
               {
                 size,
@@ -1276,7 +1280,7 @@ var useMultiSelectControl = ({
       }
       const isCountItem = hasHidden;
       const needsComma = index < displayedItems.length - 2 || index < displayedItems.length - 1 && !isCountItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime392.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(
         Text,
         {
           color: theme.colors.content.primary,
@@ -1378,7 +1382,7 @@ var useMultiSelectControl = ({
 };
 
 // src/MultiSelectControl.tsx
-var import_jsx_runtime393 = require("react/jsx-runtime");
+var import_jsx_runtime397 = require("react/jsx-runtime");
 var MultiSelectControl = (0, import_react6.forwardRef)(
   ({
     variant = "tag",
@@ -1441,7 +1445,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
       borderColor = inputColors.borderHover;
     }
     const iconColor = isDisable ? inputColors.textDisable : inputColors.placeholder;
-    return /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(
       Box,
       {
         ref,
@@ -1469,7 +1473,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
           borderColor: inputColors.borderHover
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(
             Box,
             {
               ref: containerRef,
@@ -1479,8 +1483,8 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
               gap: 8,
               style: { minWidth: 0 },
               children: [
-                iconLeft && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
-                /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
+                iconLeft && /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
+                /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
                   Box,
                   {
                     ref: itemsRef,
@@ -1499,8 +1503,8 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
-            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
+            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
               Box,
               {
                 onPress: (e) => {
@@ -1508,17 +1512,17 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
                   removeAllValues();
                 },
                 style: { cursor: "pointer" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(Remove, { size: 18, color: iconColor, variant: "line" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(Remove, { size: 18, color: iconColor, variant: "line" })
               }
             ),
-            isError && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
+            isError && /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
               ExclamationMarkCr,
               {
                 size: 18,
                 color: theme.colors.content.alert.primary
               }
             ),
-            iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(ChevronDown, { size: 18, color: iconColor })
+            iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(ChevronDown, { size: 18, color: iconColor })
           ] })
         ]
       }
@@ -1619,7 +1623,7 @@ var useMultiSelect = ({
 };
 
 // src/MultiSelect.tsx
-var import_jsx_runtime394 = require("react/jsx-runtime");
+var import_jsx_runtime398 = require("react/jsx-runtime");
 var MultiSelect = (0, import_react8.forwardRef)(
   ({
     options,
@@ -1683,8 +1687,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
       const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
       onChoose(newValues.map(String));
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime394.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
         Text,
         {
           color: theme.colors.content.secondary,
@@ -1693,7 +1697,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
           children: label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime394.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(
         Box,
         {
           ref,
@@ -1701,7 +1705,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
               MultiSelectControl,
               {
                 ref: controlRef,
@@ -1725,8 +1729,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
                 extraClear
               }
             ),
-            isOpen && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime394.jsxs)(import_jsx_runtime394.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
+            isOpen && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime398.jsxs)(import_jsx_runtime398.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
                 Box,
                 {
                   style: {
@@ -1741,7 +1745,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
                   onPress: onClose
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
                 Box,
                 {
                   ref: menuRef,
@@ -1765,7 +1769,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
                   children: menuItems.map((item, _index) => {
                     const brandColors = theme.colors.control.brand.primary;
                     const contentColors = theme.colors.content;
-                    return /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
                       Box,
                       {
                         paddingHorizontal: sizeStyles.paddingHorizontal,
@@ -1786,7 +1790,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
                           cursor: item.disabled ? "not-allowed" : "pointer",
                           opacity: item.disabled ? 0.5 : 1
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
                           Text,
                           {
                             color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
@@ -1805,7 +1809,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
         Text,
         {
           color: theme.colors.content.alert.primary,