@xsolla/xui-multi-select 0.196.0 → 0.197.0

package/package.json

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

package/web/index.js

@@ -83,7 +83,11 @@ var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
   "fontSize",
   "fontWeight",
   "fontFamily",
-  "textDecoration"
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
 ]);
 function shouldForwardProp(key) {
   if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
@@ -290,6 +294,32 @@ Box.displayName = "Box";
 
 // ../../foundation/primitives-web/src/Text.tsx
 var import_styled_components2 = __toESM(require("styled-components"));
+
+// ../../foundation/primitives-web/src/textTruncation.ts
+var truncationStyles = (numberOfLines) => {
+  if (!numberOfLines || numberOfLines < 1) return "";
+  if (numberOfLines === 1) {
+    return `
+      display: block;
+      max-width: 100%;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+  }
+  return `
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: ${numberOfLines};
+    line-clamp: ${numberOfLines};
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  `;
+};
+
+// ../../foundation/primitives-web/src/Text.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FilteredSpan = createFilteredElement("span");
 var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
@@ -301,6 +331,9 @@ var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
   white-space: ${(props) => props.whiteSpace || "normal"};
   text-align: ${(props) => props.textAlign || "inherit"};
   text-decoration: ${(props) => props.textDecoration || "none"};
+
+  /* Keep last: single-line truncation has to win over white-space above. */
+  ${(props) => truncationStyles(props.numberOfLines)}
 `;
 var Text = ({
   style,
@@ -309,7 +342,6 @@ var Text = ({
   role,
   testID,
   "data-testid": dataTestId,
-  numberOfLines: _numberOfLines,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -499,7 +531,11 @@ var ADDITIONAL_BLOCKED_PROPS2 = /* @__PURE__ */ new Set([
   "fontSize",
   "fontWeight",
   "fontFamily",
-  "textDecoration"
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
 ]);
 function shouldForwardProp2(key) {
   if (ADDITIONAL_BLOCKED_PROPS2.has(key)) return false;
@@ -589,7 +625,11 @@ var ADDITIONAL_BLOCKED_PROPS3 = /* @__PURE__ */ new Set([
   "fontSize",
   "fontWeight",
   "fontFamily",
-  "textDecoration"
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
 ]);
 function shouldForwardProp3(key) {
   if (ADDITIONAL_BLOCKED_PROPS3.has(key)) return false;
@@ -790,6 +830,28 @@ var Box2 = import_react6.default.forwardRef(
   }
 );
 Box2.displayName = "Box";
+var truncationStyles2 = (numberOfLines) => {
+  if (!numberOfLines || numberOfLines < 1) return "";
+  if (numberOfLines === 1) {
+    return `
+      display: block;
+      max-width: 100%;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+  }
+  return `
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: ${numberOfLines};
+    line-clamp: ${numberOfLines};
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  `;
+};
 var FilteredSpan2 = createFilteredElement3("span");
 var StyledText2 = (0, import_styled_components6.default)(FilteredSpan2)`
   color: ${(props) => props.color || "inherit"};
@@ -800,6 +862,9 @@ var StyledText2 = (0, import_styled_components6.default)(FilteredSpan2)`
   white-space: ${(props) => props.whiteSpace || "normal"};
   text-align: ${(props) => props.textAlign || "inherit"};
   text-decoration: ${(props) => props.textDecoration || "none"};
+
+  /* Keep last: single-line truncation has to win over white-space above. */
+  ${(props) => truncationStyles2(props.numberOfLines)}
 `;
 var Text2 = ({
   style,
@@ -808,7 +873,6 @@ var Text2 = ({
   role,
   testID,
   "data-testid": dataTestId,
-  numberOfLines: _numberOfLines,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(