@xsolla/xui-multi-select 0.149.1 → 0.150.0

package/README.md

@@ -139,6 +139,51 @@ export default function DisabledMultiSelect() {
 }
 ```
 
+### External panel (B2B grouped select)
+
+When the option list is rendered elsewhere (for example [`@xsolla/xui-b2b-group-select`](./b2b-group-select.md)), set **`dropdownMenu={false}`** so the control does not open the built-in list. Wire the same **`value`** / **`onChange`** to both components; use **`onTriggerPress`** to toggle your panel, **`menuOpen`** for chevron/open styling, and **`menuMinWidth`** (default **540**, aligned with `GROUP_SELECT_MIN_PANEL_WIDTH`) so the field matches the panel width.
+
+```tsx
+import * as React from 'react';
+import { MultiSelect } from '@xsolla/xui-multi-select';
+import {
+  GroupSelect,
+  GROUP_SELECT_MIN_PANEL_WIDTH,
+  type GroupSelectGroup,
+} from '@xsolla/xui-b2b-group-select';
+
+const groups: GroupSelectGroup[] = [/* ... */];
+const flatOptions = groups.flatMap((g) =>
+  g.items.map((it) => ({ value: it.id, label: it.label }))
+);
+
+export default function GroupedFieldShell() {
+  const [value, setValue] = React.useState<string[]>([]);
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <MultiSelect
+        options={flatOptions}
+        value={value}
+        onChange={(v) => setValue(v.map(String))}
+        placeholder="Select regions"
+        size="sm"
+        dropdownMenu={false}
+        menuOpen={open}
+        menuMinWidth={GROUP_SELECT_MIN_PANEL_WIDTH}
+        onTriggerPress={() => setOpen((o) => !o)}
+      />
+      {open && (
+        <GroupSelect groups={groups} value={value} onChange={setValue} />
+      )}
+    </>
+  );
+}
+```
+
+Add backdrop, click-outside, and Escape handling in your layout as needed (see Storybook).
+
 ## API Reference
 
 ### MultiSelect
@@ -154,6 +199,10 @@ export default function DisabledMultiSelect() {
 | size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Component size. |
 | label | `string` | - | Label above select. |
 | disabled | `boolean` | `false` | Disabled state. |
+| dropdownMenu | `boolean` | `true` | When `false`, hides the built-in list; use with an external picker (e.g. B2B Group select). |
+| onTriggerPress | `() => void` | - | When `dropdownMenu` is false: called when the user activates the field (toggle external panel). |
+| menuOpen | `boolean` | `false` | When `dropdownMenu` is false: drives open/chevron state for the control. |
+| menuMinWidth | `number` | `540` | When `dropdownMenu` is false: field `min-width` in px (aligned with `GroupSelect`). |
 
 ## Display Behavior
 

package/native/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/native/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/native/index.js

@@ -1926,6 +1926,7 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
     iconRight,
     disabled = false,
     extraClear = false,
+    width,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -1974,6 +1975,7 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
       Box,
       {
         ref,
+        width,
         backgroundColor,
         borderColor,
         borderWidth: borderColor !== "transparent" ? 1 : 0,
@@ -1985,7 +1987,7 @@ var MultiSelectControl = (0, import_react8.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",
@@ -1993,7 +1995,7 @@ var MultiSelectControl = (0, import_react8.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,
@@ -2149,6 +2151,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_react10.forwardRef)(
   ({
     options,
@@ -2167,6 +2170,10 @@ var MultiSelect = (0, import_react10.forwardRef)(
     iconLeft,
     iconRight,
     maxHeight = 300,
+    dropdownMenu = true,
+    onTriggerPress,
+    menuOpen = false,
+    menuMinWidth,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -2194,10 +2201,10 @@ var MultiSelect = (0, import_react10.forwardRef)(
       onChange
     });
     (0, import_react10.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);
@@ -2214,138 +2221,155 @@ var MultiSelect = (0, import_react10.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";