@xsolla/xui-multi-select 0.72.0 → 0.73.0

package/web/index.mjs

@@ -1918,9 +1918,27 @@ var Tag = ({
       alignItems: "center",
       justifyContent: "center",
       gap: sizeStyles.gap,
+      style: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
       children: [
         icon && /* @__PURE__ */ jsx811(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
-        /* @__PURE__ */ jsx811(Text2, { color: text, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+        /* @__PURE__ */ jsx811(
+          Text2,
+          {
+            color: text,
+            fontSize: sizeStyles.fontSize,
+            fontWeight: "500",
+            whiteSpace: "nowrap",
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children
+          }
+        ),
         onRemove && /* @__PURE__ */ jsx811(Box3, { onPress: onRemove, children: /* @__PURE__ */ jsx811(X2, { size: sizeStyles.iconSize, color: text }) })
       ]
     }
@@ -1971,7 +1989,7 @@ var useMultiSelectControl = ({
     }),
     [stateList, variant, size, removeTagsButtons]
   );
-  const isWidthsDependenciesChanged = useMemo(() => {
+  const isWidthsDependenciesChanged = () => {
     const prev = savedWidthsRef.current?.dependencies;
     if (!prev) return true;
     if (prev.variant !== widthsDependencies.variant) return true;
@@ -1986,7 +2004,7 @@ var useMultiSelectControl = ({
       i++;
     }
     return false;
-  }, [widthsDependencies]);
+  };
   const setPlaceholder = () => {
     setSelectedContent(
       /* @__PURE__ */ jsx386(
@@ -2048,10 +2066,7 @@ var useMultiSelectControl = ({
               if (!disabled) removeValue(item.value, e);
             } : void 0,
             style: {
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              minWidth: isReducable ? void 0 : "fit-content",
+              minWidth: isReducable ? 0 : "fit-content",
               opacity: disabled ? 0.5 : 1,
               cursor: disabled || isCount ? "not-allowed" : "pointer"
             },
@@ -2135,7 +2150,7 @@ var useMultiSelectControl = ({
       setItemsRender();
       return;
     }
-    const needsMeasurement = !savedWidthsRef.current || isWidthsDependenciesChanged;
+    const needsMeasurement = !savedWidthsRef.current || isWidthsDependenciesChanged();
     if (needsMeasurement) {
       if (itemsWidth === 0) return;
       displayStateRef.current = 1 /* PreRender */;
@@ -2154,7 +2169,7 @@ var useMultiSelectControl = ({
     size,
     removeTagsButtons,
     itemsWidth,
-    isWidthsDependenciesChanged,
+    widthsDependencies,
     stateList
   ]);
   useEffect(() => {
@@ -2305,11 +2320,17 @@ var MultiSelectControl = forwardRef7(
                   removeAllValues();
                 },
                 style: { cursor: "pointer" },
-                children: /* @__PURE__ */ jsx387(Icon, { size: 18, color: iconColor, children: /* @__PURE__ */ jsx387(Remove, { size: 18, variant: "line" }) })
+                children: /* @__PURE__ */ jsx387(Remove, { size: 18, color: iconColor, variant: "line" })
+              }
+            ),
+            isError && /* @__PURE__ */ jsx387(
+              ExclamationMarkCr,
+              {
+                size: 18,
+                color: theme.colors.content.alert.primary
               }
             ),
-            isError && /* @__PURE__ */ jsx387(Icon, { size: 18, color: theme.colors.content.alert.primary, children: /* @__PURE__ */ jsx387(ExclamationMarkCr, { size: 18 }) }),
-            /* @__PURE__ */ jsx387(Icon, { size: 18, color: iconColor, children: iconRight ? iconRight : isOpen ? /* @__PURE__ */ jsx387(ChevronUp, { size: 18, variant: "line" }) : /* @__PURE__ */ jsx387(ChevronDown, { size: 18 }) })
+            iconRight ? iconRight : isOpen ? /* @__PURE__ */ jsx387(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ jsx387(ChevronDown, { size: 18, color: iconColor })
           ] })
         ]
       }
@@ -2474,7 +2495,7 @@ var MultiSelect = forwardRef8(
       const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
       onChoose(newValues.map(String));
     };
-    return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", gap: 8, children: [
+    return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
       label && /* @__PURE__ */ jsx388(
         Text,
         {
@@ -2526,7 +2547,8 @@ var MultiSelect = forwardRef8(
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    zIndex: 999
+                    zIndex: 999,
+                    cursor: "default"
                   },
                   onPress: onClose
                 }