@true-engineering/true-react-common-ui-kit 3.24.0 → 3.25.0

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, 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";
@@ -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),
@@ -26092,17 +26125,8 @@ function FlexibleTableRowInner(param) {
   });
   var _useState = _sliced_to_array$8(useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
   var _useState1 = _sliced_to_array$8(useState(function() {
-    var isOpen = isFunction$1(isExpandableRowComponentInitiallyOpen) ? isExpandableRowComponentInitiallyOpen(item, index) : isExpandableRowComponentInitiallyOpen;
-    var component = isOpen ? expandableRowComponent === null || expandableRowComponent === void 0 ? void 0 : expandableRowComponent(item, true, function() {
-      setNestedComponent({
-        isOpen: false
-      });
-    }) : void 0;
-    return isReactNodeNotEmpty(component) ? {
-      isOpen: true,
-      component
-    } : {
-      isOpen: false
+    return {
+      isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index)
     };
   }), 2), nestedComponent = _useState1[0], setNestedComponent = _useState1[1];
   var _activeRows_includes;
@@ -26124,38 +26148,40 @@ function FlexibleTableRowInner(param) {
     onRowHover === null || onRowHover === void 0 ? void 0 : onRowHover(void 0);
     setFocused(false);
   };
-  var updateNestedComponent = function(component, cellKey) {
-    setNestedComponent(component === void 0 ? {
-      isOpen: false
-    } : {
-      isOpen: true,
-      component,
-      cellKey
-    });
-  };
   var closeNestedComponent = function() {
     setNestedComponent({
       isOpen: false
     });
   };
+  var updateNestedComponent = function(component, cellKey) {
+    if (isEmpty(component)) {
+      closeNestedComponent();
+    } else {
+      setNestedComponent({
+        isOpen: true,
+        component,
+        cellKey
+      });
+    }
+  };
   var handleRowClick = function() {
     if (isNotEmpty(uniqueField)) {
       onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item[uniqueField]);
     }
-    if (isNotEmpty(expandableRowComponent)) {
-      var newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
-      if (!isNestedComponentExpanded && newNestedComponent !== null) {
-        updateNestedComponent(newNestedComponent);
-        return;
-      }
-      if (isNestedComponentExpanded && isEmpty(nestedComponentCellKey)) {
-        closeNestedComponent();
-        return;
-      }
+    if (isEmpty(expandableRowComponent)) {
+      return;
+    }
+    if (!isNestedComponentExpanded) {
+      setNestedComponent({
+        isOpen: true
+      });
+    } else if (isEmpty(nestedComponentCellKey)) {
+      closeNestedComponent();
     }
   };
   var TableRow = renderMode === "divs" ? "div" : "tr";
   var TableCell = renderMode === "divs" ? "div" : "td";
+  var _nestedComponent_component;
   var _obj2;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
@@ -26194,7 +26220,7 @@ function FlexibleTableRowInner(param) {
         children: /* @__PURE__ */ jsx(TableCell, {
           className: classes.nestedComponent,
           colSpan: columns.length,
-          children: nestedComponent.component
+          children: (_nestedComponent_component = nestedComponent.component) !== null && _nestedComponent_component !== void 0 ? _nestedComponent_component : expandableRowComponent === null || expandableRowComponent === void 0 ? void 0 : expandableRowComponent(item, true, closeNestedComponent)
         })
       })
     ]