@xsolla/xui-multi-select 0.149.0-pr270.1777888548 → 0.149.1

package/README.md

@@ -139,51 +139,6 @@ 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
@@ -199,10 +154,6 @@ Add backdrop, click-outside, and Escape handling in your layout as needed (see S
 | 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,29 +83,6 @@ 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,29 +83,6 @@ 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,7 +1926,6 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
     iconRight,
     disabled = false,
     extraClear = false,
-    width,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -1975,7 +1974,6 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
       Box,
       {
         ref,
-        width,
         backgroundColor,
         borderColor,
         borderWidth: borderColor !== "transparent" ? 1 : 0,
@@ -1987,7 +1985,7 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
         alignItems: "center",
         gap: 8,
         style: {
-          cursor: isDisable ? "not-allowed" : onClick ? "pointer" : "default",
+          cursor: isDisable ? "not-allowed" : "pointer",
           boxSizing: "border-box",
           height: flexible ? "auto" : sizeStyles.height,
           position: "relative",
@@ -1995,7 +1993,7 @@ var MultiSelectControl = (0, import_react8.forwardRef)(
           // Above backdrop when open
         },
         onPress: isDisable ? void 0 : onClick,
-        hoverStyle: !isDisable && onClick && !isFocus && !isOpen && !isError ? {
+        hoverStyle: !isDisable && !isFocus && !isOpen && !isError ? {
           backgroundColor: inputColors.bgHover,
           borderColor: inputColors.borderHover
         } : void 0,
@@ -2151,7 +2149,6 @@ 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,
@@ -2170,10 +2167,6 @@ var MultiSelect = (0, import_react10.forwardRef)(
     iconLeft,
     iconRight,
     maxHeight = 300,
-    dropdownMenu = true,
-    onTriggerPress,
-    menuOpen = false,
-    menuMinWidth,
     themeMode,
     themeProductContext
   }, ref) => {
@@ -2201,10 +2194,10 @@ var MultiSelect = (0, import_react10.forwardRef)(
       onChange
     });
     (0, import_react10.useEffect)(() => {
-      if (isDisable || !dropdownMenu) {
+      if (isDisable) {
         onClose();
       }
-    }, [isDisable, dropdownMenu, onClose]);
+    }, [isDisable, onClose]);
     const menuItems = options.map((opt) => {
       const id = String(opt.value);
       const checked = values.map(String).includes(id);
@@ -2221,155 +2214,138 @@ var MultiSelect = (0, import_react10.forwardRef)(
       const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
       onChoose(newValues.map(String));
     };
-    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"
-                      },
-                      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,
+    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,
                           {
-                            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
-            }
-          )
-        ]
-      }
-    );
+                            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";