@xsolla/xui-multi-select 0.158.0 → 0.159.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.158.0",
+  "version": "0.159.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.158.0",
-    "@xsolla/xui-core": "0.158.0",
-    "@xsolla/xui-dropdown": "0.158.0",
-    "@xsolla/xui-primitives-core": "0.158.0"
+    "@xsolla/xui-checkbox": "0.159.0",
+    "@xsolla/xui-core": "0.159.0",
+    "@xsolla/xui-dropdown": "0.159.0",
+    "@xsolla/xui-primitives-core": "0.159.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.d.mts

@@ -106,6 +106,8 @@ interface MultiSelectProps extends ThemeOverrideProps {
      * no minimum. Ignored when the built-in dropdown is enabled.
      */
     menuMinWidth?: number;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;

package/web/index.d.ts

@@ -106,6 +106,8 @@ interface MultiSelectProps extends ThemeOverrideProps {
      * no minimum. Ignored when the built-in dropdown is enabled.
      */
     menuMinWidth?: number;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;

package/web/index.js

@@ -307,6 +307,8 @@ var Text = ({
   className,
   id,
   role,
+  testID,
+  "data-testid": dataTestId,
   numberOfLines: _numberOfLines,
   ...props
 }) => {
@@ -317,7 +319,8 @@ var Text = ({
       style,
       className,
       id,
-      role
+      role,
+      "data-testid": dataTestId || testID
     }
   );
 };
@@ -341,8 +344,13 @@ var StyledIcon = (0, import_styled_components3.default)(FilteredDiv2)`
     stroke: currentColor;
   }
 `;
-var Icon = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { ...props, children });
+var Icon = ({
+  children,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
 };
 
 // src/MultiSelect.tsx
@@ -1097,6 +1105,7 @@ var BaseIcon = ({
   className,
   style,
   "data-testid": testId,
+  testID,
   "aria-label": ariaLabel,
   "aria-hidden": ariaHidden
 }) => {
@@ -1109,7 +1118,7 @@ var BaseIcon = ({
       $color: color,
       className,
       style,
-      "data-testid": testId,
+      "data-testid": testId || testID,
       role: ariaLabel ? "img" : void 0,
       "aria-label": ariaLabel,
       "aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
@@ -1304,8 +1313,13 @@ var StyledIcon3 = (0, import_styled_components5.default)(FilteredDiv3)`
     stroke: currentColor;
   }
 `;
-var Icon3 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(StyledIcon3, { ...props, children });
+var Icon3 = ({
+  children,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(StyledIcon3, { "data-testid": dataTestId || testID, ...props, children });
 };
 var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime726.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime726.jsx)(X, { size: "100%" }) });
 
@@ -1562,6 +1576,8 @@ var Text2 = ({
   className,
   id,
   role,
+  testID,
+  "data-testid": dataTestId,
   numberOfLines: _numberOfLines,
   ...props
 }) => {
@@ -1572,7 +1588,8 @@ var Text2 = ({
       style,
       className,
       id,
-      role
+      role,
+      "data-testid": dataTestId || testID
     }
   );
 };
@@ -1592,8 +1609,13 @@ var StyledIcon4 = (0, import_styled_components8.default)(FilteredDiv22)`
     stroke: currentColor;
   }
 `;
-var Icon4 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime729.jsx)(StyledIcon4, { ...props, children });
+var Icon4 = ({
+  children,
+  testID,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime729.jsx)(StyledIcon4, { "data-testid": dataTestId || testID, ...props, children });
 };
 var Tag = ({
   size = "md",
@@ -1603,6 +1625,7 @@ var Tag = ({
   iconLeft,
   iconRight,
   onRemove,
+  testID,
   themeMode,
   themeProductContext
 }) => {
@@ -1666,6 +1689,7 @@ var Tag = ({
   return /* @__PURE__ */ (0, import_jsx_runtime730.jsxs)(
     Box2,
     {
+      testID,
       backgroundColor: bg,
       borderRadius: sizeStyles.radius,
       height: sizeStyles.height,
@@ -2222,6 +2246,7 @@ var MultiSelect = (0, import_react11.forwardRef)(
     onTriggerPress,
     menuOpen = false,
     menuMinWidth,
+    testID,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -2279,6 +2304,7 @@ var MultiSelect = (0, import_react11.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
       Box,
       {
+        testID,
         flexDirection: "column",
         gap: sizeStyles.fieldGap,
         style: externalFieldLayout,
@@ -2369,6 +2395,7 @@ var MultiSelect = (0, import_react11.forwardRef)(
                         return /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
                           Box,
                           {
+                            testID,
                             paddingHorizontal: sizeStyles.paddingHorizontal,
                             paddingVertical: 8,
                             onPress: () => {