@xsolla/xui-status-dropdown 0.172.0 → 0.172.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-status-dropdown",
-  "version": "0.172.0",
+  "version": "0.172.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,10 +13,10 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-context-menu": "0.172.0",
-    "@xsolla/xui-core": "0.172.0",
-    "@xsolla/xui-primitives-core": "0.172.0",
-    "@xsolla/xui-status": "0.172.0"
+    "@xsolla/xui-context-menu": "0.172.1",
+    "@xsolla/xui-core": "0.172.1",
+    "@xsolla/xui-primitives-core": "0.172.1",
+    "@xsolla/xui-status": "0.172.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.d.mts

@@ -10,6 +10,8 @@ interface StatusDropdownProps extends ThemeOverrideProps {
     palette?: StatusDropdownPalette;
     /** Size of the trigger */
     size?: StatusDropdownSize;
+    /** Max width of the trigger. The label truncates with an ellipsis when it exceeds this. Accepts any layout width value (number or string). */
+    maxWidth?: number | string;
     /** Whether to show the status dot */
     dot?: boolean;
     /** Dropdown menu content (usually ContextMenuItem components) */

package/web/index.d.ts

@@ -10,6 +10,8 @@ interface StatusDropdownProps extends ThemeOverrideProps {
     palette?: StatusDropdownPalette;
     /** Size of the trigger */
     size?: StatusDropdownSize;
+    /** Max width of the trigger. The label truncates with an ellipsis when it exceeds this. Accepts any layout width value (number or string). */
+    maxWidth?: number | string;
     /** Whether to show the status dot */
     dot?: boolean;
     /** Dropdown menu content (usually ContextMenuItem components) */

package/web/index.js

@@ -1182,6 +1182,7 @@ var StatusDropdown = (0, import_react3.forwardRef)(
     label,
     palette = "Neutral",
     size = "xs",
+    maxWidth,
     dot = false,
     children,
     isOpen: propIsOpen,
@@ -1235,6 +1236,8 @@ var StatusDropdown = (0, import_react3.forwardRef)(
         height: sizeStyles.height,
         paddingHorizontal: sizeStyles.padding,
         gap,
+        minWidth: 0,
+        maxWidth,
         ...isWeb ? {
           onFocus: (event) => {
             const target = event?.target;
@@ -1283,19 +1286,36 @@ var StatusDropdown = (0, import_react3.forwardRef)(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(Box, { paddingHorizontal: gap, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
-            Text,
+          /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
+            Box,
             {
-              color: contentColor,
-              fontSize: sizeStyles.fontSize,
-              fontWeight: "500",
-              numberOfLines: 1,
-              style: {
-                lineHeight: `${sizeStyles.lineHeight}px`
-              },
-              children: label
+              paddingHorizontal: gap,
+              flexShrink: 1,
+              minWidth: 0,
+              ...isWeb ? { overflow: "hidden" } : {},
+              children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
+                Text,
+                {
+                  color: contentColor,
+                  fontSize: sizeStyles.fontSize,
+                  fontWeight: "500",
+                  numberOfLines: 1,
+                  style: {
+                    lineHeight: `${sizeStyles.lineHeight}px`,
+                    // Text primitive ignores numberOfLines on web, so enforce
+                    // single-line truncation with real CSS.
+                    ...isWeb ? {
+                      display: "block",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    } : {}
+                  },
+                  children: label
+                }
+              )
             }
-          ) }),
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
             Box,
             {
@@ -1303,6 +1323,7 @@ var StatusDropdown = (0, import_react3.forwardRef)(
               height: sizeStyles.iconSize,
               alignItems: "center",
               justifyContent: "center",
+              flexShrink: 0,
               children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
                 Icon,
                 {