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

package/dist/components/Select/Select.styles.d.ts

@@ -43,20 +43,19 @@ export declare const styles: {
             cursor: string;
         };
     };
-    tweakInput: {
-        input: {
+    counter: {
+        '&:not(:last-child)': {
             paddingRight: number;
         };
-        withUnits: {
+    };
+    icon: {
+        width: number;
+        height: number;
+    };
+    tweakInput: {
+        input: {
             paddingRight: number;
         };
-        unitsWrapper: {
-            position: string;
-            padding: number[];
-        };
-        fakeValue: {
-            display: string;
-        };
         disabled: {
             '& $input': {
                 cursor: string;

package/dist/components/Select/SelectList/SelectList.d.ts

@@ -12,6 +12,7 @@ export interface ISelectListProps<Value> extends ICommonProps {
     defaultOptionLabel?: string;
     testId?: string;
     allOptionsLabel?: string;
+    areAllOptionsSelected?: boolean;
     shouldScrollToList?: boolean;
     customListHeader?: ReactNode;
     onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
@@ -21,4 +22,4 @@ export interface ISelectListProps<Value> extends ICommonProps {
     convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
     convertValueToId(value: Value): string | undefined;
 }
-export declare function SelectList<Value>({ options, focusedIndex, activeValue, defaultOptionLabel, noMatchesLabel, isLoading, loadingLabel, tweakStyles, testId, shouldScrollToList, customListHeader, isOptionDisabled, allOptionsLabel, onOptionSelect, onToggleCheckbox, convertValueToString, convertValueToReactNode, convertValueToId, }: ISelectListProps<Value>): JSX.Element;
+export declare function SelectList<Value>({ options, focusedIndex, activeValue, defaultOptionLabel, noMatchesLabel, isLoading, loadingLabel, tweakStyles, testId, shouldScrollToList, areAllOptionsSelected, customListHeader, isOptionDisabled, allOptionsLabel, onOptionSelect, onToggleCheckbox, convertValueToString, convertValueToReactNode, convertValueToId, }: ISelectListProps<Value>): JSX.Element;

package/dist/true-react-common-ui-kit.js

@@ -7872,7 +7872,7 @@ function _define_property$x(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, 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;
@@ -7936,8 +7936,8 @@ function SelectList(param) {
             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,
@@ -8031,25 +8031,19 @@ var styles$u = {
       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"
@@ -8511,7 +8505,7 @@ var __generator$4 = globalThis && globalThis.__generator || function(thisArg, bo
   }
 };
 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",
@@ -8529,7 +8523,7 @@ function Select(props) {
     "dropdownIcon",
     "shouldScrollToList",
     "searchInput",
-    "units",
+    "iconType",
     "onChange",
     "onFocus",
     "onBlur",
@@ -8576,6 +8570,16 @@ function Select(props) {
     searchValue,
     optionsMode
   ]);
+  var availableOptions = 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 = useMemo(function() {
     var result = [];
     if (shouldShowDefaultOption && hasDefaultOption) {
@@ -8594,7 +8598,7 @@ function Select(props) {
     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 = useCallback(function(v) {
     return (convertValueToId !== null && convertValueToId !== void 0 ? convertValueToId : getDefaultConvertToIdFunction(convertValueToString))(v);
   }, [
@@ -8662,7 +8666,7 @@ function Select(props) {
       return;
     }
     if (index === ALL_OPTION_INDEX && isSelected) {
-      handleOnChange(options);
+      handleOnChange(availableOptions);
       return;
     }
     var option = filteredOptions[index];
@@ -8755,7 +8759,7 @@ function Select(props) {
         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;
@@ -8811,6 +8815,10 @@ function Select(props) {
       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,
@@ -8852,6 +8860,7 @@ function Select(props) {
       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,
@@ -8874,6 +8883,22 @@ function Select(props) {
       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,
@@ -8895,7 +8920,7 @@ function Select(props) {
             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) {