@xsolla/xui-multi-select 0.72.0 → 0.73.0

package/native/index.js

@@ -1977,9 +1977,27 @@ var Tag = ({
       alignItems: "center",
       justifyContent: "center",
       gap: sizeStyles.gap,
+      style: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
       children: [
         icon && /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Text2, { color: text, fontSize: sizeStyles.fontSize, fontWeight: "500", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
+          Text2,
+          {
+            color: text,
+            fontSize: sizeStyles.fontSize,
+            fontWeight: "500",
+            whiteSpace: "nowrap",
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children
+          }
+        ),
         onRemove && /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Box3, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
       ]
     }
@@ -2030,7 +2048,7 @@ var useMultiSelectControl = ({
     }),
     [stateList, variant, size, removeTagsButtons]
   );
-  const isWidthsDependenciesChanged = (0, import_react12.useMemo)(() => {
+  const isWidthsDependenciesChanged = () => {
     const prev = savedWidthsRef.current?.dependencies;
     if (!prev) return true;
     if (prev.variant !== widthsDependencies.variant) return true;
@@ -2045,7 +2063,7 @@ var useMultiSelectControl = ({
       i++;
     }
     return false;
-  }, [widthsDependencies]);
+  };
   const setPlaceholder = () => {
     setSelectedContent(
       /* @__PURE__ */ (0, import_jsx_runtime405.jsx)(
@@ -2107,10 +2125,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"
             },
@@ -2194,7 +2209,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 */;
@@ -2213,7 +2228,7 @@ var useMultiSelectControl = ({
     size,
     removeTagsButtons,
     itemsWidth,
-    isWidthsDependenciesChanged,
+    widthsDependencies,
     stateList
   ]);
   (0, import_react12.useEffect)(() => {
@@ -2364,11 +2379,17 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
                   removeAllValues();
                 },
                 style: { cursor: "pointer" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(Icon, { size: 18, color: iconColor, children: /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(Remove, { size: 18, variant: "line" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(Remove, { size: 18, color: iconColor, variant: "line" })
+              }
+            ),
+            isError && /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(
+              ExclamationMarkCr,
+              {
+                size: 18,
+                color: theme.colors.content.alert.primary
               }
             ),
-            isError && /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(Icon, { size: 18, color: theme.colors.content.alert.primary, children: /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(ExclamationMarkCr, { size: 18 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(Icon, { size: 18, color: iconColor, children: iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(ChevronUp, { size: 18, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(ChevronDown, { size: 18 }) })
+            iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(ChevronDown, { size: 18, color: iconColor })
           ] })
         ]
       }
@@ -2533,7 +2554,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
       const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
       onChoose(newValues.map(String));
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime407.jsxs)(Box, { flexDirection: "column", gap: 8, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime407.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
         Text,
         {
@@ -2585,7 +2606,8 @@ var MultiSelect = (0, import_react15.forwardRef)(
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    zIndex: 999
+                    zIndex: 999,
+                    cursor: "default"
                   },
                   onPress: onClose
                 }