@xsolla/xui-multi-select 0.128.0 → 0.130.0

package/web/index.mjs

@@ -39,6 +39,8 @@ var StyledBox = styled.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 && `
@@ -226,11 +228,11 @@ var Icon = ({ children, ...props }) => {
 };
 
 // src/MultiSelect.tsx
-import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 
 // src/MultiSelectControl.tsx
 import { forwardRef as forwardRef3, useRef as useRef2 } from "react";
-import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
 
 // ../icons-base/dist/web/index.mjs
 import styled4 from "styled-components";
@@ -692,7 +694,7 @@ import styled22 from "styled-components";
 import { jsx as jsx2101 } from "react/jsx-runtime";
 import styled32 from "styled-components";
 import { jsx as jsx390 } from "react/jsx-runtime";
-import { useDesignSystem } from "@xsolla/xui-core";
+import { useResolvedTheme } from "@xsolla/xui-core";
 
 // ../icons/dist/web/index.mjs
 import styled5 from "styled-components";
@@ -833,6 +835,8 @@ var StyledBox2 = styled6.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 && `
@@ -1019,12 +1023,13 @@ var Tag = ({
   selected = false,
   onPress,
   children,
-  icon,
   iconLeft,
   iconRight,
-  onRemove
+  onRemove,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem();
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
   const sizeStyles = theme.sizing.tag(size);
   const resolveColors = () => {
     if (variant === "selectable") {
@@ -1041,115 +1046,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__ */ jsxs(
     Box2,
     {
@@ -1158,15 +1110,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",
@@ -1174,7 +1127,7 @@ var Tag = ({
         whiteSpace: "nowrap"
       },
       children: [
-        resolvedIconLeft && /* @__PURE__ */ jsx410(Icon4, { size: sizeStyles.iconSize, color: text, children: resolvedIconLeft }),
+        iconLeft && /* @__PURE__ */ jsx410(Icon4, { size: sizeStyles.iconSize, color: text, children: iconLeft }),
         children && /* @__PURE__ */ jsx410(
           Text2,
           {
@@ -1189,14 +1142,15 @@ var Tag = ({
             children
           }
         ),
-        onRemove ? /* @__PURE__ */ jsx410(Box2, { onPress: onRemove, children: /* @__PURE__ */ jsx410(X2, { size: sizeStyles.iconSize, color: text }) }) : iconRight && /* @__PURE__ */ jsx410(Icon4, { size: sizeStyles.iconSize, color: text, children: iconRight })
+        iconRight && /* @__PURE__ */ jsx410(Icon4, { size: sizeStyles.iconSize, color: text, children: iconRight }),
+        onRemove && /* @__PURE__ */ jsx410(Box2, { onPress: onRemove, children: /* @__PURE__ */ jsx410(X2, { size: sizeStyles.iconSize, color: text }) })
       ]
     }
   );
 };
 
 // src/useMultiSelectControl.tsx
-import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { useResolvedTheme as useResolvedTheme2 } from "@xsolla/xui-core";
 import { jsx as jsx391, jsxs as jsxs2 } from "react/jsx-runtime";
 var COUNT_ITEM_VALUE = "count-item";
 var useMultiSelectControl = ({
@@ -1209,9 +1163,11 @@ var useMultiSelectControl = ({
   placeholder,
   removeTagsButtons,
   disabled,
-  containerRef
+  containerRef,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem2();
+  const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
   const displayStateRef = useRef(0 /* Placeholder */);
   const savedWidthsRef = useRef(null);
   const itemsRef = useRef(null);
@@ -1460,9 +1416,11 @@ var MultiSelectControl = forwardRef3(
     iconLeft,
     iconRight,
     disabled = false,
-    extraClear = false
+    extraClear = false,
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem3();
+    const { theme } = useResolvedTheme3({ themeMode, themeProductContext });
     const sizeStyles = theme.sizing.input(size);
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
@@ -1699,9 +1657,11 @@ var MultiSelect = forwardRef4(
     removeTagsButtons = true,
     iconLeft,
     iconRight,
-    maxHeight = 300
+    maxHeight = 300,
+    themeMode,
+    themeProductContext
   }, ref) => {
-    const { theme } = useDesignSystem4();
+    const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
     const controlRef = useRef4(null);
     const menuRef = useRef4(null);
     const sizeStyles = theme.sizing.input(size);