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

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

@@ -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),
@@ -26080,17 +26113,8 @@
     });
     var _useState = _sliced_to_array$8(React.useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
     var _useState1 = _sliced_to_array$8(React.useState(function() {
-      var isOpen = trueReactPlatformHelpers.isFunction(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 trueReactPlatformHelpers.isReactNodeNotEmpty(component) ? {
-        isOpen: true,
-        component
-      } : {
-        isOpen: false
+      return {
+        isOpen: trueReactPlatformHelpers.applyAction(isExpandableRowComponentInitiallyOpen, item, index)
       };
     }), 2), nestedComponent = _useState1[0], setNestedComponent = _useState1[1];
     var _activeRows_includes;
@@ -26112,38 +26136,40 @@
       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 (trueReactPlatformHelpers.isEmpty(component)) {
+        closeNestedComponent();
+      } else {
+        setNestedComponent({
+          isOpen: true,
+          component,
+          cellKey
+        });
+      }
+    };
     var handleRowClick = function() {
       if (trueReactPlatformHelpers.isNotEmpty(uniqueField)) {
         onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item[uniqueField]);
       }
-      if (trueReactPlatformHelpers.isNotEmpty(expandableRowComponent)) {
-        var newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
-        if (!isNestedComponentExpanded && newNestedComponent !== null) {
-          updateNestedComponent(newNestedComponent);
-          return;
-        }
-        if (isNestedComponentExpanded && trueReactPlatformHelpers.isEmpty(nestedComponentCellKey)) {
-          closeNestedComponent();
-          return;
-        }
+      if (trueReactPlatformHelpers.isEmpty(expandableRowComponent)) {
+        return;
+      }
+      if (!isNestedComponentExpanded) {
+        setNestedComponent({
+          isOpen: true
+        });
+      } else if (trueReactPlatformHelpers.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: [
@@ -26182,7 +26208,7 @@
           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)
           })
         })
       ]