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

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

@@ -1,6 +1,6 @@
 import React, { createContext, useRef, useEffect, useCallback, useState, useMemo, useContext, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, memo } from "react";
 import { createUseStyles } from "react-jss";
-import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, createFilter, isFunction as isFunction$1, isObject as isObject$1, getTransition, applyAction, indexMap, isNumberInteger, hasDuplicates } from "@true-engineering/true-react-platform-helpers";
+import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, getArray, createFilter, isFunction as isFunction$1, isObject as isObject$1, getTransition, applyAction, indexMap, isNumberInteger, hasDuplicates } from "@true-engineering/true-react-platform-helpers";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
@@ -6668,63 +6668,63 @@ var useMergedRefs = function(refs) {
     return 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>';
@@ -10619,15 +10619,11 @@ var useStyles$F = createThemedStyles("SelectList", {
   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,
@@ -10724,8 +10720,18 @@ function _object_spread_props$E(target, source) {
   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 = 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,
@@ -10741,17 +10747,7 @@ var SelectListItem = function(param) {
     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) {
@@ -10807,47 +10803,39 @@ function _object_spread_props$D(target, source) {
   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 = 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 = 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 = isReactNodeNotEmpty(customListHeader);
+  var isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);
   var optionsDisableMap = useMemo(function() {
-    return options.map(function(o) {
-      return isOptionDisabled(o);
-    });
+    return options.map(isOptionDisabled);
   }, [
     options,
     isOptionDisabled
   ]);
   var listOptions = 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)) : isNotEmpty(activeValue) && convertValueToId(activeValue) === convertValueToId(item);
-  };
+  var activeOptionsIds = useMemo(function() {
+    return new Set(getArray(activeValue).map(convertValueToId));
+  }, [
+    activeValue,
+    convertValueToId
+  ]);
+  var _obj2;
   return /* @__PURE__ */ jsxs(ScrollIntoViewIfNeeded, {
     active: shouldScrollToList && !isMultiSelect,
-    className: clsx(classes.root, _define_property$K({}, classes.withListHeader, isReactNodeNotEmpty(customListHeader))),
+    className: clsx(classes.root, (_obj2 = {}, _define_property$K(_obj2, classes.withListHeader, isHeaderNotEmpty), _define_property$K(_obj2, classes.withListFooter, isFooterNotEmpty), _obj2)),
     children: [
-      isReactNodeNotEmpty(customListHeader) && /* @__PURE__ */ jsx("div", {
+      isHeaderNotEmpty && /* @__PURE__ */ jsx("div", {
         className: classes.listHeader,
         children: customListHeader
       }),
@@ -10873,9 +10861,10 @@ function SelectList(param) {
             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
@@ -10883,7 +10872,7 @@ function SelectList(param) {
             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,
@@ -10891,6 +10880,7 @@ function SelectList(param) {
                 isDisabled,
                 isActive,
                 isFocused,
+                isMultiSelect,
                 onOptionSelect,
                 onToggleCheckbox,
                 children: opt
@@ -10902,7 +10892,11 @@ function SelectList(param) {
             })
           ]
         })
-      }))
+      })),
+      isFooterNotEmpty && /* @__PURE__ */ jsx("div", {
+        className: classes.listFooter,
+        children: customListFooter
+      })
     ]
   });
 }
@@ -10921,9 +10915,6 @@ var getDefaultConvertToIdFunction = function(convertValueToString) {
     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 useStyles$E = createThemedStyles("Select", {
   root: {
     width: "100%",
@@ -10943,7 +10934,7 @@ var useStyles$E = createThemedStyles("Select", {
   },
   withoutPopper: {
     position: "absolute",
-    top: "calc(100% + 6px)"
+    top: "calc(var(--dropdown-offset, 100%) + 6px)"
   },
   listWrapperInBody: {
     minWidth: "auto",
@@ -10958,7 +10949,8 @@ var useStyles$E = createThemedStyles("Select", {
     height: 20,
     cursor: "pointer",
     zIndex: 1,
-    transition: "transform 0.1s ease"
+    transition: animations.defaultTransition,
+    transitionProperty: "transform"
   },
   activeArrow: {
     transform: "rotate(180deg)"
@@ -11317,9 +11309,13 @@ function _ts_generator$4(thisArg, body) {
   }
 }
 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",
@@ -11355,7 +11351,6 @@ function Select(props) {
     "shouldRenderInList"
   ]);
   var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
-  var isMultiSelect = isMultiSelectValue(props);
   var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
   var tweakInputStyles = useTweakStyles({
     innerStyles: getInputStyles({
@@ -11384,6 +11379,7 @@ function Select(props) {
   var _useState2 = _sliced_to_array$k(useState(DEFAULT_OPTION_INDEX), 2), focusedListCellIndex = _useState2[0], setFocusedListCellIndex = _useState2[1];
   var _useState3 = _sliced_to_array$k(useState(""), 2), searchValue = _useState3[0], setSearchValue = _useState3[1];
   var _useState4 = _sliced_to_array$k(useState(true), 2), shouldShowDefaultOption = _useState4[0], setShouldShowDefaultOption = _useState4[1];
+  var root2 = useRef(null);
   var inputWrapper = useRef(null);
   var list = useRef(null);
   var input = useRef(null);
@@ -11408,8 +11404,8 @@ function Select(props) {
     optionsMode
   ]);
   var availableOptions = useMemo(function() {
-    return options.filter(function(o) {
-      return !isOptionDisabled(o);
+    return options.filter(function(option) {
+      return !isOptionDisabled(option);
     });
   }, [
     options,
@@ -11446,17 +11442,39 @@ function Select(props) {
     convertValueToId,
     convertValueToString
   ]);
-  var handleListClose = useCallback(function(event) {
+  var getDropdownOffset = function() {
+    var _input_current_parentElement2;
+    if (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 = 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 = 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) {
@@ -11479,7 +11497,7 @@ function Select(props) {
       handleListClose(event);
     }
   };
-  var handleOnChange = useCallback(function(newValue, event) {
+  var handleChange = useCallback(function(newValue, event) {
     if (!compareValuesOnChange(value, newValue)) {
       onChange(newValue, event);
     }
@@ -11489,12 +11507,12 @@ function Select(props) {
     onChange
   ]);
   var handleOptionSelect = 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
   ]);
@@ -11503,15 +11521,15 @@ function Select(props) {
       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
@@ -11525,7 +11543,7 @@ function Select(props) {
   }, [
     isMultiSelect,
     filteredOptions,
-    handleOnChange,
+    handleChange,
     value,
     availableOptions,
     convertToId
@@ -11585,7 +11603,7 @@ function Select(props) {
       setShouldShowDefaultOption(v === "");
     }
     if (v === "" && !hasSearchInputInList) {
-      handleOnChange(void 0, event);
+      handleChange(void 0, event);
     }
     setSearchValue(v);
   };
@@ -11609,7 +11627,8 @@ function Select(props) {
           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;
@@ -11637,8 +11656,9 @@ function Select(props) {
   };
   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();
@@ -11658,10 +11678,11 @@ function Select(props) {
     (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: [
@@ -11670,10 +11691,11 @@ function Select(props) {
     ]
   });
   useEffect(function() {
-    var _optionsIndexesForNavigation_find;
-    setFocusedListCellIndex((_optionsIndexesForNavigation_find = optionsIndexesForNavigation.find(function(index) {
-      return isNotEmpty(strValue) && isNotEmpty(filteredOptions[index]) && convertToId(filteredOptions[index]) === convertToId(strValue);
-    })) !== null && _optionsIndexesForNavigation_find !== void 0 ? _optionsIndexesForNavigation_find : optionsIndexesForNavigation[0]);
+    var focusedCellIndex = isNotEmpty(strValue) ? optionsIndexesForNavigation.find(function(index) {
+      var option = filteredOptions[index];
+      return isNotEmpty(option) && convertToId(option) === convertToId(strValue);
+    }) : void 0;
+    setFocusedListCellIndex(focusedCellIndex !== null && focusedCellIndex !== void 0 ? focusedCellIndex : optionsIndexesForNavigation[0]);
   }, [
     strValue,
     filteredOptions,
@@ -11687,11 +11709,24 @@ function Select(props) {
   }, [
     isOpen
   ]);
+  var searchInputEl = hasSearchInputInList && /* @__PURE__ */ jsx(SearchInput, _object_spread$H({
+    value: searchValue,
+    onChange: handleInputChange,
+    tweakStyles: tweakSearchInputStyles,
+    placeholder: "Поиск"
+  }, searchInputProps));
+  var customHeader = (isReactNodeNotEmpty(searchInputEl) || 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, {
@@ -11699,12 +11734,8 @@ function Select(props) {
       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,
@@ -11712,13 +11743,14 @@ function Select(props) {
       loadingLabel,
       tweakStyles: tweakSelectListStyles,
       testId: 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 || isNotEmpty(iconType) ? /* @__PURE__ */ jsxs(Fragment, {
@@ -11740,6 +11772,7 @@ function Select(props) {
   return /* @__PURE__ */ jsxs("div", {
     className: classes.root,
     onKeyDown: handleKeyDown,
+    ref: root2,
     children: [
       /* @__PURE__ */ jsxs("div", {
         className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
@@ -13776,13 +13809,14 @@ var defaultConvertFunction$1 = function(val) {
   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;