@xsolla/xui-multi-select 0.216.1 → 0.217.0

package/web/index.mjs

@@ -448,7 +448,8 @@ var useMultiSelectControl = ({
       stateList: stateList.map((item) => item.value),
       variant,
       size,
-      removeTagsButtons
+      removeTagsButtons,
+      lockedList: stateList.filter((item) => item.removable === false).map((item) => item.value)
     }),
     [stateList, variant, size, removeTagsButtons]
   );
@@ -461,11 +462,18 @@ var useMultiSelectControl = ({
       return true;
     if (prev.stateList.length !== widthsDependencies.stateList.length)
       return true;
+    if (prev.lockedList.length !== widthsDependencies.lockedList.length)
+      return true;
     let i = 0;
     for (const v of prev.stateList) {
       if (v !== widthsDependencies.stateList[i]) return true;
       i++;
     }
+    let j = 0;
+    for (const v of prev.lockedList) {
+      if (v !== widthsDependencies.lockedList[j]) return true;
+      j++;
+    }
     return false;
   };
   const setPlaceholder = () => {
@@ -519,26 +527,28 @@ var useMultiSelectControl = ({
     }
     const content = displayedItems.map((item, index2) => {
       const isCount = item.value === COUNT_ITEM_VALUE;
+      const isLocked = !isCount && item.removable === false;
+      const canRemove = !isCount && !isLocked;
       const isReducable = index2 === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
       if (variant === "tag") {
         return /* @__PURE__ */ jsx4(
           Box,
           {
-            onPress: !isCount ? (e) => {
+            onPress: canRemove ? (e) => {
               e.stopPropagation();
               if (!disabled) removeValue(item.value, e);
             } : void 0,
             style: {
               minWidth: isReducable ? 0 : "fit-content",
               opacity: disabled ? 0.5 : 1,
-              cursor: disabled || isCount ? "not-allowed" : "pointer"
+              cursor: isLocked ? "default" : disabled || isCount ? "not-allowed" : "pointer"
             },
             children: /* @__PURE__ */ jsx4(
               Tag,
               {
                 size,
                 tone: "primary",
-                onRemove: removeTagsButtons && !isCount ? (e) => {
+                onRemove: removeTagsButtons && canRemove ? (e) => {
                   e?.stopPropagation();
                   if (!disabled) removeValue(item.value, e);
                 } : void 0,
@@ -797,6 +807,7 @@ var initialState = {
   selectedItems: [],
   isOpen: false
 };
+var isLockedOption = (option) => option.removable === false;
 var useMultiSelect = ({
   options,
   value = [],
@@ -804,9 +815,13 @@ var useMultiSelect = ({
 }) => {
   const [state, setState] = useState2(initialState);
   const optionsRef = useRef3(options);
+  const valuesRef = useRef3(value);
   useEffect2(() => {
     optionsRef.current = options;
   }, [options]);
+  useEffect2(() => {
+    valuesRef.current = state.values;
+  }, [state.values]);
   useEffect2(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
@@ -815,9 +830,15 @@ var useMultiSelect = ({
       selectedItems
     }));
   }, [options, value]);
+  const getLockedSelectedValues = () => optionsRef.current.filter(
+    (opt) => isLockedOption(opt) && valuesRef.current.includes(opt.value)
+  ).map((opt) => opt.value);
   const onChoose = useCallback(
     (selectedIds) => {
-      const newValues = optionsRef.current.filter((opt) => selectedIds.includes(String(opt.value))).map((opt) => opt.value);
+      const lockedValues = getLockedSelectedValues();
+      const newValues = optionsRef.current.filter(
+        (opt) => selectedIds.includes(String(opt.value)) || lockedValues.includes(opt.value)
+      ).map((opt) => opt.value);
       const newSelectedItems = optionsRef.current.filter(
         (opt) => newValues.includes(opt.value)
       );
@@ -833,6 +854,8 @@ var useMultiSelect = ({
   const onRemove = useCallback(
     (value2, event) => {
       event?.stopPropagation();
+      const option = optionsRef.current.find((opt) => opt.value === value2);
+      if (option && isLockedOption(option)) return;
       setState((prev) => {
         const newValues = prev.values.filter((v) => v !== value2);
         const newSelectedItems = optionsRef.current.filter(
@@ -849,12 +872,16 @@ var useMultiSelect = ({
     [onChange]
   );
   const onRemoveAll = useCallback(() => {
+    const keptValues = getLockedSelectedValues();
+    const keptItems = optionsRef.current.filter(
+      (opt) => keptValues.includes(opt.value)
+    );
     setState((prevState) => ({
       ...prevState,
-      values: [],
-      selectedItems: []
+      values: keptValues,
+      selectedItems: keptItems
     }));
-    onChange?.([]);
+    onChange?.(keptValues);
   }, [onChange]);
   const onSelectClick = useCallback(() => {
     setState((prevState) => ({
@@ -894,6 +921,8 @@ var Portal = ({ children }) => {
 // src/MultiSelect.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
+var SEARCH_ROW_HEIGHT = 60;
+var SELECT_ALL_ROW_HEIGHT = 37;
 var MultiSelect = forwardRef2(
   ({
     options,
@@ -920,6 +949,9 @@ var MultiSelect = forwardRef2(
     searchable = false,
     searchPlaceholder = "Search",
     noOptionsMessage = "No results",
+    selectAll = false,
+    selectAllLabel = "Select all",
+    deselectAllLabel = "Deselect all",
     testID,
     themeMode,
     themeProductContext
@@ -971,22 +1003,33 @@ var MultiSelect = forwardRef2(
     const filteredOptions = searchable && searchValue ? options.filter(
       (opt) => getOptionText(opt).toLowerCase().includes(searchValue.toLowerCase())
     ) : options;
+    const selectedIds = values.map(String);
     const menuItems = filteredOptions.map((opt) => {
       const id = String(opt.value);
-      const checked = values.map(String).includes(id);
+      const checked = selectedIds.includes(id);
       return {
         id,
         children: opt.label,
         checked,
-        disabled: opt.disabled
+        disabled: opt.disabled,
+        locked: opt.removable === false
       };
     });
     const handleItemToggle = (id, checked) => {
-      const value2 = options.find((opt) => String(opt.value) === id)?.value;
-      if (value2 === void 0) return;
-      const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
+      const option = options.find((opt) => String(opt.value) === id);
+      if (option === void 0) return;
+      if (!checked && option.removable === false) return;
+      const newValues = checked ? [...values, option.value] : values.filter((v) => v !== option.value);
       onChoose(newValues.map(String));
     };
+    const selectAllTargets = filteredOptions.filter((opt) => !opt.disabled);
+    const showSelectAll = selectAll && dropdownMenu && selectAllTargets.length > 0;
+    const areAllTargetsSelected = showSelectAll && selectAllTargets.every((opt) => selectedIds.includes(String(opt.value)));
+    const handleSelectAllToggle = () => {
+      const targetIds = selectAllTargets.map((opt) => String(opt.value));
+      const nextIds = areAllTargetsSelected ? selectedIds.filter((id) => !targetIds.includes(id)) : Array.from(/* @__PURE__ */ new Set([...selectedIds, ...targetIds]));
+      onChoose(nextIds);
+    };
     const controlMenuOpen = dropdownMenu ? isOpen : Boolean(menuOpen);
     const controlOnClick = dropdownMenu ? onSelectClick : onTriggerPress;
     const isScrollOverflow = optionOverflow === "scroll";
@@ -1005,6 +1048,7 @@ var MultiSelect = forwardRef2(
       overflow: "hidden",
       textOverflow: "ellipsis"
     };
+    const optionsListMaxHeight = maxHeight - (searchable ? SEARCH_ROW_HEIGHT : 0) - (showSelectAll ? SELECT_ALL_ROW_HEIGHT : 0);
     useEffect4(() => {
       if (!isWeb || !controlMenuOpen || isDisable || !dropdownMenu) return;
       let rafId = null;
@@ -1138,12 +1182,41 @@ var MultiSelect = forwardRef2(
                 )
               }
             ),
+            showSelectAll && /* @__PURE__ */ jsx6(
+              Box,
+              {
+                role: "button",
+                "aria-label": areAllTargetsSelected ? deselectAllLabel : selectAllLabel,
+                testID: testID ? `${testID}-select-all` : void 0,
+                paddingHorizontal: sizeStyles.paddingHorizontal,
+                paddingVertical: 8,
+                borderBottomWidth: 1,
+                borderColor: theme.colors.border.secondary,
+                flexDirection: "row",
+                alignItems: "center",
+                onPress: handleSelectAllToggle,
+                hoverStyle: {
+                  backgroundColor: theme.colors.control.input.bgHover
+                },
+                style: { cursor: "pointer" },
+                children: /* @__PURE__ */ jsx6(
+                  Text,
+                  {
+                    color: theme.colors.content.brand.primary,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "500",
+                    numberOfLines: 1,
+                    children: areAllTargetsSelected ? deselectAllLabel : selectAllLabel
+                  }
+                )
+              }
+            ),
             /* @__PURE__ */ jsx6(
               Box,
               {
                 paddingVertical: 4,
                 style: {
-                  maxHeight: searchable ? maxHeight - 60 : maxHeight,
+                  maxHeight: optionsListMaxHeight,
                   overflowY: "auto",
                   overflowX: optionListOverflowX,
                   scrollbarWidth: "none"
@@ -1166,6 +1239,7 @@ var MultiSelect = forwardRef2(
                 ) : menuItems.map((item, _index) => {
                   const brandColors = theme.colors.control.brand.primary;
                   const contentColors = theme.colors.content;
+                  const isInert = item.locked && item.checked;
                   return /* @__PURE__ */ jsx6(
                     Box,
                     {
@@ -1173,7 +1247,7 @@ var MultiSelect = forwardRef2(
                       paddingHorizontal: sizeStyles.paddingHorizontal,
                       paddingVertical: 8,
                       onPress: () => {
-                        if (!item.disabled) {
+                        if (!item.disabled && !isInert) {
                           handleItemToggle(item.id, !item.checked);
                         }
                       },
@@ -1185,7 +1259,7 @@ var MultiSelect = forwardRef2(
                         backgroundColor: theme.colors.control.input.bgHover
                       } : void 0,
                       style: {
-                        cursor: item.disabled ? "not-allowed" : "pointer",
+                        cursor: item.disabled ? "not-allowed" : isInert ? "default" : "pointer",
                         opacity: item.disabled ? 0.5 : 1,
                         minWidth: optionRowMinWidth
                       },