@xsolla/xui-multi-select 0.184.0 → 0.185.0

package/package.json

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

package/web/index.d.mts

@@ -5,6 +5,7 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
 type MultiSelectValue = (string | number)[];
 type MultiSelectVariant = "tag" | "text";
 type MultiSelectSize = "xs" | "sm" | "md" | "lg" | "xl";
+type MultiSelectOptionOverflow = "truncate" | "wrap" | "scroll";
 type MultiSelectState = "default" | "hover" | "focus" | "disable" | "error";
 interface MultiSelectOption {
     label: ReactNode;
@@ -83,6 +84,35 @@ interface MultiSelectProps extends ThemeOverrideProps {
      * @default 300
      */
     maxHeight?: number;
+    /**
+     * How long option labels in the dropdown handle horizontal overflow.
+     * - `"truncate"` — clamp each label to a single line with an ellipsis.
+     * - `"wrap"` — allow labels to wrap onto multiple lines (rows grow taller).
+     * - `"scroll"` — keep labels on one line and scroll the list horizontally
+     *   (legacy behavior). Web only — falls back to `"wrap"` on native, which
+     *   cannot horizontally scroll a text row.
+     * @default "truncate"
+     */
+    optionOverflow?: MultiSelectOptionOverflow;
+    /**
+     * When true, shows a search input at the top of the built-in dropdown that
+     * filters options in memory by their label as the user types. Mirrors the
+     * `searchable` behavior of the Select component. Web only — ignored on
+     * native and when `dropdownMenu` is false.
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder text for the search input. Only used when `searchable` is true.
+     * @default "Search"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Message shown in the dropdown when the search filter matches no options.
+     * Only used when `searchable` is true.
+     * @default "No results"
+     */
+    noOptionsMessage?: string;
     /**
      * 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
@@ -112,4 +142,4 @@ interface MultiSelectProps extends ThemeOverrideProps {
 
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;
 
-export { MultiSelect, type MultiSelectOption, type MultiSelectProps, type MultiSelectSize, type MultiSelectState, type MultiSelectValue, type MultiSelectVariant };
+export { MultiSelect, type MultiSelectOption, type MultiSelectOptionOverflow, type MultiSelectProps, type MultiSelectSize, type MultiSelectState, type MultiSelectValue, type MultiSelectVariant };

package/web/index.d.ts

@@ -5,6 +5,7 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
 type MultiSelectValue = (string | number)[];
 type MultiSelectVariant = "tag" | "text";
 type MultiSelectSize = "xs" | "sm" | "md" | "lg" | "xl";
+type MultiSelectOptionOverflow = "truncate" | "wrap" | "scroll";
 type MultiSelectState = "default" | "hover" | "focus" | "disable" | "error";
 interface MultiSelectOption {
     label: ReactNode;
@@ -83,6 +84,35 @@ interface MultiSelectProps extends ThemeOverrideProps {
      * @default 300
      */
     maxHeight?: number;
+    /**
+     * How long option labels in the dropdown handle horizontal overflow.
+     * - `"truncate"` — clamp each label to a single line with an ellipsis.
+     * - `"wrap"` — allow labels to wrap onto multiple lines (rows grow taller).
+     * - `"scroll"` — keep labels on one line and scroll the list horizontally
+     *   (legacy behavior). Web only — falls back to `"wrap"` on native, which
+     *   cannot horizontally scroll a text row.
+     * @default "truncate"
+     */
+    optionOverflow?: MultiSelectOptionOverflow;
+    /**
+     * When true, shows a search input at the top of the built-in dropdown that
+     * filters options in memory by their label as the user types. Mirrors the
+     * `searchable` behavior of the Select component. Web only — ignored on
+     * native and when `dropdownMenu` is false.
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder text for the search input. Only used when `searchable` is true.
+     * @default "Search"
+     */
+    searchPlaceholder?: string;
+    /**
+     * Message shown in the dropdown when the search filter matches no options.
+     * Only used when `searchable` is true.
+     * @default "No results"
+     */
+    noOptionsMessage?: string;
     /**
      * 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
@@ -112,4 +142,4 @@ interface MultiSelectProps extends ThemeOverrideProps {
 
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;
 
-export { MultiSelect, type MultiSelectOption, type MultiSelectProps, type MultiSelectSize, type MultiSelectState, type MultiSelectValue, type MultiSelectVariant };
+export { MultiSelect, type MultiSelectOption, type MultiSelectOptionOverflow, type MultiSelectProps, type MultiSelectSize, type MultiSelectState, type MultiSelectValue, type MultiSelectVariant };

package/web/index.js

@@ -359,10 +359,6 @@ var isWeb = true;
 // src/MultiSelect.tsx
 var import_xui_core4 = require("@xsolla/xui-core");
 
-// src/MultiSelectControl.tsx
-var import_react9 = require("react");
-var import_xui_core3 = require("@xsolla/xui-core");
-
 // ../../foundation/icons-base/dist/web/index.mjs
 var import_styled_components4 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -1141,6 +1137,13 @@ var ExclamationMarkCr = (props) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx
 var solidContent172 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_remove--solid"><path id="Union" d="M20.5 3C20.7761 3 21 3.22386 21 3.5V20.5C21 20.7761 20.7761 21 20.5 21H3.5C3.22386 21 3 20.7761 3 20.5V3.5C3 3.22386 3.22386 3 3.5 3H20.5ZM12 10.5859L7.20703 5.79297L5.79297 7.20703L10.5859 12L5.79297 16.793L7.20703 18.207L12 13.4141L16.793 18.207L18.207 16.793L13.4141 12L18.207 7.20703L16.793 5.79297L12 10.5859Z" style="fill: currentColor"/></g></svg>`;
 var lineContent172 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_remove--line"><path id="Union" d="M20.0303 5.41455L13.4199 12.0249L20.0195 18.6245L18.6055 20.0386L12.0059 13.439L5.41406 20.0308L4 18.6167L10.5918 12.0249L4.00879 5.44189L5.42285 4.02783L12.0059 10.6108L18.6162 4.00049L20.0303 5.41455Z" style="fill: currentColor"/></g></svg>`;
 var Remove = (props) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(BaseIcon, { ...props, solidContent: solidContent172, lineContent: lineContent172 });
+var solidContent706 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--solid"><path id="Union" d="M10.0215 2.02148C14.4398 2.02148 18.0215 5.60321 18.0215 10.0215C18.0215 11.8699 17.3926 13.5702 16.3398 14.9248L21.9785 20.5645L20.5645 21.9785L14.9248 16.3389C13.5702 17.3918 11.8701 18.0215 10.0215 18.0215C5.60321 18.0215 2.02148 14.4398 2.02148 10.0215C2.02148 5.60321 5.60321 2.02148 10.0215 2.02148ZM10.0215 4.02148C6.70778 4.02148 4.02148 6.70778 4.02148 10.0215C4.02148 13.3352 6.70778 16.0215 10.0215 16.0215C13.3352 16.0215 16.0215 13.3352 16.0215 10.0215C16.0215 6.70778 13.3352 4.02148 10.0215 4.02148ZM7.19336 7.19336C8.75546 5.63126 11.2875 5.63126 12.8496 7.19336C14.4117 8.75546 14.4117 11.2875 12.8496 12.8496C11.2875 14.4117 8.75546 14.4117 7.19336 12.8496C5.63126 11.2875 5.63127 8.75546 7.19336 7.19336Z" style="fill: currentColor"/></g></svg>`;
+var lineContent706 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
+var Search = (props) => /* @__PURE__ */ (0, import_jsx_runtime710.jsx)(BaseIcon, { ...props, solidContent: solidContent706, lineContent: lineContent706 });
+
+// src/MultiSelectControl.tsx
+var import_react9 = require("react");
+var import_xui_core3 = require("@xsolla/xui-core");
 
 // src/useMultiSelectControl.tsx
 var import_react8 = require("react");
@@ -2239,10 +2242,14 @@ var MultiSelect = (0, import_react12.forwardRef)(
     iconLeft,
     iconRight,
     maxHeight = 300,
+    optionOverflow = "truncate",
     dropdownMenu = true,
     onTriggerPress,
     menuOpen = false,
     menuMinWidth,
+    searchable = false,
+    searchPlaceholder = "Search",
+    noOptionsMessage = "No results",
     testID,
     themeMode,
     themeProductContext
@@ -2251,8 +2258,12 @@ var MultiSelect = (0, import_react12.forwardRef)(
     const modalId = (0, import_xui_core4.useModalId)();
     const controlRef = (0, import_react12.useRef)(null);
     const menuRef = (0, import_react12.useRef)(null);
+    const containerRef = (0, import_react12.useRef)(null);
+    const searchInputRef = (0, import_react12.useRef)(null);
     const [menuPosition, setMenuPosition] = (0, import_react12.useState)(null);
+    const [searchValue, setSearchValue] = (0, import_react12.useState)("");
     const sizeStyles = theme.sizing.input(size);
+    const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
     const isError = state === "error" || !!errorMessage;
@@ -2277,7 +2288,19 @@ var MultiSelect = (0, import_react12.forwardRef)(
         onClose();
       }
     }, [isDisable, dropdownMenu, onClose]);
-    const menuItems = options.map((opt) => {
+    (0, import_react12.useEffect)(() => {
+      if (isOpen && searchable && isWeb) {
+        searchInputRef.current?.focus();
+      }
+    }, [isOpen, searchable]);
+    (0, import_react12.useEffect)(() => {
+      if (!isOpen) setSearchValue("");
+    }, [isOpen]);
+    const getOptionText = (opt) => typeof opt.label === "string" ? opt.label : String(opt.value);
+    const filteredOptions = searchable && searchValue ? options.filter(
+      (opt) => getOptionText(opt).toLowerCase().includes(searchValue.toLowerCase())
+    ) : options;
+    const menuItems = filteredOptions.map((opt) => {
       const id = String(opt.value);
       const checked = values.map(String).includes(id);
       return {
@@ -2295,6 +2318,22 @@ var MultiSelect = (0, import_react12.forwardRef)(
     };
     const controlMenuOpen = dropdownMenu ? isOpen : Boolean(menuOpen);
     const controlOnClick = dropdownMenu ? onSelectClick : onTriggerPress;
+    const isScrollOverflow = optionOverflow === "scroll";
+    const isWrapOverflow = optionOverflow === "wrap";
+    const optionListOverflowX = isScrollOverflow ? "auto" : "hidden";
+    const optionRowMinWidth = isScrollOverflow ? void 0 : 0;
+    const optionLabelNumberOfLines = optionOverflow === "truncate" ? 1 : void 0;
+    const optionLabelStyle = isScrollOverflow ? { whiteSpace: "nowrap" } : isWrapOverflow ? {
+      minWidth: 0,
+      whiteSpace: "normal",
+      overflowWrap: "break-word",
+      wordBreak: "break-word"
+    } : {
+      minWidth: 0,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    };
     const updateMenuPosition = (0, import_react12.useCallback)(() => {
       if (!isWeb || !controlRef.current) return;
       const rect = controlRef.current.getBoundingClientRect();
@@ -2314,13 +2353,25 @@ var MultiSelect = (0, import_react12.forwardRef)(
         window.removeEventListener("scroll", updateMenuPosition, true);
       };
     }, [controlMenuOpen, dropdownMenu, isDisable, updateMenuPosition]);
+    (0, import_react12.useEffect)(() => {
+      if (!isWeb || !dropdownMenu || !isOpen || isDisable) return;
+      const handleOutsideMouseDown = (event) => {
+        const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        const targetNode = event.target;
+        const isInside = (el) => !!el && (path.length ? path.includes(el) : !!targetNode && el.contains(targetNode));
+        if (isInside(containerRef.current) || isInside(menuRef.current)) return;
+        onClose();
+      };
+      document.addEventListener("mousedown", handleOutsideMouseDown);
+      return () => document.removeEventListener("mousedown", handleOutsideMouseDown);
+    }, [dropdownMenu, isOpen, isDisable, onClose]);
     const externalFieldLayout = !dropdownMenu ? {
       width: "100%",
       minWidth: menuMinWidth ?? EXTERNAL_MENU_MIN_WIDTH_DEFAULT,
       boxSizing: "border-box"
     } : void 0;
     const dropdown = dropdownMenu && isOpen && !isDisable && (!isWeb || menuPosition) && /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(import_jsx_runtime733.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+      !isWeb && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
         Box,
         {
           "data-modal-id": modalId,
@@ -2336,7 +2387,7 @@ var MultiSelect = (0, import_react12.forwardRef)(
           onPress: onClose
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
         Box,
         {
           ref: menuRef,
@@ -2345,7 +2396,6 @@ var MultiSelect = (0, import_react12.forwardRef)(
           borderColor: theme.colors.border.secondary,
           borderWidth: 1,
           borderRadius: sizeStyles.radius,
-          paddingVertical: 4,
           style: {
             position: isWeb ? "fixed" : "absolute",
             top: isWeb ? menuPosition?.top : "100%",
@@ -2355,54 +2405,134 @@ var MultiSelect = (0, import_react12.forwardRef)(
             marginTop: isWeb ? void 0 : 4,
             zIndex: 1001,
             // Above control (1000) and backdrop (999)
-            boxShadow: theme.shadow.popover,
-            maxHeight,
-            overflowY: "auto"
+            boxShadow: theme.shadow.popover
           },
-          children: menuItems.map((item, _index) => {
-            const brandColors = theme.colors.control.brand.primary;
-            const contentColors = theme.colors.content;
-            return /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+          children: [
+            searchable && isWeb && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
               Box,
               {
-                testID,
                 paddingHorizontal: sizeStyles.paddingHorizontal,
-                paddingVertical: 8,
-                onPress: () => {
-                  if (!item.disabled) {
-                    handleItemToggle(item.id, !item.checked);
+                paddingVertical: sizeStyles.paddingVertical,
+                borderBottomWidth: 1,
+                borderColor: theme.colors.border.secondary,
+                children: /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
+                  Box,
+                  {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: sizeStyles.paddingHorizontal / 2,
+                    paddingHorizontal: 4,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                        Icon,
+                        {
+                          size: sizeStyles.iconSize - 2,
+                          color: inputColors.placeholder,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(Search, {})
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                        Box,
+                        {
+                          as: "input",
+                          ref: searchInputRef,
+                          testID: testID ? `${testID}-search-input` : void 0,
+                          flex: 1,
+                          type: "text",
+                          "aria-label": searchPlaceholder,
+                          value: searchValue,
+                          onChange: (e) => setSearchValue(e.target.value),
+                          placeholder: searchPlaceholder,
+                          style: {
+                            border: "none",
+                            outline: "none",
+                            background: "transparent",
+                            color: inputColors.text,
+                            fontSize: sizeStyles.fontSize,
+                            width: "100%"
+                          }
+                        }
+                      )
+                    ]
                   }
-                },
-                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,
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+              Box,
+              {
+                paddingVertical: 4,
                 style: {
-                  cursor: item.disabled ? "not-allowed" : "pointer",
-                  opacity: item.disabled ? 0.5 : 1
+                  maxHeight: searchable ? maxHeight - 60 : maxHeight,
+                  overflowY: "auto",
+                  overflowX: optionListOverflowX
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-                  Text,
+                children: menuItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                  Box,
                   {
-                    color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
-                    fontSize: sizeStyles.fontSize,
-                    fontWeight: "400",
-                    children: item.children
+                    paddingVertical: sizeStyles.paddingVertical * 2,
+                    paddingHorizontal: sizeStyles.paddingHorizontal,
+                    alignItems: "center",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                      Text,
+                      {
+                        color: theme.colors.content.tertiary,
+                        fontSize: sizeStyles.fontSize,
+                        children: noOptionsMessage
+                      }
+                    )
                   }
-                )
-              },
-              item.id
-            );
-          })
+                ) : menuItems.map((item, _index) => {
+                  const brandColors = theme.colors.control.brand.primary;
+                  const contentColors = theme.colors.content;
+                  return /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                    Box,
+                    {
+                      testID,
+                      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,
+                        minWidth: optionRowMinWidth
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                        Text,
+                        {
+                          color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
+                          fontSize: sizeStyles.fontSize,
+                          fontWeight: "400",
+                          numberOfLines: optionLabelNumberOfLines,
+                          style: optionLabelStyle,
+                          children: item.children
+                        }
+                      )
+                    },
+                    item.id
+                  );
+                })
+              }
+            )
+          ]
         }
       )
     ] });
     return /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
       Box,
       {
+        ref: containerRef,
         testID,
         flexDirection: "column",
         gap: sizeStyles.fieldGap,