@xsolla/xui-status-dropdown 0.172.0 → 0.172.1

package/native/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/native/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/native/index.js

@@ -1135,6 +1135,7 @@ var StatusDropdown = (0, import_react2.forwardRef)(
     label,
     palette = "Neutral",
     size = "xs",
+    maxWidth,
     dot = false,
     children,
     isOpen: propIsOpen,
@@ -1188,6 +1189,8 @@ var StatusDropdown = (0, import_react2.forwardRef)(
         height: sizeStyles.height,
         paddingHorizontal: sizeStyles.padding,
         gap,
+        minWidth: 0,
+        maxWidth,
         ...isWeb ? {
           onFocus: (event) => {
             const target = event?.target;
@@ -1236,19 +1239,36 @@ var StatusDropdown = (0, import_react2.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,
             {
@@ -1256,6 +1276,7 @@ var StatusDropdown = (0, import_react2.forwardRef)(
               height: sizeStyles.iconSize,
               alignItems: "center",
               justifyContent: "center",
+              flexShrink: 0,
               children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
                 Icon,
                 {