@xsolla/xui-multi-select 0.216.1 → 0.217.0

package/web/index.js

@@ -464,7 +464,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]
   );
@@ -477,11 +478,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 = () => {
@@ -535,26 +543,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__ */ (0, import_jsx_runtime4.jsx)(
           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__ */ (0, import_jsx_runtime4.jsx)(
               import_xui_tag.Tag,
               {
                 size,
                 tone: "primary",
-                onRemove: removeTagsButtons && !isCount ? (e) => {
+                onRemove: removeTagsButtons && canRemove ? (e) => {
                   e?.stopPropagation();
                   if (!disabled) removeValue(item.value, e);
                 } : void 0,
@@ -813,6 +823,7 @@ var initialState = {
   selectedItems: [],
   isOpen: false
 };
+var isLockedOption = (option) => option.removable === false;
 var useMultiSelect = ({
   options,
   value = [],
@@ -820,9 +831,13 @@ var useMultiSelect = ({
 }) => {
   const [state, setState] = (0, import_react5.useState)(initialState);
   const optionsRef = (0, import_react5.useRef)(options);
+  const valuesRef = (0, import_react5.useRef)(value);
   (0, import_react5.useEffect)(() => {
     optionsRef.current = options;
   }, [options]);
+  (0, import_react5.useEffect)(() => {
+    valuesRef.current = state.values;
+  }, [state.values]);
   (0, import_react5.useEffect)(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
@@ -831,9 +846,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 = (0, import_react5.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)
       );
@@ -849,6 +870,8 @@ var useMultiSelect = ({
   const onRemove = (0, import_react5.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(
@@ -865,12 +888,16 @@ var useMultiSelect = ({
     [onChange]
   );
   const onRemoveAll = (0, import_react5.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 = (0, import_react5.useCallback)(() => {
     setState((prevState) => ({
@@ -910,6 +937,8 @@ var Portal = ({ children }) => {
 // src/MultiSelect.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
+var SEARCH_ROW_HEIGHT = 60;
+var SELECT_ALL_ROW_HEIGHT = 37;
 var MultiSelect = (0, import_react7.forwardRef)(
   ({
     options,
@@ -936,6 +965,9 @@ var MultiSelect = (0, import_react7.forwardRef)(
     searchable = false,
     searchPlaceholder = "Search",
     noOptionsMessage = "No results",
+    selectAll = false,
+    selectAllLabel = "Select all",
+    deselectAllLabel = "Deselect all",
     testID,
     themeMode,
     themeProductContext
@@ -987,22 +1019,33 @@ var MultiSelect = (0, import_react7.forwardRef)(
     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";
@@ -1021,6 +1064,7 @@ var MultiSelect = (0, import_react7.forwardRef)(
       overflow: "hidden",
       textOverflow: "ellipsis"
     };
+    const optionsListMaxHeight = maxHeight - (searchable ? SEARCH_ROW_HEIGHT : 0) - (showSelectAll ? SELECT_ALL_ROW_HEIGHT : 0);
     (0, import_react7.useEffect)(() => {
       if (!isWeb || !controlMenuOpen || isDisable || !dropdownMenu) return;
       let rafId = null;
@@ -1154,12 +1198,41 @@ var MultiSelect = (0, import_react7.forwardRef)(
                 )
               }
             ),
+            showSelectAll && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              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__ */ (0, import_jsx_runtime6.jsx)(
+                  Text,
+                  {
+                    color: theme.colors.content.brand.primary,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "500",
+                    numberOfLines: 1,
+                    children: areAllTargetsSelected ? deselectAllLabel : selectAllLabel
+                  }
+                )
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Box,
               {
                 paddingVertical: 4,
                 style: {
-                  maxHeight: searchable ? maxHeight - 60 : maxHeight,
+                  maxHeight: optionsListMaxHeight,
                   overflowY: "auto",
                   overflowX: optionListOverflowX,
                   scrollbarWidth: "none"
@@ -1182,6 +1255,7 @@ var MultiSelect = (0, import_react7.forwardRef)(
                 ) : menuItems.map((item, _index) => {
                   const brandColors = theme.colors.control.brand.primary;
                   const contentColors = theme.colors.content;
+                  const isInert = item.locked && item.checked;
                   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     Box,
                     {
@@ -1189,7 +1263,7 @@ var MultiSelect = (0, import_react7.forwardRef)(
                       paddingHorizontal: sizeStyles.paddingHorizontal,
                       paddingVertical: 8,
                       onPress: () => {
-                        if (!item.disabled) {
+                        if (!item.disabled && !isInert) {
                           handleItemToggle(item.id, !item.checked);
                         }
                       },
@@ -1201,7 +1275,7 @@ var MultiSelect = (0, import_react7.forwardRef)(
                         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
                       },