@xsolla/xui-multi-select 0.149.1 → 0.150.0

package/package.json

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

package/web/index.d.mts

@@ -83,6 +83,29 @@ interface MultiSelectProps extends ThemeOverrideProps {
      * @default 300
      */
     maxHeight?: number;
+    /**
+     * When false, the built-in options list and backdrop are not shown and the control
+     * does not open on click. Use with an external picker (e.g. grouped select) wired
+     * to the same `value` / `onChange`.
+     * @default true
+     */
+    dropdownMenu?: boolean;
+    /**
+     * When `dropdownMenu` is false: fired when the user activates the field (same gesture
+     * that would open the built-in list). Typically toggle an external panel.
+     */
+    onTriggerPress?: () => void;
+    /**
+     * When `dropdownMenu` is false: whether an external menu/panel is open — drives
+     * chevron direction and control layering like the built-in open state.
+     */
+    menuOpen?: boolean;
+    /**
+     * When `dropdownMenu` is false: `min-width` of the field in px so it aligns with
+     * a typical grouped panel (default **540**, same as `GroupSelect`). Use `0` for
+     * no minimum. Ignored when the built-in dropdown is enabled.
+     */
+    menuMinWidth?: number;
 }
 
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;

package/web/index.d.ts

@@ -83,6 +83,29 @@ interface MultiSelectProps extends ThemeOverrideProps {
      * @default 300
      */
     maxHeight?: number;
+    /**
+     * When false, the built-in options list and backdrop are not shown and the control
+     * does not open on click. Use with an external picker (e.g. grouped select) wired
+     * to the same `value` / `onChange`.
+     * @default true
+     */
+    dropdownMenu?: boolean;
+    /**
+     * When `dropdownMenu` is false: fired when the user activates the field (same gesture
+     * that would open the built-in list). Typically toggle an external panel.
+     */
+    onTriggerPress?: () => void;
+    /**
+     * When `dropdownMenu` is false: whether an external menu/panel is open — drives
+     * chevron direction and control layering like the built-in open state.
+     */
+    menuOpen?: boolean;
+    /**
+     * When `dropdownMenu` is false: `min-width` of the field in px so it aligns with
+     * a typical grouped panel (default **540**, same as `GroupSelect`). Use `0` for
+     * no minimum. Ignored when the built-in dropdown is enabled.
+     */
+    menuMinWidth?: number;
 }
 
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;

package/web/index.js

@@ -1972,6 +1972,7 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
     iconRight,
     disabled = false,
     extraClear = false,
+    width,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -2020,6 +2021,7 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
       Box,
       {
         ref,
+        width,
         backgroundColor,
         borderColor,
         borderWidth: borderColor !== "transparent" ? 1 : 0,
@@ -2031,7 +2033,7 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
         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",
@@ -2039,7 +2041,7 @@ var MultiSelectControl = (0, import_react9.forwardRef)(
           // 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,
@@ -2195,6 +2197,7 @@ var useMultiSelect = ({
 
 // src/MultiSelect.tsx
 var import_jsx_runtime733 = require("react/jsx-runtime");
+var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
 var MultiSelect = (0, import_react11.forwardRef)(
   ({
     options,
@@ -2213,6 +2216,10 @@ var MultiSelect = (0, import_react11.forwardRef)(
     iconLeft,
     iconRight,
     maxHeight = 300,
+    dropdownMenu = true,
+    onTriggerPress,
+    menuOpen = false,
+    menuMinWidth,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -2240,10 +2247,10 @@ var MultiSelect = (0, import_react11.forwardRef)(
       onChange
     });
     (0, import_react11.useEffect)(() => {
-      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);
@@ -2260,138 +2267,155 @@ var MultiSelect = (0, import_react11.forwardRef)(
       const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
       onChoose(newValues.map(String));
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-        Text,
-        {
-          color: theme.colors.content.secondary,
-          fontSize: sizeStyles.fontSize - 2,
-          fontWeight: "500",
-          children: label
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
-        Box,
-        {
-          ref,
-          style: {
-            position: "relative"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-              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__ */ (0, import_jsx_runtime733.jsxs)(import_jsx_runtime733.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-                Box,
-                {
-                  style: {
-                    position: "fixed",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    zIndex: 999,
-                    cursor: "default"
-                  },
-                  onPress: onClose
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-                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__ */ (0, import_jsx_runtime733.jsx)(
-                      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__ */ (0, import_jsx_runtime733.jsx)(
-                          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__ */ (0, import_jsx_runtime733.jsxs)(
+      Box,
+      {
+        flexDirection: "column",
+        gap: sizeStyles.fieldGap,
+        style: externalFieldLayout,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+            Text,
+            {
+              color: theme.colors.content.secondary,
+              fontSize: sizeStyles.fontSize - 2,
+              fontWeight: "500",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
+            Box,
+            {
+              ref,
+              style: {
+                position: "relative",
+                ...externalFieldLayout ? { width: "100%" } : {}
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                  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__ */ (0, import_jsx_runtime733.jsxs)(import_jsx_runtime733.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                    Box,
+                    {
+                      style: {
+                        position: "fixed",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 999,
+                        cursor: "default"
                       },
-                      item.id
-                    );
-                  })
-                }
-              )
-            ] })
-          ]
-        }
-      ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-        Text,
-        {
-          color: theme.colors.content.alert.primary,
-          fontSize: sizeStyles.fontSize - 2,
-          style: { lineHeight: sizeStyles.lineHeight + "px" },
-          children: errorMessage
-        }
-      )
-    ] });
+                      onPress: onClose
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                    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__ */ (0, import_jsx_runtime733.jsx)(
+                          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__ */ (0, import_jsx_runtime733.jsx)(
+                              Text,
+                              {
+                                color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
+                                fontSize: sizeStyles.fontSize,
+                                fontWeight: "400",
+                                children: item.children
+                              }
+                            )
+                          },
+                          item.id
+                        );
+                      })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+            Text,
+            {
+              color: theme.colors.content.alert.primary,
+              fontSize: sizeStyles.fontSize - 2,
+              style: { lineHeight: sizeStyles.lineHeight + "px" },
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    );
   }
 );
 MultiSelect.displayName = "MultiSelect";