@true-engineering/true-react-common-ui-kit 1.9.0 → 1.11.0

package/dist/true-react-common-ui-kit.umd.cjs

@@ -1111,11 +1111,11 @@
     if (Array.isArray(arr))
       return arr;
   }
-  function _array_without_holes$6(arr) {
+  function _array_without_holes$7(arr) {
     if (Array.isArray(arr))
       return _array_like_to_array$q(arr);
   }
-  function _iterable_to_array$6(iter) {
+  function _iterable_to_array$7(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
       return Array.from(iter);
   }
@@ -1150,14 +1150,14 @@
   function _non_iterable_rest$o() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function _non_iterable_spread$6() {
+  function _non_iterable_spread$7() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
   function _sliced_to_array$o(arr, i) {
     return _array_with_holes$o(arr) || _iterable_to_array_limit$o(arr, i) || _unsupported_iterable_to_array$q(arr, i) || _non_iterable_rest$o();
   }
-  function _to_consumable_array$6(arr) {
-    return _array_without_holes$6(arr) || _iterable_to_array$6(arr) || _unsupported_iterable_to_array$q(arr) || _non_iterable_spread$6();
+  function _to_consumable_array$7(arr) {
+    return _array_without_holes$7(arr) || _iterable_to_array$7(arr) || _unsupported_iterable_to_array$q(arr) || _non_iterable_spread$7();
   }
   function _unsupported_iterable_to_array$q(o, minLen) {
     if (!o)
@@ -1292,6 +1292,9 @@
   var isNotEmpty = function(val) {
     return typeof val === "string" ? val.trim() !== "" : val !== null && val !== void 0;
   };
+  var isStringNotEmpty = function(value) {
+    return (value !== null && value !== void 0 ? value : "").trim() !== "";
+  };
   var trimStringToMaxLength = function(val, maxLength) {
     return val.length > maxLength ? val.slice(0, maxLength) : val;
   };
@@ -1309,7 +1312,7 @@
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    var testId = getTestId.apply(void 0, _to_consumable_array$6(args));
+    var testId = getTestId.apply(void 0, _to_consumable_array$7(args));
     return isNotEmpty(testId) ? {
       "data-testid": testId
     } : void 0;
@@ -1337,6 +1340,21 @@
       tabIndex: -1
     };
   };
+  var createFilter = function(getter) {
+    return function(items, query) {
+      return items.filter(function(item) {
+        var possibleValues = getter(item).reduce(function(acc, cur) {
+          return _to_consumable_array$7(acc).concat(_to_consumable_array$7(isStringNotEmpty(cur) ? [
+            cur === null || cur === void 0 ? void 0 : cur.toLowerCase()
+          ] : []));
+        }, []);
+        var queryString = query.toLowerCase().trim();
+        return possibleValues.some(function(v) {
+          return v === null || v === void 0 ? void 0 : v.includes(queryString);
+        });
+      });
+    };
+  };
   var minWidthModifier = {
     name: "minWidth",
     enabled: true,
@@ -1360,19 +1378,19 @@
       arr2[i] = arr[i];
     return arr2;
   }
-  function _array_without_holes$5(arr) {
+  function _array_without_holes$6(arr) {
     if (Array.isArray(arr))
       return _array_like_to_array$p(arr);
   }
-  function _iterable_to_array$5(iter) {
+  function _iterable_to_array$6(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
       return Array.from(iter);
   }
-  function _non_iterable_spread$5() {
+  function _non_iterable_spread$6() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function _to_consumable_array$5(arr) {
-    return _array_without_holes$5(arr) || _iterable_to_array$5(arr) || _unsupported_iterable_to_array$p(arr) || _non_iterable_spread$5();
+  function _to_consumable_array$6(arr) {
+    return _array_without_holes$6(arr) || _iterable_to_array$6(arr) || _unsupported_iterable_to_array$p(arr) || _non_iterable_spread$6();
   }
   function _unsupported_iterable_to_array$p(o, minLen) {
     if (!o)
@@ -1412,7 +1430,7 @@
     var possibleValues = [
       country.countryRu,
       country.countryEn
-    ].concat(_to_consumable_array$5(country.countryRu.split(" ")), _to_consumable_array$5(country.countryEn.split(" ")), [
+    ].concat(_to_consumable_array$6(country.countryRu.split(" ")), _to_consumable_array$6(country.countryEn.split(" ")), [
       country.dialCode
     ]).map(function(part) {
       return part.toLowerCase();
@@ -3892,11 +3910,11 @@
       arr2[i] = arr[i];
     return arr2;
   }
-  function _array_without_holes$4(arr) {
+  function _array_without_holes$5(arr) {
     if (Array.isArray(arr))
       return _array_like_to_array$o(arr);
   }
-  function _define_property$O(obj, key, value) {
+  function _define_property$P(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -3909,11 +3927,11 @@
     }
     return obj;
   }
-  function _iterable_to_array$4(iter) {
+  function _iterable_to_array$5(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
       return Array.from(iter);
   }
-  function _non_iterable_spread$4() {
+  function _non_iterable_spread$5() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
   function _object_spread$N(target) {
@@ -3926,13 +3944,13 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$O(target, key, source[key]);
+        _define_property$P(target, key, source[key]);
       });
     }
     return target;
   }
-  function _to_consumable_array$4(arr) {
-    return _array_without_holes$4(arr) || _iterable_to_array$4(arr) || _unsupported_iterable_to_array$o(arr) || _non_iterable_spread$4();
+  function _to_consumable_array$5(arr) {
+    return _array_without_holes$5(arr) || _iterable_to_array$5(arr) || _unsupported_iterable_to_array$o(arr) || _non_iterable_spread$5();
   }
   function _unsupported_iterable_to_array$o(o, minLen) {
     if (!o)
@@ -3968,7 +3986,7 @@
       popperData = usePopper(referenceElement, dropdownElement, {
         enabled: isOpen,
         placement,
-        modifiers: _to_consumable_array$4(shouldRenderInBody ? [
+        modifiers: _to_consumable_array$5(shouldRenderInBody ? [
           minWidthModifier
         ] : []).concat([
           {
@@ -3991,7 +4009,7 @@
               ]
             }, flipOptions)
           }
-        ], _to_consumable_array$4(modifiers))
+        ], _to_consumable_array$5(modifiers))
       });
     }
     React.useEffect(function() {
@@ -4851,7 +4869,7 @@
       ]
     }
   });
-  function _define_property$N(obj, key, value) {
+  function _define_property$O(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -4874,7 +4892,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$N(target, key, source[key]);
+        _define_property$O(target, key, source[key]);
       });
     }
     return target;
@@ -5001,7 +5019,7 @@
   var complexIcons = {
     avatar: avatarGreen
   };
-  function _define_property$M(obj, key, value) {
+  function _define_property$N(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -5024,7 +5042,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$M(target, key, source[key]);
+        _define_property$N(target, key, source[key]);
       });
     }
     return target;
@@ -5048,7 +5066,7 @@
       alignItems: "center"
     }
   };
-  function _define_property$L(obj, key, value) {
+  function _define_property$M(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -5071,7 +5089,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$L(target, key, source[key]);
+        _define_property$M(target, key, source[key]);
       });
     }
     return target;
@@ -5162,7 +5180,7 @@
     },
     content: {}
   };
-  function _define_property$K(obj, key, value) {
+  function _define_property$L(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -5185,7 +5203,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$K(target, key, source[key]);
+        _define_property$L(target, key, source[key]);
       });
     }
     return target;
@@ -5233,7 +5251,7 @@
               className: classes.spacer
             }),
             /* @__PURE__ */ jsxs("div", _object_spread_props$A(_object_spread$J({
-              className: clsx(classes.item, (_obj = {}, _define_property$K(_obj, classes.disabledItem, item.disabled), _define_property$K(_obj, classes.withIconGap, item.withIconGap), _obj))
+              className: clsx(classes.item, (_obj = {}, _define_property$L(_obj, classes.disabledItem, item.disabled), _define_property$L(_obj, classes.withIconGap, item.withIconGap), _obj))
             }, addDataTestId((_item_testId = item.testId) !== null && _item_testId !== void 0 ? _item_testId : getTestId(testId, "item-".concat(idx))), item.disabled && addDataAttributes({
               disabled: item.disabled
             })), {
@@ -5261,7 +5279,7 @@
       })
     }));
   };
-  function _define_property$J(obj, key, value) {
+  function _define_property$K(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -5284,7 +5302,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$J(target, key, source[key]);
+        _define_property$K(target, key, source[key]);
       });
     }
     return target;
@@ -5368,7 +5386,7 @@
     if (Array.isArray(arr))
       return arr;
   }
-  function _define_property$I(obj, key, value) {
+  function _define_property$J(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -5422,7 +5440,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$I(target, key, source[key]);
+        _define_property$J(target, key, source[key]);
       });
     }
     return target;
@@ -5563,7 +5581,7 @@
       width: "100%"
     }
   };
-  function _define_property$H(obj, key, value) {
+  function _define_property$I(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -5586,7 +5604,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$H(target, key, source[key]);
+        _define_property$I(target, key, source[key]);
       });
     }
     return target;
@@ -5780,7 +5798,7 @@
     },
     tweakPreloaderComponent: {}
   };
-  function _define_property$G(obj, key, value) {
+  function _define_property$H(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -5803,7 +5821,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$G(target, key, source[key]);
+        _define_property$H(target, key, source[key]);
       });
     }
     return target;
@@ -5837,7 +5855,7 @@
     var _useTheme = useTheme("ThemedPreloader", styles$E, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
     var preloaderComponentStyles = useTweakStyles(componentStyles, tweakStyles, "tweakPreloaderComponent");
     return /* @__PURE__ */ jsx("div", _object_spread_props$w(_object_spread$F({
-      className: clsx(classes.root, classes[type], _define_property$G({}, classes.currentColor, useCurrentColor))
+      className: clsx(classes.root, classes[type], _define_property$H({}, classes.currentColor, useCurrentColor))
     }, addDataAttributes(data)), {
       children: type === "dots" ? /* @__PURE__ */ jsx(DotsPreloader, {
         tweakStyles: preloaderComponentStyles
@@ -6017,7 +6035,7 @@
       }
     }
   };
-  function _define_property$F(obj, key, value) {
+  function _define_property$G(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -6040,7 +6058,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$F(target, key, source[key]);
+        _define_property$G(target, key, source[key]);
       });
     }
     return target;
@@ -6093,7 +6111,7 @@
     var _obj, _obj1;
     return /* @__PURE__ */ jsxs("button", _object_spread_props$v(_object_spread$E({
       type,
-      className: clsx(classes.root, classes[size], classes[view], (_obj = {}, _define_property$F(_obj, classes.disabled, isDisabled), _define_property$F(_obj, classes.fullWidth, isFullWidth), _define_property$F(_obj, classes.inline, isInline), _define_property$F(_obj, classes.active, isActive), _define_property$F(_obj, classes.loading, isLoading), _define_property$F(_obj, classes.onlyIcon, hasIcon && !hasChildren), _obj)),
+      className: clsx(classes.root, classes[size], classes[view], (_obj = {}, _define_property$G(_obj, classes.disabled, isDisabled), _define_property$G(_obj, classes.fullWidth, isFullWidth), _define_property$G(_obj, classes.inline, isInline), _define_property$G(_obj, classes.active, isActive), _define_property$G(_obj, classes.loading, isLoading), _define_property$G(_obj, classes.onlyIcon, hasIcon && !hasChildren), _obj)),
       tabIndex: shouldSkipTabNavigation ? -1 : void 0,
       disabled: hasNoAction,
       onClick: !hasNoAction ? onClick : void 0,
@@ -6101,7 +6119,7 @@
     }, addDataTestId(testId), addDataAttributes(data)), {
       children: [
         /* @__PURE__ */ jsxs("span", {
-          className: clsx(classes.content, (_obj1 = {}, _define_property$F(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$F(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
+          className: clsx(classes.content, (_obj1 = {}, _define_property$G(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$G(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
           children: [
             hasIcon && /* @__PURE__ */ jsx("span", {
               className: classes.icon,
@@ -6193,7 +6211,7 @@
     if (Array.isArray(arr))
       return arr;
   }
-  function _define_property$E(obj, key, value) {
+  function _define_property$F(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -6247,7 +6265,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$E(target, key, source[key]);
+        _define_property$F(target, key, source[key]);
       });
     }
     return target;
@@ -6316,7 +6334,7 @@
     ]);
     var _obj;
     return /* @__PURE__ */ jsxs("label", _object_spread_props$u(_object_spread$D({
-      className: clsx(classes.root, (_obj = {}, _define_property$E(_obj, classes.disabled, isDisabled), _define_property$E(_obj, classes.labelPositionLeft, labelPosition === "left"), _obj))
+      className: clsx(classes.root, (_obj = {}, _define_property$F(_obj, classes.disabled, isDisabled), _define_property$F(_obj, classes.labelPositionLeft, labelPosition === "left"), _obj))
     }, addDataTestId(testId), addDataAttributes(data)), {
       children: [
         /* @__PURE__ */ jsx("input", _object_spread$D({
@@ -6367,7 +6385,7 @@
       }
     }
   };
-  function _define_property$D(obj, key, value) {
+  function _define_property$E(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -6390,7 +6408,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$D(target, key, source[key]);
+        _define_property$E(target, key, source[key]);
       });
     }
     return target;
@@ -6565,7 +6583,7 @@
     },
     root: {}
   };
-  function _define_property$C(obj, key, value) {
+  function _define_property$D(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -6588,7 +6606,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$C(target, key, source[key]);
+        _define_property$D(target, key, source[key]);
       });
     }
     return target;
@@ -6873,6 +6891,7 @@
       paddingLeft: 13
     },
     loading: {},
+    withUnits: {},
     tweakPreloader: {}
   };
   var renderIcon = function(icon) {
@@ -6920,7 +6939,7 @@
       });
     };
   }
-  function _define_property$B(obj, key, value) {
+  function _define_property$C(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -6974,7 +6993,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$B(target, key, source[key]);
+        _define_property$C(target, key, source[key]);
       });
     }
     return target;
@@ -7169,9 +7188,10 @@
     var hasUnits = units !== void 0 && units !== "";
     var hasLabel = isNotEmpty(label);
     var hasPlaceholder = (!hasLabel || hasFocus && !isReadonly) && isNotEmpty(placeholder);
+    var shouldShowUnits = (hasValue || isFocused && !hasPlaceholder) && hasUnits;
     var _obj;
     var props = _object_spread$A({
-      className: clsx(classes.input, (_obj = {}, _define_property$B(_obj, classes.withFloatingLabel, hasFloatingLabel && hasLabel), _define_property$B(_obj, classes.withIcons, hasControls), _define_property$B(_obj, classes.withControls, hasControls), _define_property$B(_obj, classes.floatingLabelWithoutPadding, hasFloatingLabel && hasLabel && border === "bottom"), _obj)),
+      className: clsx(classes.input, (_obj = {}, _define_property$C(_obj, classes.withFloatingLabel, hasFloatingLabel && hasLabel), _define_property$C(_obj, classes.withIcons, hasControls), _define_property$C(_obj, classes.withControls, hasControls), _define_property$C(_obj, classes.withUnits, shouldShowUnits), _define_property$C(_obj, classes.floatingLabelWithoutPadding, hasFloatingLabel && hasLabel && border === "bottom"), _obj)),
       onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange,
@@ -7194,7 +7214,7 @@
       className: classes.root,
       children: [
         /* @__PURE__ */ jsxs("div", _object_spread_props$s(_object_spread$A({
-          className: clsx(classes.inputWrapper, (_obj1 = {}, _define_property$B(_obj1, classes.required, isRequired && !hasRequiredLabel), _define_property$B(_obj1, classes.invalid, isInvalid), _define_property$B(_obj1, classes.focused, hasFocus), _define_property$B(_obj1, classes.disabled, isDisabled), _define_property$B(_obj1, classes.autosize, isAutoSizeable), _obj1), inlineStyle !== void 0 && classes[inlineStyle], border !== void 0 && classes["border-".concat(border)]),
+          className: clsx(classes.inputWrapper, (_obj1 = {}, _define_property$C(_obj1, classes.required, isRequired && !hasRequiredLabel), _define_property$C(_obj1, classes.invalid, isInvalid), _define_property$C(_obj1, classes.focused, hasFocus), _define_property$C(_obj1, classes.disabled, isDisabled), _define_property$C(_obj1, classes.autosize, isAutoSizeable), _obj1), inlineStyle !== void 0 && classes[inlineStyle], border !== void 0 && classes["border-".concat(border)]),
           "data-value": isAutoSizeable ? value : void 0
         }, addDataAttributes(data)), {
           children: [
@@ -7208,12 +7228,12 @@
               beforeMaskedStateChange
             }, props)),
             hasLabel && /* @__PURE__ */ jsx("span", {
-              className: clsx(classes.label, (_obj2 = {}, _define_property$B(_obj2, classes.invalidLabel, isInvalid), _define_property$B(_obj2, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$B(_obj2, classes.activeLabel, hasFocus && !isReadonly || hasValue), _define_property$B(_obj2, classes.floating, hasFloatingLabel), // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
-              _define_property$B(_obj2, classes.floatingWithoutPadding, hasFloatingLabel && border === "bottom"), _obj2)),
+              className: clsx(classes.label, (_obj2 = {}, _define_property$C(_obj2, classes.invalidLabel, isInvalid), _define_property$C(_obj2, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$C(_obj2, classes.activeLabel, hasFocus && !isReadonly || hasValue), _define_property$C(_obj2, classes.floating, hasFloatingLabel), // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
+              _define_property$C(_obj2, classes.floatingWithoutPadding, hasFloatingLabel && border === "bottom"), _obj2)),
               children: label
             }),
-            (hasValue || isFocused && !hasPlaceholder) && hasUnits && /* @__PURE__ */ jsxs("div", {
-              className: clsx(classes.unitsWrapper, _define_property$B({}, classes.withFloatingLabel, hasFloatingLabel && hasLabel)),
+            shouldShowUnits && /* @__PURE__ */ jsxs("div", {
+              className: clsx(classes.unitsWrapper, _define_property$C({}, classes.withFloatingLabel, hasFloatingLabel && hasLabel)),
               children: [
                 /* @__PURE__ */ jsx("span", {
                   className: classes.fakeValue,
@@ -7245,7 +7265,7 @@
                   })
                 }),
                 iconType !== void 0 && /* @__PURE__ */ jsx("div", {
-                  className: clsx(classes.inputIcon, _define_property$B({}, classes.activeIcon, !isDisabled && onIconClick !== void 0)),
+                  className: clsx(classes.inputIcon, _define_property$C({}, classes.activeIcon, !isDisabled && onIconClick !== void 0)),
                   onClick: !isDisabled ? onIconClick : void 0,
                   children: renderIcon(iconType)
                 })
@@ -7273,7 +7293,7 @@
     },
     tweakInput: {}
   };
-  function _define_property$A(obj, key, value) {
+  function _define_property$B(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7296,7 +7316,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$A(target, key, source[key]);
+        _define_property$B(target, key, source[key]);
       });
     }
     return target;
@@ -7450,7 +7470,7 @@
       _defineProperties(Constructor, staticProps);
     return Constructor;
   }
-  function _define_property$z(obj, key, value) {
+  function _define_property$A(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7493,7 +7513,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$z(target, key, source[key]);
+        _define_property$A(target, key, source[key]);
       });
     }
     return target;
@@ -7591,8 +7611,8 @@
       _class_call_check(this, ScrollIntoViewIfNeeded2);
       var _this;
       _this = _super.apply(this, arguments);
-      _define_property$z(_assert_this_initialized(_this), "node", React.createRef());
-      _define_property$z(_assert_this_initialized(_this), "handleScrollIntoViewIfNeeded", function() {
+      _define_property$A(_assert_this_initialized(_this), "node", React.createRef());
+      _define_property$A(_assert_this_initialized(_this), "handleScrollIntoViewIfNeeded", function() {
         var options = _this.props.options;
         var _this_node = _this.node, node = _this_node.current;
         if (node) {
@@ -7642,8 +7662,8 @@
     ]);
     return ScrollIntoViewIfNeeded2;
   }(React.PureComponent);
-  _define_property$z(ScrollIntoViewIfNeeded, "defaultProps", ScrollIntoViewIfNeededDefaultProps);
-  function _define_property$y(obj, key, value) {
+  _define_property$A(ScrollIntoViewIfNeeded, "defaultProps", ScrollIntoViewIfNeededDefaultProps);
+  function _define_property$z(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7666,7 +7686,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$y(target, key, source[key]);
+        _define_property$z(target, key, source[key]);
       });
     }
     return target;
@@ -7717,6 +7737,9 @@
       boxSizing: "border-box",
       fontSize: 14
     },
+    cellWithCheckbox: {
+      padding: 0
+    },
     noMatchesLabel: {
       pointerEvents: "none"
     },
@@ -7731,7 +7754,17 @@
     },
     defaultCell: {}
   };
-  function _define_property$x(obj, key, value) {
+  var checkboxStyles = {
+    root: {
+      padding: CELL_PADDING,
+      width: "100%"
+    },
+    input: {
+      // иначе будет фокуситься и энтер будет вызывать изменение нескольких опций
+      display: "none"
+    }
+  };
+  function _define_property$y(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7754,7 +7787,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$x(target, key, source[key]);
+        _define_property$y(target, key, source[key]);
       });
     }
     return target;
@@ -7783,15 +7816,67 @@
     }
     return target;
   }
-  var DEFAULT_OPTION_INDEX = -1;
+  var SelectListItem = function(param) {
+    var classes = param.classes, index = param.index, isSemiChecked = param.isSemiChecked, isDisabled = param.isDisabled, isActive = param.isActive, children = param.children, isFocused = param.isFocused, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox;
+    var isMultiSelect = isNotEmpty(onToggleCheckbox);
+    var _obj;
+    return /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, _object_spread_props$q(_object_spread$w({
+      active: isFocused,
+      options: {
+        block: "nearest"
+      },
+      className: clsx(classes.cell, (_obj = {}, _define_property$y(_obj, classes.cellWithCheckbox, isMultiSelect), _define_property$y(_obj, classes.focused, isFocused), _define_property$y(_obj, classes.active, isActive && !isMultiSelect), _define_property$y(_obj, classes.disabled, isDisabled), _obj))
+    }, addDataAttributes({
+      disabled: isDisabled,
+      active: isActive,
+      focused: isFocused
+    })), {
+      onClick: !isDisabled && !isMultiSelect ? function(event) {
+        return onOptionSelect(index, event);
+      } : void 0,
+      children: isMultiSelect ? /* @__PURE__ */ jsx(Checkbox, {
+        value: index,
+        isChecked: isActive || isSemiChecked,
+        isSemiChecked,
+        isDisabled,
+        tweakStyles: checkboxStyles,
+        onSelect: function(v) {
+          return onToggleCheckbox(index, v.isSelected);
+        },
+        children
+      }) : children
+    }));
+  };
+  var DEFAULT_OPTION_INDEX = -2;
+  var ALL_OPTION_INDEX = -1;
+  function _define_property$x(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
   function SelectList(param) {
-    var options = param.options, focusedIndex = param.focusedIndex, activeValue = param.activeValue, defaultOptionLabel = param.defaultOptionLabel, _param_noMatchesLabel = param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Совпадений не найдено" : _param_noMatchesLabel, isLoading = param.isLoading, _param_loadingLabel = param.loadingLabel, loadingLabel = _param_loadingLabel === void 0 ? "Загрузка..." : _param_loadingLabel, tweakStyles = param.tweakStyles, testId = param.testId, _param_shouldScrollToList = param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, customListHeader = param.customListHeader, isOptionDisabled = param.isOptionDisabled, onOptionClick = param.onOptionClick, convertValueToString = param.convertValueToString, convertValueToReactNode = param.convertValueToReactNode, _param_convertValueToId = param.convertValueToId, convertValueToId = _param_convertValueToId === void 0 ? convertValueToString : _param_convertValueToId;
+    var options = param.options, focusedIndex = param.focusedIndex, activeValue = param.activeValue, defaultOptionLabel = param.defaultOptionLabel, _param_noMatchesLabel = param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Совпадений не найдено" : _param_noMatchesLabel, isLoading = param.isLoading, _param_loadingLabel = param.loadingLabel, loadingLabel = _param_loadingLabel === void 0 ? "Загрузка..." : _param_loadingLabel, tweakStyles = param.tweakStyles, testId = param.testId, _param_shouldScrollToList = param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, areAllOptionsSelected = param.areAllOptionsSelected, customListHeader = param.customListHeader, isOptionDisabled = param.isOptionDisabled, allOptionsLabel = param.allOptionsLabel, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox, convertValueToString = param.convertValueToString, _param_convertValueToReactNode = param.convertValueToReactNode, convertValueToReactNode = _param_convertValueToReactNode === void 0 ? convertValueToString : _param_convertValueToReactNode, convertValueToId = param.convertValueToId;
     var classes = useTheme("SelectList", styles$v, tweakStyles).classes;
-    var activeValueId = isNotEmpty(activeValue) ? convertValueToId(activeValue) : void 0;
-    var isActiveOption = function(item) {
-      return convertValueToId(item) === activeValueId;
-    };
-    var convertFunction = convertValueToReactNode !== null && convertValueToReactNode !== void 0 ? convertValueToReactNode : convertValueToString;
+    var isMultiSelect = isNotEmpty(onToggleCheckbox);
+    var multiSelectValue = activeValue;
+    var _multiSelectValue_length;
+    var selectedOptionsCount = (_multiSelectValue_length = multiSelectValue === null || multiSelectValue === void 0 ? void 0 : multiSelectValue.length) !== null && _multiSelectValue_length !== void 0 ? _multiSelectValue_length : 0;
+    var _multiSelectValue_map;
+    var activeOptionsIdMap = React.useMemo(function() {
+      return isMultiSelect ? (_multiSelectValue_map = multiSelectValue === null || multiSelectValue === void 0 ? void 0 : multiSelectValue.map(convertValueToId)) !== null && _multiSelectValue_map !== void 0 ? _multiSelectValue_map : [] : [];
+    }, [
+      isMultiSelect,
+      multiSelectValue,
+      convertValueToId
+    ]);
     var optionsDisableMap = React.useMemo(function() {
       return options.map(function(o) {
         return isOptionDisabled(o);
@@ -7802,15 +7887,18 @@
     ]);
     var listOptions = React.useMemo(function() {
       return options.map(function(opt, i) {
-        return convertFunction(opt, optionsDisableMap[i]);
+        return convertValueToReactNode(opt, optionsDisableMap[i]);
       });
     }, [
       options,
-      convertFunction,
+      convertValueToReactNode,
       optionsDisableMap
     ]);
+    var isActiveOption = function(item) {
+      return isMultiSelect ? activeOptionsIdMap.includes(convertValueToId(item)) : isNotEmpty(activeValue) && convertValueToId(activeValue) === convertValueToId(item);
+    };
     return /* @__PURE__ */ jsxs(ScrollIntoViewIfNeeded, {
-      active: shouldScrollToList,
+      active: shouldScrollToList && !isMultiSelect,
       className: clsx(classes.root, _define_property$x({}, classes.withListHeader, isNotEmpty(customListHeader))),
       children: [
         isNotEmpty(customListHeader) && /* @__PURE__ */ jsx("div", {
@@ -7825,39 +7913,42 @@
             children: loadingLabel
           }) : /* @__PURE__ */ jsxs(Fragment, {
             children: [
-              defaultOptionLabel !== void 0 && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
+              isNotEmpty(defaultOptionLabel) && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
                 active: focusedIndex === DEFAULT_OPTION_INDEX,
                 options: {
                   block: "nearest"
                 },
                 className: clsx(classes.cell, classes.defaultCell, focusedIndex === DEFAULT_OPTION_INDEX && classes.focused),
                 onClick: function(event) {
-                  return onOptionClick(DEFAULT_OPTION_INDEX, event);
+                  return onOptionSelect(DEFAULT_OPTION_INDEX, event);
                 },
                 children: defaultOptionLabel
               }),
+              isNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
+                classes,
+                index: ALL_OPTION_INDEX,
+                isSemiChecked: selectedOptionsCount > 0 && !areAllOptionsSelected,
+                isActive: areAllOptionsSelected,
+                isFocused: focusedIndex === ALL_OPTION_INDEX,
+                onOptionSelect,
+                onToggleCheckbox,
+                children: allOptionsLabel
+              }),
               listOptions.map(function(opt, i) {
                 var optionValue = options[i];
-                var isFocused = i === focusedIndex;
+                var isFocused = focusedIndex === i;
                 var isActive = isActiveOption(optionValue);
                 var isDisabled = optionsDisableMap[i];
-                var _obj;
-                return /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, _object_spread_props$q(_object_spread$w({
-                  active: isFocused,
-                  options: {
-                    block: "nearest"
-                  },
-                  className: clsx(classes.cell, (_obj = {}, _define_property$x(_obj, classes.focused, isFocused), _define_property$x(_obj, classes.active, isActive), _define_property$x(_obj, classes.disabled, isDisabled), _obj))
-                }, addDataAttributes({
-                  disabled: isDisabled,
-                  active: isActive,
-                  focused: isFocused
-                })), {
-                  onClick: !isDisabled ? function(event) {
-                    return onOptionClick(i, event);
-                  } : void 0,
+                return /* @__PURE__ */ jsx(SelectListItem, {
+                  classes,
+                  index: i,
+                  isDisabled,
+                  isActive,
+                  isFocused,
+                  onOptionSelect,
+                  onToggleCheckbox,
                   children: opt
-                }), i);
+                }, i);
               }),
               listOptions.length === 0 && /* @__PURE__ */ jsx("div", {
                 className: clsx(classes.cell, classes.noMatchesLabel),
@@ -7879,10 +7970,13 @@
   var defaultCompareFunction = function(v1, v2) {
     return v1 === v2;
   };
-  var getActiveValueIndex = function(options, value, convertFunc) {
-    return isNotEmpty(value) ? options.findIndex(function(o) {
-      return convertFunc(o) === convertFunc(value);
-    }) : -1;
+  var getDefaultConvertToIdFunction = function(convertValueToString) {
+    return function(value) {
+      return isNotEmpty(value === null || value === void 0 ? void 0 : value.id) ? String(value.id) : convertValueToString(value);
+    };
+  };
+  var isMultiSelectValue = function(props, _value) {
+    return props.isMultiSelect === true;
   };
   var styles$u = {
     root: {
@@ -7928,6 +8022,15 @@
         cursor: "default"
       }
     },
+    counter: {
+      "&:not(:last-child)": {
+        paddingRight: 8
+      }
+    },
+    icon: {
+      width: 16,
+      height: 16
+    },
     tweakInput: {
       input: {
         paddingRight: 32
@@ -8116,6 +8219,10 @@
     if (Array.isArray(arr))
       return arr;
   }
+  function _array_without_holes$4(arr) {
+    if (Array.isArray(arr))
+      return _array_like_to_array$j(arr);
+  }
   function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
       var info = gen[key](arg);
@@ -8158,6 +8265,10 @@
     }
     return obj;
   }
+  function _iterable_to_array$4(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
+      return Array.from(iter);
+  }
   function _iterable_to_array_limit$j(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null)
@@ -8189,6 +8300,9 @@
   function _non_iterable_rest$j() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
+  function _non_iterable_spread$4() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
   function _object_spread$u(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
@@ -8263,6 +8377,9 @@
   function _sliced_to_array$j(arr, i) {
     return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$j(arr, i) || _non_iterable_rest$j();
   }
+  function _to_consumable_array$4(arr) {
+    return _array_without_holes$4(arr) || _iterable_to_array$4(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$4();
+  }
   function _unsupported_iterable_to_array$j(o, minLen) {
     if (!o)
       return;
@@ -8378,11 +8495,12 @@
       };
     }
   };
-  function Select(_param) {
-    var options = _param.options, value = _param.value, defaultOptionLabel = _param.defaultOptionLabel, _param_debounceTime = _param.debounceTime, debounceTime = _param_debounceTime === void 0 ? 400 : _param_debounceTime, _param_optionsMode = _param.optionsMode, optionsMode = _param_optionsMode === void 0 ? "normal" : _param_optionsMode, noMatchesLabel = _param.noMatchesLabel, loadingLabel = _param.loadingLabel, tweakStyles = _param.tweakStyles, testId = _param.testId, isReadonly = _param.isReadonly, isDisabled = _param.isDisabled, dropdownOptions = _param.dropdownOptions, _param_minSymbolsCountToOpenList = _param.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _param_minSymbolsCountToOpenList === void 0 ? 0 : _param_minSymbolsCountToOpenList, _param_dropdownIcon = _param.dropdownIcon, dropdownIcon = _param_dropdownIcon === void 0 ? "chevron-down" : _param_dropdownIcon, _param_shouldScrollToList = _param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, searchInput = _param.searchInput, onChange = _param.onChange, onFocus = _param.onFocus, onBlur = _param.onBlur, onType = _param.onType, onOpen = _param.onOpen, _param_isOptionDisabled = _param.isOptionDisabled, isOptionDisabled = _param_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _param_isOptionDisabled, _param_compareValuesOnChange = _param.compareValuesOnChange, compareValuesOnChange = _param_compareValuesOnChange === void 0 ? defaultCompareFunction : _param_compareValuesOnChange, _param_convertValueToString = _param.convertValueToString, convertValueToString = _param_convertValueToString === void 0 ? defaultConvertFunction$2 : _param_convertValueToString, convertValueToId = _param.convertValueToId, convertValueToReactNode = _param.convertValueToReactNode, optionsFilter = _param.optionsFilter, inputProps = _object_without_properties$5(_param, [
+  function Select(props) {
+    var options = props.options, value = props.value, defaultOptionLabel = props.defaultOptionLabel, allOptionsLabel = props.allOptionsLabel, _props_debounceTime = props.debounceTime, debounceTime = _props_debounceTime === void 0 ? 400 : _props_debounceTime, _props_optionsMode = props.optionsMode, optionsMode = _props_optionsMode === void 0 ? "normal" : _props_optionsMode, noMatchesLabel = props.noMatchesLabel, loadingLabel = props.loadingLabel, tweakStyles = props.tweakStyles, testId = props.testId, isReadonly = props.isReadonly, isDisabled = props.isDisabled, dropdownOptions = props.dropdownOptions, _props_minSymbolsCountToOpenList = props.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _props_minSymbolsCountToOpenList === void 0 ? 0 : _props_minSymbolsCountToOpenList, _props_dropdownIcon = props.dropdownIcon, dropdownIcon = _props_dropdownIcon === void 0 ? "chevron-down" : _props_dropdownIcon, _props_shouldScrollToList = props.shouldScrollToList, shouldScrollToList = _props_shouldScrollToList === void 0 ? true : _props_shouldScrollToList, searchInput = props.searchInput, iconType = props.iconType, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onType = props.onType, onOpen = props.onOpen, _props_isOptionDisabled = props.isOptionDisabled, isOptionDisabled = _props_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _props_isOptionDisabled, _props_compareValuesOnChange = props.compareValuesOnChange, compareValuesOnChange = _props_compareValuesOnChange === void 0 ? defaultCompareFunction : _props_compareValuesOnChange, _props_convertValueToString = props.convertValueToString, convertValueToString = _props_convertValueToString === void 0 ? defaultConvertFunction$2 : _props_convertValueToString, convertValueToId = props.convertValueToId, convertValueToReactNode = props.convertValueToReactNode, optionsFilter = props.optionsFilter, inputProps = _object_without_properties$5(props, [
       "options",
       "value",
       "defaultOptionLabel",
+      "allOptionsLabel",
       "debounceTime",
       "optionsMode",
       "noMatchesLabel",
@@ -8396,6 +8514,7 @@
       "dropdownIcon",
       "shouldScrollToList",
       "searchInput",
+      "iconType",
       "onChange",
       "onFocus",
       "onBlur",
@@ -8412,8 +8531,8 @@
     var isMounted = useIsMounted();
     var _useState = _sliced_to_array$j(React.useState(false), 2), isListOpen = _useState[0], setIsListOpen = _useState[1];
     var _useState1 = _sliced_to_array$j(React.useState(false), 2), areOptionsLoading = _useState1[0], setAreOptionsLoading = _useState1[1];
-    var hasDefaultOption = defaultOptionLabel !== void 0;
-    var _useState2 = _sliced_to_array$j(React.useState(-1), 2), focusedListCellIndex = _useState2[0], setFocusedListCellIndex = _useState2[1];
+    var hasDefaultOption = isStringNotEmpty(defaultOptionLabel);
+    var _useState2 = _sliced_to_array$j(React.useState(DEFAULT_OPTION_INDEX), 2), focusedListCellIndex = _useState2[0], setFocusedListCellIndex = _useState2[1];
     var _useState3 = _sliced_to_array$j(React.useState(""), 2), searchValue = _useState3[0], setSearchValue = _useState3[1];
     var _useState4 = _sliced_to_array$j(React.useState(true), 2), shouldShowDefaultOption = _useState4[0], setShouldShowDefaultOption = _useState4[1];
     var inputWrapper = React.useRef(null);
@@ -8421,31 +8540,60 @@
     var input = React.useRef(null);
     var shouldRenderSearchInputInList = (searchInput === null || searchInput === void 0 ? void 0 : searchInput.shouldRenderInList) === true;
     var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
-    var stringValue = isNotEmpty(value) ? convertValueToString(value) : void 0;
+    var isMultiSelect = isMultiSelectValue(props);
+    var strValue = isMultiSelect ? value === null || value === void 0 ? void 0 : value[0] : value;
+    var shouldShowAllOption = isMultiSelect && isNotEmpty(allOptionsLabel) && searchValue === "";
     var filteredOptions = React.useMemo(function() {
       if (optionsMode !== "search") {
         return options;
       }
-      if (isNotEmpty(optionsFilter)) {
-        return optionsFilter(options, searchValue);
-      }
-      var lowerCaseValue = searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase();
-      return options.filter(function(option) {
-        var convertedOption = convertValueToString(option);
-        return convertedOption !== void 0 && convertedOption.toLowerCase().includes(lowerCaseValue);
+      var _convertValueToString;
+      var filter = optionsFilter !== null && optionsFilter !== void 0 ? optionsFilter : createFilter(function(option) {
+        return [
+          (_convertValueToString = convertValueToString(option)) !== null && _convertValueToString !== void 0 ? _convertValueToString : ""
+        ];
       });
+      return filter(options, searchValue);
     }, [
-      optionsMode,
       optionsFilter,
       options,
       convertValueToString,
-      searchValue
+      searchValue,
+      optionsMode
     ]);
-    React.useEffect(function() {
-      setFocusedListCellIndex(getActiveValueIndex(filteredOptions, value, convertValueToString));
+    var availableOptions = React.useMemo(function() {
+      return options.filter(function(o) {
+        return !isOptionDisabled(o);
+      });
     }, [
-      filteredOptions,
-      value,
+      options,
+      isOptionDisabled
+    ]);
+    var areAllOptionsSelected = isMultiSelect && (value === null || value === void 0 ? void 0 : value.length) === availableOptions.length;
+    var shouldShowMultiSelectCounter = isMultiSelect && isNotEmpty(value) && value.length > 1 && !areAllOptionsSelected;
+    var optionsIndexesForNavigation = React.useMemo(function() {
+      var result = [];
+      if (shouldShowDefaultOption && hasDefaultOption) {
+        result.push(DEFAULT_OPTION_INDEX);
+      }
+      if (shouldShowAllOption) {
+        result.push(ALL_OPTION_INDEX);
+      }
+      return result.concat(filteredOptions.reduce(function(acc, cur, i) {
+        if (!isOptionDisabled(cur)) {
+          acc.push(i);
+        }
+        return acc;
+      }, []));
+    }, [
+      filteredOptions
+    ]);
+    var stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : void 0;
+    var showedStringValue = areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
+    var convertToId = React.useCallback(function(v) {
+      return (convertValueToId !== null && convertValueToId !== void 0 ? convertValueToId : getDefaultConvertToIdFunction(convertValueToString))(v);
+    }, [
+      convertValueToId,
       convertValueToString
     ]);
     var handleListClose = React.useCallback(function(event) {
@@ -8482,11 +8630,9 @@
       }
     };
     var handleOnChange = React.useCallback(function(newValue) {
-      var areValuesEqual = compareValuesOnChange(value, newValue);
-      if (areValuesEqual) {
-        return;
+      if (!compareValuesOnChange(value, newValue)) {
+        onChange(newValue);
       }
-      onChange(newValue);
     }, [
       value,
       compareValuesOnChange,
@@ -8494,7 +8640,7 @@
     ]);
     var handleOptionSelect = React.useCallback(function(index, event) {
       var _input_current;
-      handleOnChange(index === -1 ? void 0 : filteredOptions[index]);
+      handleOnChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index]);
       handleListClose(event);
       (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
     }, [
@@ -8502,6 +8648,36 @@
       handleListClose,
       filteredOptions
     ]);
+    var handleToggleOptionCheckbox = React.useCallback(function(index, isSelected) {
+      if (!isMultiSelect) {
+        return;
+      }
+      if (index === DEFAULT_OPTION_INDEX || index === ALL_OPTION_INDEX && !isSelected) {
+        handleOnChange(void 0);
+        return;
+      }
+      if (index === ALL_OPTION_INDEX && isSelected) {
+        handleOnChange(availableOptions);
+        return;
+      }
+      var option = filteredOptions[index];
+      handleOnChange(isSelected ? (
+        // Добавляем
+        _to_consumable_array$4(value !== null && value !== void 0 ? value : []).concat([
+          option
+        ])
+      ) : (
+        // Убираем
+        value === null || value === void 0 ? void 0 : value.filter(function(o) {
+          return convertToId(o) !== convertToId(option);
+        })
+      ));
+    }, [
+      handleOnChange,
+      filteredOptions,
+      isMultiSelect,
+      value
+    ]);
     var handleOnType = React.useCallback(function() {
       var _ref2 = _async_to_generator$4(function(v) {
         return __generator$4(this, function(_state) {
@@ -8561,47 +8737,43 @@
         return;
       }
       event.stopPropagation();
+      var curIndexInNavigation = optionsIndexesForNavigation.findIndex(function(index) {
+        return index === focusedListCellIndex;
+      });
       switch (event.code) {
         case "Enter":
         case "NumpadEnter": {
-          var indexToClick = focusedListCellIndex;
-          if (indexToClick === -1 && filteredOptions.length === 1) {
-            indexToClick = 0;
+          var indexToSelect = focusedListCellIndex;
+          if (indexToSelect === DEFAULT_OPTION_INDEX && filteredOptions.length === 1) {
+            indexToSelect = 0;
+          }
+          if (isMultiSelect) {
+            var isThisValueAlreadySelected;
+            if (indexToSelect === ALL_OPTION_INDEX) {
+              isThisValueAlreadySelected = areAllOptionsSelected;
+            } else {
+              var valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
+              var _value_some;
+              isThisValueAlreadySelected = (_value_some = value === null || value === void 0 ? void 0 : value.some(function(opt) {
+                return convertToId(opt) === valueIdToSelect;
+              })) !== null && _value_some !== void 0 ? _value_some : false;
+            }
+            handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
+          } else {
+            handleOptionSelect(indexToSelect, event);
           }
-          handleOptionSelect(indexToClick, event);
           break;
         }
         case "ArrowDown": {
           event.preventDefault();
-          var newIndex = focusedListCellIndex !== null && focusedListCellIndex !== void 0 ? focusedListCellIndex : -1;
-          for (var i = newIndex; i < newIndex + filteredOptions.length; i++) {
-            var targetIndex = (i + 1) % filteredOptions.length;
-            if (shouldShowDefaultOption && hasDefaultOption && newIndex > -1 && targetIndex === 0) {
-              newIndex = -1;
-              break;
-            }
-            if (!isOptionDisabled(filteredOptions[targetIndex])) {
-              newIndex = targetIndex;
-              break;
-            }
-          }
-          setFocusedListCellIndex(newIndex);
+          var targetIndexInNavigation = (curIndexInNavigation + 1) % optionsIndexesForNavigation.length;
+          setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation]);
           break;
         }
         case "ArrowUp": {
           event.preventDefault();
-          var newIndex1 = (focusedListCellIndex !== null && focusedListCellIndex !== void 0 ? focusedListCellIndex : -1) === -1 ? 0 : focusedListCellIndex;
-          for (var i1 = newIndex1; i1 > newIndex1 - filteredOptions.length; i1--) {
-            var targetIndex1 = (i1 > 0 ? i1 : filteredOptions.length + i1) - 1;
-            if (shouldShowDefaultOption && hasDefaultOption && focusedListCellIndex !== -1 && targetIndex1 === filteredOptions.length - 1) {
-              setFocusedListCellIndex(-1);
-              break;
-            }
-            if (!isOptionDisabled(filteredOptions[targetIndex1])) {
-              setFocusedListCellIndex(targetIndex1);
-              break;
-            }
-          }
+          var targetIndexInNavigation1 = (curIndexInNavigation - 1 + optionsIndexesForNavigation.length) % optionsIndexesForNavigation.length;
+          setFocusedListCellIndex(optionsIndexesForNavigation[targetIndexInNavigation1]);
           break;
         }
       }
@@ -8634,6 +8806,10 @@
         input: {
           cursor: "pointer"
         }
+      }), _object_spread$u({}, isMultiSelect && {
+        inputIcon: {
+          width: "auto"
+        }
       }), tweakStyles === null || tweakStyles === void 0 ? void 0 : tweakStyles.tweakInput);
     }, [
       tweakStyles === null || tweakStyles === void 0 ? void 0 : tweakStyles.tweakInput,
@@ -8653,12 +8829,16 @@
       ]
     });
     React.useEffect(function() {
-      if (isOpen && onOpen !== void 0) {
-        onOpen();
+      var val = isMultiSelect ? value === null || value === void 0 ? void 0 : value[0] : value;
+      var _optionsIndexesForNavigation_find;
+      setFocusedListCellIndex((_optionsIndexesForNavigation_find = optionsIndexesForNavigation.find(function(index) {
+        return filteredOptions[index] === val;
+      })) !== null && _optionsIndexesForNavigation_find !== void 0 ? _optionsIndexesForNavigation_find : optionsIndexesForNavigation[0]);
+      if (isOpen) {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
       }
     }, [
-      isOpen,
-      onOpen
+      isOpen
     ]);
     var _obj;
     var listEl = /* @__PURE__ */ jsx("div", _object_spread_props$o(_object_spread$u({
@@ -8670,6 +8850,8 @@
       children: isOpen && /* @__PURE__ */ jsx(SelectList, {
         options: filteredOptions,
         defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : void 0,
+        allOptionsLabel: shouldShowAllOption ? allOptionsLabel : void 0,
+        areAllOptionsSelected,
         customListHeader: hasSearchInputInList ? /* @__PURE__ */ jsx(SearchInput, _object_spread$u({
           value: searchValue,
           onChange: handleInputChange,
@@ -8687,10 +8869,27 @@
         isOptionDisabled,
         convertValueToString,
         convertValueToReactNode,
-        convertValueToId,
-        onOptionClick: handleOptionSelect
+        convertValueToId: convertToId,
+        onOptionSelect: handleOptionSelect,
+        onToggleCheckbox: isMultiSelect ? handleToggleOptionCheckbox : void 0
       })
     }));
+    var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || isNotEmpty(iconType) ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        shouldShowMultiSelectCounter && /* @__PURE__ */ jsxs("div", {
+          className: classes.counter,
+          children: [
+            "(+",
+            value.length - 1,
+            ")"
+          ]
+        }),
+        isNotEmpty(iconType) && /* @__PURE__ */ jsx("div", {
+          className: classes.icon,
+          children: renderIcon(iconType)
+        })
+      ]
+    }) : void 0;
     return /* @__PURE__ */ jsxs("div", {
       className: classes.root,
       onKeyDown: handleKeyDown,
@@ -8701,7 +8900,7 @@
           ref: inputWrapper,
           children: [
             /* @__PURE__ */ jsx(Input, _object_spread$u({
-              value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : stringValue,
+              value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
               onChange: handleInputChange,
               isActive: isListOpen,
               isReadonly: hasReadonlyInput,
@@ -8711,7 +8910,8 @@
               ref: input,
               isLoading: areOptionsLoading,
               tweakStyles: tweakInputStyles,
-              testId
+              testId,
+              iconType: isMultiSelect ? multiSelectCounterWithIcon : iconType
             }, inputProps)),
             /* @__PURE__ */ jsx("div", {
               onMouseDown: function(event) {
@@ -27889,6 +28089,7 @@
   exports2.checkElementParentsClassNames = checkElementParentsClassNames;
   exports2.checkSearchStringInCountry = checkSearchStringInCountry;
   exports2.commonTheme = commonTheme;
+  exports2.createFilter = createFilter;
   exports2.defaultConvertFunction = defaultConvertFunction$1;
   exports2.findCountryByCode = findCountryByCode;
   exports2.findCountryIndexByCode = findCountryIndexByCode;
@@ -27913,6 +28114,7 @@
   exports2.isInt = isInt;
   exports2.isNotEmpty = isNotEmpty;
   exports2.isSpaceChar = isSpaceChar;
+  exports2.isStringNotEmpty = isStringNotEmpty;
   exports2.minWidthModifier = minWidthModifier;
   exports2.phoneInfo = phoneInfo;
   exports2.removeStringFormat = removeStringFormat;