@xsolla/xui-multi-select 0.128.0 → 0.130.0

package/package.json

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

package/web/index.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type MultiSelectValue = (string | number)[];
 type MultiSelectVariant = "tag" | "text";
@@ -10,7 +11,7 @@ interface MultiSelectOption {
     value: string | number;
     disabled?: boolean;
 }
-interface MultiSelectProps {
+interface MultiSelectProps extends ThemeOverrideProps {
     /**
      * Property to define options for the multi-select.
      */

package/web/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type MultiSelectValue = (string | number)[];
 type MultiSelectVariant = "tag" | "text";
@@ -10,7 +11,7 @@ interface MultiSelectOption {
     value: string | number;
     disabled?: boolean;
 }
-interface MultiSelectProps {
+interface MultiSelectProps extends ThemeOverrideProps {
     /**
      * Property to define options for the multi-select.
      */

package/web/index.js

@@ -75,6 +75,8 @@ var StyledBox = import_styled_components.default.div`
   width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
   min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
   min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
 
   padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
   ${(props) => props.paddingHorizontal && `
@@ -864,6 +866,8 @@ var StyledBox2 = import_styled_components6.default.div`
   width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
   min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
   min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
 
   padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
   ${(props) => props.paddingHorizontal && `
@@ -1050,12 +1054,13 @@ var Tag = ({
   selected = false,
   onPress,
   children,
-  icon,
   iconLeft,
   iconRight,
-  onRemove
+  onRemove,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core.useDesignSystem)();
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
   const sizeStyles = theme.sizing.tag(size);
   const resolveColors = () => {
     if (variant === "selectable") {
@@ -1072,115 +1077,62 @@ var Tag = ({
         border: theme.colors.border.secondary
       };
     }
-    if (type === "outlined") {
-      switch (tone) {
-        case "primary":
-          return {
-            bg: theme.colors.background.primary,
-            text: theme.colors.content.primary,
-            border: theme.colors.border.secondary
-          };
-        case "brand":
-          return {
-            bg: theme.colors.background.brand.secondary,
-            text: theme.colors.content.brand.primary,
-            border: theme.colors.border.brand
-          };
-        case "brandExtra":
-          return {
-            bg: theme.colors.background.brandExtra.secondary,
-            text: theme.colors.content.brandExtra.primary,
-            border: theme.colors.border.brandExtra
-          };
-        case "success":
-          return {
-            bg: theme.colors.background.success.secondary,
-            text: theme.colors.content.success.primary,
-            border: theme.colors.border.success
-          };
-        case "warning":
-          return {
-            bg: theme.colors.background.warning.secondary,
-            text: theme.colors.content.warning.primary,
-            border: theme.colors.border.warning
-          };
-        case "alert":
-          return {
-            bg: theme.colors.background.alert.secondary,
-            text: theme.colors.content.alert.primary,
-            border: theme.colors.border.alert
-          };
-        case "neutral":
-          return {
-            bg: theme.colors.background.neutral.secondary,
-            text: theme.colors.content.neutral.primary,
-            border: theme.colors.border.neutral
-          };
-        default:
-          return {
-            bg: theme.colors.background.primary,
-            text: theme.colors.content.primary,
-            border: theme.colors.border.secondary
-          };
-      }
-    }
+    const isOutlined = type === "outlined";
     switch (tone) {
       case "primary":
         return {
-          bg: theme.colors.background.primary,
+          bg: isOutlined ? "transparent" : theme.colors.background.primary,
           text: theme.colors.content.primary,
-          border: void 0
+          border: theme.colors.border.secondary
         };
       case "brand":
         return {
-          bg: theme.colors.background.brand.primary,
-          text: theme.colors.content.on.brand,
-          border: void 0
+          bg: isOutlined ? "transparent" : theme.colors.background.brand.primary,
+          text: isOutlined ? theme.colors.content.brand.primary : theme.colors.content.on.brand,
+          border: theme.colors.border.brand
         };
       case "brandExtra":
         return {
-          bg: theme.colors.background.brandExtra.primary,
-          text: theme.colors.content.on.brandExtra,
-          border: void 0
+          bg: isOutlined ? "transparent" : theme.colors.background.brandExtra.primary,
+          text: isOutlined ? theme.colors.content.brandExtra.primary : theme.colors.content.on.brandExtra,
+          border: theme.colors.border.brandExtra
         };
       case "success":
         return {
-          bg: theme.colors.background.success.primary,
-          text: theme.colors.content.on.success,
-          border: void 0
+          bg: isOutlined ? "transparent" : theme.colors.background.success.primary,
+          text: isOutlined ? theme.colors.content.success.primary : theme.colors.content.on.success,
+          border: theme.colors.border.success
         };
       case "warning":
         return {
-          bg: theme.colors.background.warning.primary,
-          text: theme.colors.content.on.warning,
-          border: void 0
+          bg: isOutlined ? "transparent" : theme.colors.background.warning.primary,
+          text: isOutlined ? theme.colors.content.warning.primary : theme.colors.content.on.warning,
+          border: theme.colors.border.warning
         };
       case "alert":
         return {
-          bg: theme.colors.background.alert.primary,
-          text: theme.colors.content.on.alert,
-          border: void 0
+          bg: isOutlined ? "transparent" : theme.colors.background.alert.primary,
+          text: isOutlined ? theme.colors.content.alert.primary : theme.colors.content.on.alert,
+          border: theme.colors.border.alert
         };
       case "neutral":
         return {
-          bg: theme.colors.background.neutral.primary,
-          text: theme.colors.content.on.neutral,
-          border: void 0
+          bg: isOutlined ? "transparent" : theme.colors.background.neutral.primary,
+          text: isOutlined ? theme.colors.content.neutral.primary : theme.colors.content.on.neutral,
+          border: theme.colors.border.neutral
         };
       default:
         return {
-          bg: theme.colors.background.primary,
+          bg: isOutlined ? "transparent" : theme.colors.background.primary,
           text: theme.colors.content.primary,
-          border: void 0
+          border: theme.colors.border.secondary
         };
     }
   };
   const { bg, text, border } = resolveColors();
   const isSelectable = variant === "selectable";
-  const isOutlined = type === "outlined";
-  const hasBorder = isSelectable || isOutlined;
   const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
-  const resolvedIconLeft = icon || iconLeft;
+  const isIconOnly = !children && (!!iconLeft || !!iconRight);
   return /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(
     Box2,
     {
@@ -1189,15 +1141,16 @@ var Tag = ({
       backgroundColor: bg,
       borderRadius,
       height: sizeStyles.height,
-      paddingHorizontal: sizeStyles.padding,
+      width: isIconOnly ? sizeStyles.height : void 0,
+      paddingHorizontal: isIconOnly ? 0 : sizeStyles.padding,
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
       gap: sizeStyles.gap,
-      borderWidth: hasBorder ? 1 : 0,
+      borderWidth: sizeStyles.borderWidth,
       borderColor: border,
-      borderStyle: hasBorder ? "solid" : void 0,
-      cursor: isSelectable ? "pointer" : void 0,
+      borderStyle: "solid",
+      cursor: isSelectable ? "pointer" : "default",
       hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
       style: {
         overflow: "hidden",
@@ -1205,7 +1158,7 @@ var Tag = ({
         whiteSpace: "nowrap"
       },
       children: [
-        resolvedIconLeft && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: resolvedIconLeft }),
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
         children && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
           Text2,
           {
@@ -1220,7 +1173,8 @@ var Tag = ({
             children
           }
         ),
-        onRemove ? /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(X2, { size: sizeStyles.iconSize, color: text }) }) : iconRight && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconRight })
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: iconRight }),
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
       ]
     }
   );
@@ -1240,9 +1194,11 @@ var useMultiSelectControl = ({
   placeholder,
   removeTagsButtons,
   disabled,
-  containerRef
+  containerRef,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = (0, import_xui_core2.useDesignSystem)();
+  const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
   const displayStateRef = (0, import_react5.useRef)(0 /* Placeholder */);
   const savedWidthsRef = (0, import_react5.useRef)(null);
   const itemsRef = (0, import_react5.useRef)(null);
@@ -1491,9 +1447,11 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
     iconLeft,
     iconRight,
     disabled = false,
-    extraClear = false
+    extraClear = false,
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = (0, import_xui_core3.useDesignSystem)();
+    const { theme } = (0, import_xui_core3.useResolvedTheme)({ themeMode, themeProductContext });
     const sizeStyles = theme.sizing.input(size);
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
@@ -1730,9 +1688,11 @@ var MultiSelect = (0, import_react8.forwardRef)(
     removeTagsButtons = true,
     iconLeft,
     iconRight,
-    maxHeight = 300
+    maxHeight = 300,
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = (0, import_xui_core4.useDesignSystem)();
+    const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
     const controlRef = (0, import_react8.useRef)(null);
     const menuRef = (0, import_react8.useRef)(null);
     const sizeStyles = theme.sizing.input(size);