@xsolla/xui-multi-select 0.183.0 → 0.185.0

package/web/index.mjs

@@ -1,5 +1,11 @@
 // src/MultiSelect.tsx
-import { forwardRef as forwardRef4, useRef as useRef4, useEffect as useEffect4, useState as useState4, useCallback as useCallback2 } from "react";
+import {
+  forwardRef as forwardRef4,
+  useRef as useRef4,
+  useEffect as useEffect4,
+  useState as useState4,
+  useCallback as useCallback2
+} from "react";
 
 // ../../foundation/primitives-web/src/Box.tsx
 import React2 from "react";
@@ -323,10 +329,6 @@ var isWeb = true;
 // src/MultiSelect.tsx
 import { useModalId, useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 
-// src/MultiSelectControl.tsx
-import { forwardRef as forwardRef3, useRef as useRef2 } from "react";
-import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
-
 // ../../foundation/icons-base/dist/web/index.mjs
 import styled4 from "styled-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1105,6 +1107,13 @@ var ExclamationMarkCr = (props) => /* @__PURE__ */ jsx149(BaseIcon, { ...props,
 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__ */ jsx173(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__ */ jsx707(BaseIcon, { ...props, solidContent: solidContent706, lineContent: lineContent706 });
+
+// src/MultiSelectControl.tsx
+import { forwardRef as forwardRef3, useRef as useRef2 } from "react";
+import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
 
 // src/useMultiSelectControl.tsx
 import {
@@ -2208,10 +2217,14 @@ var MultiSelect = forwardRef4(
     iconLeft,
     iconRight,
     maxHeight = 300,
+    optionOverflow = "truncate",
     dropdownMenu = true,
     onTriggerPress,
     menuOpen = false,
     menuMinWidth,
+    searchable = false,
+    searchPlaceholder = "Search",
+    noOptionsMessage = "No results",
     testID,
     themeMode,
     themeProductContext
@@ -2220,8 +2233,12 @@ var MultiSelect = forwardRef4(
     const modalId = useModalId();
     const controlRef = useRef4(null);
     const menuRef = useRef4(null);
+    const containerRef = useRef4(null);
+    const searchInputRef = useRef4(null);
     const [menuPosition, setMenuPosition] = useState4(null);
+    const [searchValue, setSearchValue] = useState4("");
     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;
@@ -2246,7 +2263,19 @@ var MultiSelect = forwardRef4(
         onClose();
       }
     }, [isDisable, dropdownMenu, onClose]);
-    const menuItems = options.map((opt) => {
+    useEffect4(() => {
+      if (isOpen && searchable && isWeb) {
+        searchInputRef.current?.focus();
+      }
+    }, [isOpen, searchable]);
+    useEffect4(() => {
+      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 {
@@ -2264,6 +2293,22 @@ var MultiSelect = forwardRef4(
     };
     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 = useCallback2(() => {
       if (!isWeb || !controlRef.current) return;
       const rect = controlRef.current.getBoundingClientRect();
@@ -2283,13 +2328,25 @@ var MultiSelect = forwardRef4(
         window.removeEventListener("scroll", updateMenuPosition, true);
       };
     }, [controlMenuOpen, dropdownMenu, isDisable, updateMenuPosition]);
+    useEffect4(() => {
+      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__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx726(
+      !isWeb && /* @__PURE__ */ jsx726(
         Box,
         {
           "data-modal-id": modalId,
@@ -2305,7 +2362,7 @@ var MultiSelect = forwardRef4(
           onPress: onClose
         }
       ),
-      /* @__PURE__ */ jsx726(
+      /* @__PURE__ */ jsxs4(
         Box,
         {
           ref: menuRef,
@@ -2314,7 +2371,6 @@ var MultiSelect = forwardRef4(
           borderColor: theme.colors.border.secondary,
           borderWidth: 1,
           borderRadius: sizeStyles.radius,
-          paddingVertical: 4,
           style: {
             position: isWeb ? "fixed" : "absolute",
             top: isWeb ? menuPosition?.top : "100%",
@@ -2324,54 +2380,134 @@ var MultiSelect = forwardRef4(
             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__ */ jsx726(
+          children: [
+            searchable && isWeb && /* @__PURE__ */ jsx726(
               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__ */ jsxs4(
+                  Box,
+                  {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: sizeStyles.paddingHorizontal / 2,
+                    paddingHorizontal: 4,
+                    children: [
+                      /* @__PURE__ */ jsx726(
+                        Icon,
+                        {
+                          size: sizeStyles.iconSize - 2,
+                          color: inputColors.placeholder,
+                          children: /* @__PURE__ */ jsx726(Search, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsx726(
+                        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__ */ jsx726(
+              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__ */ jsx726(
-                  Text,
+                children: menuItems.length === 0 ? /* @__PURE__ */ jsx726(
+                  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__ */ jsx726(
+                      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__ */ jsx726(
+                    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__ */ jsx726(
+                        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__ */ jsxs4(
       Box,
       {
+        ref: containerRef,
         testID,
         flexDirection: "column",
         gap: sizeStyles.fieldGap,