@true-engineering/true-react-common-ui-kit 3.24.1 → 3.25.1

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

@@ -6656,63 +6656,63 @@
       return trueReactPlatformHelpers.mergeRefs(refs);
     }, refs);
   };
-  const avatarGreen = `  <svg\r
-    width="100%"\r
-    height="100%"\r
-    viewBox="0 0 32 32"\r
-    fill="none"\r
-    xmlns="http://www.w3.org/2000/svg"\r
-  >\r
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
-    <mask\r
-      id="mask0_0_12744"\r
-      style="mask-type: 'alpha';"\r
-      maskUnits="userSpaceOnUse"\r
-      x="0"\r
-      y="0"\r
-      width="32"\r
-      height="32"\r
-    >\r
-      <circle cx="16" cy="16" r="16" fill="white" />\r
-    </mask>\r
-    <g mask="url(#mask0_0_12744)">\r
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
-      <mask\r
-        id="mask1_0_12744"\r
-        style="mask-type: 'alpha';"\r
-        maskUnits="userSpaceOnUse"\r
-        x="3"\r
-        y="16"\r
-        width="26"\r
-        height="26"\r
-      >\r
-        <circle cx="16" cy="29" r="13" fill="white" />\r
-      </mask>\r
-      <g mask="url(#mask1_0_12744)">\r
-        <ellipse\r
-          cx="16"\r
-          cy="17.5"\r
-          rx="6"\r
-          ry="7.5"\r
-          fill="#505F79"\r
-          fill-opacity="0.204983"\r
-        />\r
-      </g>\r
-    </g>\r
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
-    <defs>\r
-      <linearGradient\r
-        id="paint0_linear_0_12744"\r
-        x1="13.347"\r
-        y1="46.279"\r
-        x2="33.5318"\r
-        y2="30.8088"\r
-        gradientUnits="userSpaceOnUse"\r
-      >\r
-        <stop stop-color="#ABD229" />\r
-        <stop offset="1" stop-color="#9CD03F" />\r
-      </linearGradient>\r
-    </defs>\r
+  const avatarGreen = `  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>`;
   const fileExcel = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#21A366"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16081)" style="mix-blend-mode:overlay"/>\r\n  <path d="M8.00342 14.5244L10.0728 11.3062L12.1357 14.5244H14.4019L11.2217 9.73828L14.1162 5.21875H11.939L10.1108 8.2085L8.24463 5.21875H6.04834L8.93018 9.66846L5.75 14.5244H8.00342Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16081" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
   const fileImage = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#FF991F"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16103)" style="mix-blend-mode:overlay"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90113 15C3.09595 15 2.62093 14.097 3.07709 13.4335L6.67606 8.19861C7.07341 7.62064 7.9268 7.62065 8.32414 8.19861L13.0001 15H3.90113Z" fill="white"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53962 15L12.7076 10.2481C13.1034 9.65434 13.9758 9.65434 14.3717 10.2481L16.5031 13.4453C16.9462 14.1099 16.4698 15 15.6711 15H9.53962Z" fill="white"/>\r\n  <path d="M16.0001 5.5C16.0001 6.32843 15.3285 7 14.5001 7C13.6717 7 13.0001 6.32843 13.0001 5.5C13.0001 4.67157 13.6717 4 14.5001 4C15.3285 4 16.0001 4.67157 16.0001 5.5Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16103" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
@@ -10607,15 +10607,11 @@
     withListHeader: {
       paddingTop: 0
     },
-    listHeader: {
-      "& + $list": {
-        borderTop: [
-          1,
-          "solid",
-          colors.BORDER_LIGHT
-        ]
-      }
+    withListFooter: {
+      paddingBottom: 0
     },
+    listHeader: {},
+    listFooter: {},
     list: _object_spread$K({
       height: "100%",
       maxHeight: ROW_HEIGHT$1 * 6,
@@ -10712,8 +10708,18 @@
     return target;
   }
   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 = trueReactPlatformHelpers.isNotEmpty(onToggleCheckbox);
+    var classes = param.classes, index = param.index, isSemiChecked = param.isSemiChecked, isDisabled = param.isDisabled, isActive = param.isActive, children = param.children, isFocused = param.isFocused, isMultiSelect = param.isMultiSelect, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox;
+    var multiSelectContent = isMultiSelect && /* @__PURE__ */ jsx(Checkbox, {
+      isChecked: isActive || isSemiChecked,
+      isSemiChecked,
+      isDisabled,
+      tweakStyles: checkboxStyles$1,
+      onSelect: function(param2, event) {
+        var isSelected = param2.isSelected;
+        return onToggleCheckbox(index, isSelected, event);
+      },
+      children
+    });
     var _obj2;
     return /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, _object_spread_props$E(_object_spread$J({
       active: isFocused,
@@ -10729,17 +10735,7 @@
       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$1,
-        onSelect: function(v, event) {
-          return onToggleCheckbox(index, v.isSelected, event);
-        },
-        children
-      }) : children
+      children: isMultiSelect ? multiSelectContent : children
     }));
   };
   function _define_property$K(obj, key, value) {
@@ -10795,47 +10791,39 @@
     return target;
   }
   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, 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 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, customListFooter = param.customListFooter, isMultiSelect = param.isMultiSelect, 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 = useStyles$F({
       theme: tweakStyles
     });
-    var isMultiSelect = trueReactPlatformHelpers.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 activeOptionsIdMap = React.useMemo(function() {
-      var _multiSelectValue_map;
-      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 isHeaderNotEmpty = trueReactPlatformHelpers.isReactNodeNotEmpty(customListHeader);
+    var isFooterNotEmpty = trueReactPlatformHelpers.isReactNodeNotEmpty(customListFooter);
     var optionsDisableMap = React.useMemo(function() {
-      return options.map(function(o) {
-        return isOptionDisabled(o);
-      });
+      return options.map(isOptionDisabled);
     }, [
       options,
       isOptionDisabled
     ]);
     var listOptions = React.useMemo(function() {
-      return options.map(function(opt, i) {
-        return convertValueToReactNode(opt, optionsDisableMap[i]);
+      return options.map(function(option, index) {
+        return convertValueToReactNode(option, optionsDisableMap[index]);
       });
     }, [
       options,
       convertValueToReactNode,
       optionsDisableMap
     ]);
-    var isActiveOption = function(item) {
-      return isMultiSelect ? activeOptionsIdMap.includes(convertValueToId(item)) : trueReactPlatformHelpers.isNotEmpty(activeValue) && convertValueToId(activeValue) === convertValueToId(item);
-    };
+    var activeOptionsIds = React.useMemo(function() {
+      return new Set(trueReactPlatformHelpers.getArray(activeValue).map(convertValueToId));
+    }, [
+      activeValue,
+      convertValueToId
+    ]);
+    var _obj2;
     return /* @__PURE__ */ jsxs(ScrollIntoViewIfNeeded, {
       active: shouldScrollToList && !isMultiSelect,
-      className: clsx(classes.root, _define_property$K({}, classes.withListHeader, trueReactPlatformHelpers.isReactNodeNotEmpty(customListHeader))),
+      className: clsx(classes.root, (_obj2 = {}, _define_property$K(_obj2, classes.withListHeader, isHeaderNotEmpty), _define_property$K(_obj2, classes.withListFooter, isFooterNotEmpty), _obj2)),
       children: [
-        trueReactPlatformHelpers.isReactNodeNotEmpty(customListHeader) && /* @__PURE__ */ jsx("div", {
+        isHeaderNotEmpty && /* @__PURE__ */ jsx("div", {
           className: classes.listHeader,
           children: customListHeader
         }),
@@ -10861,9 +10849,10 @@
               trueReactPlatformHelpers.isReactNodeNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
                 classes,
                 index: ALL_OPTION_INDEX,
-                isSemiChecked: selectedOptionsCount > 0 && !areAllOptionsSelected,
+                isSemiChecked: activeOptionsIds.size > 0 && !areAllOptionsSelected,
                 isActive: areAllOptionsSelected,
                 isFocused: focusedIndex === ALL_OPTION_INDEX,
+                isMultiSelect,
                 onOptionSelect,
                 onToggleCheckbox,
                 children: allOptionsLabel
@@ -10871,7 +10860,7 @@
               listOptions.map(function(opt, i) {
                 var optionValue = options[i];
                 var isFocused = focusedIndex === i;
-                var isActive = isActiveOption(optionValue);
+                var isActive = activeOptionsIds.has(convertValueToId(optionValue));
                 var isDisabled = optionsDisableMap[i];
                 return /* @__PURE__ */ jsx(SelectListItem, {
                   classes,
@@ -10879,6 +10868,7 @@
                   isDisabled,
                   isActive,
                   isFocused,
+                  isMultiSelect,
                   onOptionSelect,
                   onToggleCheckbox,
                   children: opt
@@ -10890,7 +10880,11 @@
               })
             ]
           })
-        }))
+        })),
+        isFooterNotEmpty && /* @__PURE__ */ jsx("div", {
+          className: classes.listFooter,
+          children: customListFooter
+        })
       ]
     });
   }
@@ -10909,9 +10903,6 @@
       return trueReactPlatformHelpers.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 useStyles$E = createThemedStyles("Select", {
     root: {
       width: "100%",
@@ -10931,7 +10922,7 @@
     },
     withoutPopper: {
       position: "absolute",
-      top: "calc(100% + 6px)"
+      top: "calc(var(--dropdown-offset, 100%) + 6px)"
     },
     listWrapperInBody: {
       minWidth: "auto",
@@ -10946,7 +10937,8 @@
       height: 20,
       cursor: "pointer",
       zIndex: 1,
-      transition: "transform 0.1s ease"
+      transition: animations.defaultTransition,
+      transitionProperty: "transform"
     },
     activeArrow: {
       transform: "rotate(180deg)"
@@ -11305,9 +11297,13 @@
     }
   }
   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$b(props, [
+    var _input_current;
+    var options = props.options, isMultiSelect = props.isMultiSelect, value = props.value, header = props.header, footer = props.footer, 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$b(props, [
       "options",
+      "isMultiSelect",
       "value",
+      "header",
+      "footer",
       "defaultOptionLabel",
       "allOptionsLabel",
       "debounceTime",
@@ -11343,7 +11339,6 @@
       "shouldRenderInList"
     ]);
     var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
-    var isMultiSelect = isMultiSelectValue(props);
     var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
     var tweakInputStyles = useTweakStyles({
       innerStyles: getInputStyles({
@@ -11372,6 +11367,7 @@
     var _useState2 = _sliced_to_array$k(React.useState(DEFAULT_OPTION_INDEX), 2), focusedListCellIndex = _useState2[0], setFocusedListCellIndex = _useState2[1];
     var _useState3 = _sliced_to_array$k(React.useState(""), 2), searchValue = _useState3[0], setSearchValue = _useState3[1];
     var _useState4 = _sliced_to_array$k(React.useState(true), 2), shouldShowDefaultOption = _useState4[0], setShouldShowDefaultOption = _useState4[1];
+    var root2 = React.useRef(null);
     var inputWrapper = React.useRef(null);
     var list = React.useRef(null);
     var input = React.useRef(null);
@@ -11396,8 +11392,8 @@
       optionsMode
     ]);
     var availableOptions = React.useMemo(function() {
-      return options.filter(function(o) {
-        return !isOptionDisabled(o);
+      return options.filter(function(option) {
+        return !isOptionDisabled(option);
       });
     }, [
       options,
@@ -11434,17 +11430,39 @@
       convertValueToId,
       convertValueToString
     ]);
-    var handleListClose = React.useCallback(function(event) {
+    var getDropdownOffset = function() {
+      var _input_current_parentElement2;
+      if (trueReactPlatformHelpers.isEmpty(input.current) || inputProps.errorPosition === "top") {
+        return 0;
+      }
+      var _input_current_parentElement_offsetHeight;
+      return (_input_current_parentElement_offsetHeight = (_input_current_parentElement2 = input.current.parentElement) === null || _input_current_parentElement2 === void 0 ? void 0 : _input_current_parentElement2.offsetHeight) !== null && _input_current_parentElement_offsetHeight !== void 0 ? _input_current_parentElement_offsetHeight : 0;
+    };
+    var closeList = React.useCallback(function() {
       setIsListOpen(false);
       setSearchValue("");
       setShouldShowDefaultOption(true);
+      if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
+        var _root_current;
+        (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.removeProperty("--dropdown-offset");
+      }
+    }, [
+      dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper
+    ]);
+    var handleListClose = React.useCallback(function(event) {
+      closeList();
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }, [
+      closeList,
       onBlur
     ]);
     var handleListOpen = function() {
       if (!isListOpen) {
         setIsListOpen(true);
+        if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
+          var _root_current;
+          (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.setProperty("--dropdown-offset", "".concat(getDropdownOffset(), "px"));
+        }
       }
     };
     var handleFocus = function(event) {
@@ -11467,7 +11485,7 @@
         handleListClose(event);
       }
     };
-    var handleOnChange = React.useCallback(function(newValue, event) {
+    var handleChange = React.useCallback(function(newValue, event) {
       if (!compareValuesOnChange(value, newValue)) {
         onChange(newValue, event);
       }
@@ -11477,12 +11495,12 @@
       onChange
     ]);
     var handleOptionSelect = React.useCallback(function(index, event) {
-      var _input_current;
-      handleOnChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
+      var _input_current2;
+      handleChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
       handleListClose(event);
-      (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
+      (_input_current2 = input.current) === null || _input_current2 === void 0 ? void 0 : _input_current2.blur();
     }, [
-      handleOnChange,
+      handleChange,
       handleListClose,
       filteredOptions
     ]);
@@ -11491,15 +11509,15 @@
         return;
       }
       if (index === DEFAULT_OPTION_INDEX || index === ALL_OPTION_INDEX && !isSelected) {
-        handleOnChange(void 0, event);
+        handleChange(void 0, event);
         return;
       }
       if (index === ALL_OPTION_INDEX && isSelected) {
-        handleOnChange(availableOptions, event);
+        handleChange(availableOptions, event);
         return;
       }
       var option = filteredOptions[index];
-      handleOnChange(isSelected ? (
+      handleChange(isSelected ? (
         // Добавляем
         _to_consumable_array$7(value !== null && value !== void 0 ? value : []).concat([
           option
@@ -11513,7 +11531,7 @@
     }, [
       isMultiSelect,
       filteredOptions,
-      handleOnChange,
+      handleChange,
       value,
       availableOptions,
       convertToId
@@ -11573,7 +11591,7 @@
         setShouldShowDefaultOption(v === "");
       }
       if (v === "" && !hasSearchInputInList) {
-        handleOnChange(void 0, event);
+        handleChange(void 0, event);
       }
       setSearchValue(v);
     };
@@ -11597,7 +11615,8 @@
             if (indexToSelect === ALL_OPTION_INDEX) {
               isThisValueAlreadySelected = areAllOptionsSelected;
             } else {
-              var valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
+              var option = filteredOptions[indexToSelect];
+              var valueIdToSelect = convertToId(option);
               var _value_some;
               isThisValueAlreadySelected = (_value_some = value === null || value === void 0 ? void 0 : value.some(function(opt) {
                 return convertToId(opt) === valueIdToSelect;
@@ -11625,8 +11644,9 @@
     };
     var onArrowClick = function() {
       if (isListOpen) {
-        var _input_current;
-        (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
+        var _input_current2;
+        (_input_current2 = input.current) === null || _input_current2 === void 0 ? void 0 : _input_current2.blur();
+        closeList();
       } else {
         var _input_current1;
         (_input_current1 = input.current) === null || _input_current1 === void 0 ? void 0 : _input_current1.focus();
@@ -11646,10 +11666,11 @@
       (optionsMode === "normal" || hasEnoughSymbolsToSearch)
     );
     var _ref1 = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref1.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref1.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref1.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
+    var _input_current_parentElement;
     var popperData = useDropdown({
       isOpen,
       onDropdownClose: handleListClose,
-      referenceElement: inputWrapper.current,
+      referenceElement: (_input_current_parentElement = (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.parentElement) !== null && _input_current_parentElement !== void 0 ? _input_current_parentElement : inputWrapper.current,
       dropdownElement: list.current,
       options: dropdownOptions,
       dependenciesForPositionUpdating: [
@@ -11658,10 +11679,11 @@
       ]
     });
     React.useEffect(function() {
-      var _optionsIndexesForNavigation_find;
-      setFocusedListCellIndex((_optionsIndexesForNavigation_find = optionsIndexesForNavigation.find(function(index) {
-        return trueReactPlatformHelpers.isNotEmpty(strValue) && trueReactPlatformHelpers.isNotEmpty(filteredOptions[index]) && convertToId(filteredOptions[index]) === convertToId(strValue);
-      })) !== null && _optionsIndexesForNavigation_find !== void 0 ? _optionsIndexesForNavigation_find : optionsIndexesForNavigation[0]);
+      var focusedCellIndex = trueReactPlatformHelpers.isNotEmpty(strValue) ? optionsIndexesForNavigation.find(function(index) {
+        var option = filteredOptions[index];
+        return trueReactPlatformHelpers.isNotEmpty(option) && convertToId(option) === convertToId(strValue);
+      }) : void 0;
+      setFocusedListCellIndex(focusedCellIndex !== null && focusedCellIndex !== void 0 ? focusedCellIndex : optionsIndexesForNavigation[0]);
     }, [
       strValue,
       filteredOptions,
@@ -11675,11 +11697,24 @@
     }, [
       isOpen
     ]);
+    var searchInputEl = hasSearchInputInList && /* @__PURE__ */ jsx(SearchInput, _object_spread$H({
+      value: searchValue,
+      onChange: handleInputChange,
+      tweakStyles: tweakSearchInputStyles,
+      placeholder: "Поиск"
+    }, searchInputProps));
+    var customHeader = (trueReactPlatformHelpers.isReactNodeNotEmpty(searchInputEl) || trueReactPlatformHelpers.isReactNodeNotEmpty(header)) && /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        searchInputEl,
+        header
+      ]
+    });
     var _obj2;
     var listEl = /* @__PURE__ */ jsx("div", _object_spread_props$C(_object_spread$H({
       className: clsx(classes.listWrapper, (_obj2 = {}, _define_property$J(_obj2, classes.withoutPopper, !shouldUsePopper), _define_property$J(_obj2, classes.listWrapperInBody, shouldRenderInBody), _obj2)),
       ref: list,
       style: popperData === null || popperData === void 0 ? void 0 : popperData.styles.popper,
+      tabIndex: 0,
       onBlur: handleBlur
     }, popperData === null || popperData === void 0 ? void 0 : popperData.attributes.popper), {
       children: isOpen && /* @__PURE__ */ jsx(SelectList, {
@@ -11687,12 +11722,8 @@
         defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel,
         allOptionsLabel: shouldShowAllOption && allOptionsLabel,
         areAllOptionsSelected,
-        customListHeader: hasSearchInputInList && /* @__PURE__ */ jsx(SearchInput, _object_spread$H({
-          value: searchValue,
-          onChange: handleInputChange,
-          tweakStyles: tweakSearchInputStyles,
-          placeholder: "Поиск"
-        }, searchInputProps)),
+        customListHeader: customHeader,
+        customListFooter: footer,
         noMatchesLabel,
         focusedIndex: focusedListCellIndex,
         activeValue: value,
@@ -11700,13 +11731,14 @@
         loadingLabel,
         tweakStyles: tweakSelectListStyles,
         testId: trueReactPlatformHelpers.getTestId(testId, "list"),
+        isMultiSelect,
         shouldScrollToList: shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll,
         isOptionDisabled,
         convertValueToString,
         convertValueToReactNode,
         convertValueToId: convertToId,
         onOptionSelect: handleOptionSelect,
-        onToggleCheckbox: isMultiSelect ? handleToggleOptionCheckbox : void 0
+        onToggleCheckbox: handleToggleOptionCheckbox
       })
     }));
     var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || trueReactPlatformHelpers.isNotEmpty(iconType) ? /* @__PURE__ */ jsxs(Fragment, {
@@ -11728,6 +11760,7 @@
     return /* @__PURE__ */ jsxs("div", {
       className: classes.root,
       onKeyDown: handleKeyDown,
+      ref: root2,
       children: [
         /* @__PURE__ */ jsxs("div", {
           className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
@@ -13764,13 +13797,14 @@
     return String(val);
   };
   var getPrevSpaces = function(val, position) {
-    return val.slice(0, position - 1).split("").filter(isSpaceChar).length;
+    return val.slice(0, position).split("").filter(isSpaceChar).length;
   };
   var getNewCaretPosition = function(defaultPosition, oldValue, newValue, isDeleteForwardAction) {
     if (oldValue === newValue) {
       return isDeleteForwardAction ? defaultPosition + 1 : defaultPosition;
     }
-    var oldPrevSpaces = getPrevSpaces(oldValue, defaultPosition);
+    var isAdding = newValue.length > oldValue.length;
+    var oldPrevSpaces = getPrevSpaces(oldValue, defaultPosition - (isAdding ? 1 : 0));
     var newPrevSpaces = getPrevSpaces(newValue, defaultPosition);
     var diff = newPrevSpaces - oldPrevSpaces;
     var res = defaultPosition + diff;