@xsolla/xui-multi-select 0.149.1 → 0.150.0

package/web/index.mjs

@@ -1941,6 +1941,7 @@ var MultiSelectControl = forwardRef3(
     iconRight,
     disabled = false,
     extraClear = false,
+    width,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -1989,6 +1990,7 @@ var MultiSelectControl = forwardRef3(
       Box,
       {
         ref,
+        width,
         backgroundColor,
         borderColor,
         borderWidth: borderColor !== "transparent" ? 1 : 0,
@@ -2000,7 +2002,7 @@ var MultiSelectControl = forwardRef3(
         alignItems: "center",
         gap: 8,
         style: {
-          cursor: isDisable ? "not-allowed" : "pointer",
+          cursor: isDisable ? "not-allowed" : onClick ? "pointer" : "default",
           boxSizing: "border-box",
           height: flexible ? "auto" : sizeStyles.height,
           position: "relative",
@@ -2008,7 +2010,7 @@ var MultiSelectControl = forwardRef3(
           // Above backdrop when open
         },
         onPress: isDisable ? void 0 : onClick,
-        hoverStyle: !isDisable && !isFocus && !isOpen && !isError ? {
+        hoverStyle: !isDisable && onClick && !isFocus && !isOpen && !isError ? {
           backgroundColor: inputColors.bgHover,
           borderColor: inputColors.borderHover
         } : void 0,
@@ -2164,6 +2166,7 @@ var useMultiSelect = ({
 
 // src/MultiSelect.tsx
 import { Fragment, jsx as jsx726, jsxs as jsxs4 } from "react/jsx-runtime";
+var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
 var MultiSelect = forwardRef4(
   ({
     options,
@@ -2182,6 +2185,10 @@ var MultiSelect = forwardRef4(
     iconLeft,
     iconRight,
     maxHeight = 300,
+    dropdownMenu = true,
+    onTriggerPress,
+    menuOpen = false,
+    menuMinWidth,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -2209,10 +2216,10 @@ var MultiSelect = forwardRef4(
       onChange
     });
     useEffect3(() => {
-      if (isDisable) {
+      if (isDisable || !dropdownMenu) {
         onClose();
       }
-    }, [isDisable, onClose]);
+    }, [isDisable, dropdownMenu, onClose]);
     const menuItems = options.map((opt) => {
       const id = String(opt.value);
       const checked = values.map(String).includes(id);
@@ -2229,138 +2236,155 @@ var MultiSelect = forwardRef4(
       const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
       onChoose(newValues.map(String));
     };
-    return /* @__PURE__ */ jsxs4(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
-      label && /* @__PURE__ */ jsx726(
-        Text,
-        {
-          color: theme.colors.content.secondary,
-          fontSize: sizeStyles.fontSize - 2,
-          fontWeight: "500",
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsxs4(
-        Box,
-        {
-          ref,
-          style: {
-            position: "relative"
-          },
-          children: [
-            /* @__PURE__ */ jsx726(
-              MultiSelectControl,
-              {
-                ref: controlRef,
-                isOpen,
-                isFocus,
-                isError,
-                size,
-                state,
-                disabled: isDisable,
-                onClick: onSelectClick,
-                removeValue: onRemove,
-                removeAllValues: onRemoveAll,
-                stateList,
-                selectedItems,
-                variant,
-                flexible,
-                placeholder,
-                removeTagsButtons,
-                iconLeft,
-                iconRight,
-                extraClear
-              }
-            ),
-            isOpen && !isDisable && /* @__PURE__ */ jsxs4(Fragment, { children: [
-              /* @__PURE__ */ jsx726(
-                Box,
-                {
-                  style: {
-                    position: "fixed",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 999,
-                    cursor: "default"
-                  },
-                  onPress: onClose
-                }
-              ),
-              /* @__PURE__ */ jsx726(
-                Box,
-                {
-                  ref: menuRef,
-                  backgroundColor: theme.colors.background.secondary,
-                  borderColor: theme.colors.border.secondary,
-                  borderWidth: 1,
-                  borderRadius: theme.radius.button,
-                  paddingVertical: 4,
-                  style: {
-                    position: "absolute",
-                    top: "100%",
-                    left: 0,
-                    right: 0,
-                    marginTop: 4,
-                    zIndex: 1001,
-                    // Above control (1000) and backdrop (999)
-                    boxShadow: theme.shadow.popover,
-                    maxHeight,
-                    overflowY: "auto"
-                  },
-                  children: menuItems.map((item, _index) => {
-                    const brandColors = theme.colors.control.brand.primary;
-                    const contentColors = theme.colors.content;
-                    return /* @__PURE__ */ jsx726(
-                      Box,
-                      {
-                        paddingHorizontal: sizeStyles.paddingHorizontal,
-                        paddingVertical: 8,
-                        onPress: () => {
-                          if (!item.disabled) {
-                            handleItemToggle(item.id, !item.checked);
-                          }
-                        },
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        backgroundColor: item.checked ? brandColors.bg : "transparent",
-                        hoverStyle: !item.disabled && !item.checked ? {
-                          backgroundColor: theme.colors.control.input.bgHover
-                        } : void 0,
-                        style: {
-                          cursor: item.disabled ? "not-allowed" : "pointer",
-                          opacity: item.disabled ? 0.5 : 1
-                        },
-                        children: /* @__PURE__ */ jsx726(
-                          Text,
-                          {
-                            color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
-                            fontSize: sizeStyles.fontSize,
-                            fontWeight: "400",
-                            children: item.children
-                          }
-                        )
+    const controlMenuOpen = dropdownMenu ? isOpen : Boolean(menuOpen);
+    const controlOnClick = dropdownMenu ? onSelectClick : onTriggerPress;
+    const externalFieldLayout = !dropdownMenu ? {
+      width: "100%",
+      minWidth: menuMinWidth ?? EXTERNAL_MENU_MIN_WIDTH_DEFAULT,
+      boxSizing: "border-box"
+    } : void 0;
+    return /* @__PURE__ */ jsxs4(
+      Box,
+      {
+        flexDirection: "column",
+        gap: sizeStyles.fieldGap,
+        style: externalFieldLayout,
+        children: [
+          label && /* @__PURE__ */ jsx726(
+            Text,
+            {
+              color: theme.colors.content.secondary,
+              fontSize: sizeStyles.fontSize - 2,
+              fontWeight: "500",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            Box,
+            {
+              ref,
+              style: {
+                position: "relative",
+                ...externalFieldLayout ? { width: "100%" } : {}
+              },
+              children: [
+                /* @__PURE__ */ jsx726(
+                  MultiSelectControl,
+                  {
+                    ref: controlRef,
+                    isOpen: controlMenuOpen,
+                    isFocus,
+                    isError,
+                    size,
+                    state,
+                    disabled: isDisable,
+                    onClick: controlOnClick,
+                    width: dropdownMenu ? void 0 : "100%",
+                    removeValue: onRemove,
+                    removeAllValues: onRemoveAll,
+                    stateList,
+                    selectedItems,
+                    variant,
+                    flexible,
+                    placeholder,
+                    removeTagsButtons,
+                    iconLeft,
+                    iconRight,
+                    extraClear
+                  }
+                ),
+                dropdownMenu && isOpen && !isDisable && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                  /* @__PURE__ */ jsx726(
+                    Box,
+                    {
+                      style: {
+                        position: "fixed",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 999,
+                        cursor: "default"
                       },
-                      item.id
-                    );
-                  })
-                }
-              )
-            ] })
-          ]
-        }
-      ),
-      errorMessage && /* @__PURE__ */ jsx726(
-        Text,
-        {
-          color: theme.colors.content.alert.primary,
-          fontSize: sizeStyles.fontSize - 2,
-          style: { lineHeight: sizeStyles.lineHeight + "px" },
-          children: errorMessage
-        }
-      )
-    ] });
+                      onPress: onClose
+                    }
+                  ),
+                  /* @__PURE__ */ jsx726(
+                    Box,
+                    {
+                      ref: menuRef,
+                      backgroundColor: theme.colors.background.secondary,
+                      borderColor: theme.colors.border.secondary,
+                      borderWidth: 1,
+                      borderRadius: theme.radius.button,
+                      paddingVertical: 4,
+                      style: {
+                        position: "absolute",
+                        top: "100%",
+                        left: 0,
+                        right: 0,
+                        marginTop: 4,
+                        zIndex: 1001,
+                        // Above control (1000) and backdrop (999)
+                        boxShadow: theme.shadow.popover,
+                        maxHeight,
+                        overflowY: "auto"
+                      },
+                      children: menuItems.map((item, _index) => {
+                        const brandColors = theme.colors.control.brand.primary;
+                        const contentColors = theme.colors.content;
+                        return /* @__PURE__ */ jsx726(
+                          Box,
+                          {
+                            paddingHorizontal: sizeStyles.paddingHorizontal,
+                            paddingVertical: 8,
+                            onPress: () => {
+                              if (!item.disabled) {
+                                handleItemToggle(item.id, !item.checked);
+                              }
+                            },
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            backgroundColor: item.checked ? brandColors.bg : "transparent",
+                            hoverStyle: !item.disabled && !item.checked ? {
+                              backgroundColor: theme.colors.control.input.bgHover
+                            } : void 0,
+                            style: {
+                              cursor: item.disabled ? "not-allowed" : "pointer",
+                              opacity: item.disabled ? 0.5 : 1
+                            },
+                            children: /* @__PURE__ */ jsx726(
+                              Text,
+                              {
+                                color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
+                                fontSize: sizeStyles.fontSize,
+                                fontWeight: "400",
+                                children: item.children
+                              }
+                            )
+                          },
+                          item.id
+                        );
+                      })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          errorMessage && /* @__PURE__ */ jsx726(
+            Text,
+            {
+              color: theme.colors.content.alert.primary,
+              fontSize: sizeStyles.fontSize - 2,
+              style: { lineHeight: sizeStyles.lineHeight + "px" },
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    );
   }
 );
 MultiSelect.displayName = "MultiSelect";