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

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

@@ -7863,7 +7863,7 @@
     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, 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 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 isMultiSelect = isNotEmpty(onToggleCheckbox);
     var multiSelectValue = activeValue;
@@ -7927,8 +7927,8 @@
               isNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
                 classes,
                 index: ALL_OPTION_INDEX,
-                isSemiChecked: selectedOptionsCount > 0 && selectedOptionsCount < options.length,
-                isActive: selectedOptionsCount === options.length,
+                isSemiChecked: selectedOptionsCount > 0 && !areAllOptionsSelected,
+                isActive: areAllOptionsSelected,
                 isFocused: focusedIndex === ALL_OPTION_INDEX,
                 onOptionSelect,
                 onToggleCheckbox,
@@ -8022,25 +8022,19 @@
         cursor: "default"
       }
     },
+    counter: {
+      "&:not(:last-child)": {
+        paddingRight: 8
+      }
+    },
+    icon: {
+      width: 16,
+      height: 16
+    },
     tweakInput: {
       input: {
         paddingRight: 32
       },
-      withUnits: {
-        paddingRight: 8
-      },
-      unitsWrapper: {
-        position: "unset",
-        padding: [
-          0,
-          32,
-          0,
-          0
-        ]
-      },
-      fakeValue: {
-        display: "none"
-      },
       disabled: {
         "& $input": {
           cursor: "default"
@@ -8502,7 +8496,7 @@
     }
   };
   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, units = props.units, 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, [
+    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",
@@ -8520,7 +8514,7 @@
       "dropdownIcon",
       "shouldScrollToList",
       "searchInput",
-      "units",
+      "iconType",
       "onChange",
       "onFocus",
       "onBlur",
@@ -8567,6 +8561,16 @@
       searchValue,
       optionsMode
     ]);
+    var availableOptions = React.useMemo(function() {
+      return options.filter(function(o) {
+        return !isOptionDisabled(o);
+      });
+    }, [
+      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) {
@@ -8585,7 +8589,7 @@
       filteredOptions
     ]);
     var stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : void 0;
-    var showedStringValue = isMultiSelect && (value === null || value === void 0 ? void 0 : value.length) === filteredOptions.length && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
+    var showedStringValue = areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
     var convertToId = React.useCallback(function(v) {
       return (convertValueToId !== null && convertValueToId !== void 0 ? convertValueToId : getDefaultConvertToIdFunction(convertValueToString))(v);
     }, [
@@ -8653,7 +8657,7 @@
         return;
       }
       if (index === ALL_OPTION_INDEX && isSelected) {
-        handleOnChange(options);
+        handleOnChange(availableOptions);
         return;
       }
       var option = filteredOptions[index];
@@ -8746,7 +8750,7 @@
           if (isMultiSelect) {
             var isThisValueAlreadySelected;
             if (indexToSelect === ALL_OPTION_INDEX) {
-              isThisValueAlreadySelected = (value === null || value === void 0 ? void 0 : value.length) === options.length;
+              isThisValueAlreadySelected = areAllOptionsSelected;
             } else {
               var valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
               var _value_some;
@@ -8802,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,
@@ -8843,6 +8851,7 @@
         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,
@@ -8865,6 +8874,22 @@
         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,
@@ -8886,7 +8911,7 @@
               isLoading: areOptionsLoading,
               tweakStyles: tweakInputStyles,
               testId,
-              units: isMultiSelect && isNotEmpty(value) && value.length > 1 && value.length !== options.length ? "(+".concat(value.length - 1, ")") : units
+              iconType: isMultiSelect ? multiSelectCounterWithIcon : iconType
             }, inputProps)),
             /* @__PURE__ */ jsx("div", {
               onMouseDown: function(event) {