@xsolla/xui-multi-select 0.72.0 → 0.73.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.72.0",
+  "version": "0.73.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,10 +10,10 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-checkbox": "0.72.0",
-    "@xsolla/xui-core": "0.72.0",
-    "@xsolla/xui-dropdown": "0.72.0",
-    "@xsolla/xui-primitives-core": "0.72.0"
+    "@xsolla/xui-checkbox": "0.73.0",
+    "@xsolla/xui-core": "0.73.0",
+    "@xsolla/xui-dropdown": "0.73.0",
+    "@xsolla/xui-primitives-core": "0.73.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -1949,9 +1949,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 }) })
       ]
     }
@@ -2002,7 +2020,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;
@@ -2017,7 +2035,7 @@ var useMultiSelectControl = ({
       i++;
     }
     return false;
-  }, [widthsDependencies]);
+  };
   const setPlaceholder = () => {
     setSelectedContent(
       /* @__PURE__ */ (0, import_jsx_runtime405.jsx)(
@@ -2079,10 +2097,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"
             },
@@ -2166,7 +2181,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 */;
@@ -2185,7 +2200,7 @@ var useMultiSelectControl = ({
     size,
     removeTagsButtons,
     itemsWidth,
-    isWidthsDependenciesChanged,
+    widthsDependencies,
     stateList
   ]);
   (0, import_react12.useEffect)(() => {
@@ -2336,11 +2351,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 })
           ] })
         ]
       }
@@ -2505,7 +2526,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,
         {
@@ -2557,7 +2578,8 @@ var MultiSelect = (0, import_react15.forwardRef)(
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    zIndex: 999
+                    zIndex: 999,
+                    cursor: "default"
                   },
                   onPress: onClose
                 }