@true-engineering/true-react-common-ui-kit 1.3.0 → 1.4.0

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

@@ -1120,6 +1120,16 @@ var transformToKebab = function(string) {
   });
   return result;
 };
+var hasExactParent = function(element, parent) {
+  if (element === parent) {
+    return true;
+  }
+  var parentNode = getParentNode$1(element);
+  if (parentNode === element) {
+    return false;
+  }
+  return hasExactParent(parentNode, parent);
+};
 var _element_parentNode;
 var getParentNode$1 = function(element) {
   return element.nodeName === "HTML" ? element : (_element_parentNode = element.parentNode) !== null && _element_parentNode !== void 0 ? _element_parentNode : element.host;
@@ -4183,63 +4193,63 @@ var IconBoilerplate = function(param) {
     ]
   });
 };
-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>
+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
   </svg>`;
 var complexIcons = {
   avatar: avatarGreen
@@ -6112,6 +6122,11 @@ var styles$y = {
   loading: {},
   tweakPreloader: {}
 };
+var renderIcon = function(icon) {
+  return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+    type: icon
+  }) : icon;
+};
 function _array_like_to_array$k(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
@@ -6477,9 +6492,7 @@ var Input = /* @__PURE__ */ forwardRef(function(param, ref) {
               iconType !== void 0 && /* @__PURE__ */ jsx("div", {
                 className: clsx(classes.inputIcon, _define_property$B({}, classes.activeIcon, !isDisabled && onIconClick !== void 0)),
                 onClick: !isDisabled ? onIconClick : void 0,
-                children: /* @__PURE__ */ jsx(Icon, {
-                  type: iconType
-                })
+                children: renderIcon(iconType)
               })
             ]
           })
@@ -6918,7 +6931,20 @@ var styles$v = {
       CONTAINER_PADDING,
       0
     ],
-    fontSize: 16
+    fontSize: 16,
+    overflow: "hidden"
+  },
+  withListHeader: {
+    paddingTop: 0
+  },
+  listHeader: {
+    "& + $list": {
+      borderTop: [
+        1,
+        "solid",
+        colors.BORDER_LIGHT
+      ]
+    }
   },
   list: _object_spread$x({
     height: "100%",
@@ -7004,7 +7030,7 @@ function _object_spread_props$q(target, source) {
 }
 var DEFAULT_OPTION_INDEX = -1;
 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, isOptionDisabled = param.isOptionDisabled, onOptionClick = param.onOptionClick, convertValueToString = param.convertValueToString, convertValueToReactNode = param.convertValueToReactNode, _param_convertValueToId = param.convertValueToId, convertValueToId = _param_convertValueToId === void 0 ? convertValueToString : _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, customListHeader = param.customListHeader, isOptionDisabled = param.isOptionDisabled, onOptionClick = param.onOptionClick, convertValueToString = param.convertValueToString, convertValueToReactNode = param.convertValueToReactNode, _param_convertValueToId = param.convertValueToId, convertValueToId = _param_convertValueToId === void 0 ? convertValueToString : _param_convertValueToId;
   var classes = useTheme("SelectList", styles$v, tweakStyles).classes;
   var activeValueId = isNotEmpty(activeValue) ? convertValueToId(activeValue) : void 0;
   var isActiveOption = function(item) {
@@ -7028,58 +7054,64 @@ function SelectList(param) {
     convertFunction,
     optionsDisableMap
   ]);
-  return /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
+  return /* @__PURE__ */ jsxs(ScrollIntoViewIfNeeded, {
     active: shouldScrollToList,
-    className: classes.root,
-    children: /* @__PURE__ */ jsx("div", {
-      className: classes.list,
-      "data-testid": testId,
-      children: isLoading ? /* @__PURE__ */ jsx("div", {
-        className: clsx(classes.cell, classes.loading),
-        children: loadingLabel
-      }) : /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          defaultOptionLabel !== void 0 && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
-            active: focusedIndex === DEFAULT_OPTION_INDEX,
-            options: {
-              block: "nearest"
-            },
-            className: clsx(classes.cell, classes.defaultCell, focusedIndex === DEFAULT_OPTION_INDEX && classes.focused),
-            onClick: function() {
-              return onOptionClick(DEFAULT_OPTION_INDEX);
-            },
-            children: defaultOptionLabel
-          }),
-          listOptions.map(function(opt, i) {
-            var optionValue = options[i];
-            var isFocused = i === focusedIndex;
-            var isActive = isActiveOption(optionValue);
-            var isDisabled = optionsDisableMap[i];
-            var _obj;
-            return /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, _object_spread_props$q(_object_spread$w({
-              active: isFocused,
+    className: clsx(classes.root, _define_property$x({}, classes.withListHeader, isNotEmpty(customListHeader))),
+    children: [
+      isNotEmpty(customListHeader) && /* @__PURE__ */ jsx("div", {
+        className: classes.listHeader,
+        children: customListHeader
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: classes.list,
+        "data-testid": testId,
+        children: isLoading ? /* @__PURE__ */ jsx("div", {
+          className: clsx(classes.cell, classes.loading),
+          children: loadingLabel
+        }) : /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            defaultOptionLabel !== void 0 && /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, {
+              active: focusedIndex === DEFAULT_OPTION_INDEX,
               options: {
                 block: "nearest"
               },
-              className: clsx(classes.cell, (_obj = {}, _define_property$x(_obj, classes.focused, isFocused), _define_property$x(_obj, classes.active, isActive), _define_property$x(_obj, classes.disabled, isDisabled), _obj))
-            }, addDataAttributes({
-              disabled: isDisabled,
-              active: isActive,
-              focused: isFocused
-            })), {
-              onClick: !isDisabled ? function() {
-                return onOptionClick(i);
-              } : void 0,
-              children: opt
-            }), i);
-          }),
-          listOptions.length === 0 && /* @__PURE__ */ jsx("div", {
-            className: clsx(classes.cell, classes.noMatchesLabel),
-            children: noMatchesLabel
-          })
-        ]
+              className: clsx(classes.cell, classes.defaultCell, focusedIndex === DEFAULT_OPTION_INDEX && classes.focused),
+              onClick: function(event) {
+                return onOptionClick(DEFAULT_OPTION_INDEX, event);
+              },
+              children: defaultOptionLabel
+            }),
+            listOptions.map(function(opt, i) {
+              var optionValue = options[i];
+              var isFocused = i === focusedIndex;
+              var isActive = isActiveOption(optionValue);
+              var isDisabled = optionsDisableMap[i];
+              var _obj;
+              return /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, _object_spread_props$q(_object_spread$w({
+                active: isFocused,
+                options: {
+                  block: "nearest"
+                },
+                className: clsx(classes.cell, (_obj = {}, _define_property$x(_obj, classes.focused, isFocused), _define_property$x(_obj, classes.active, isActive), _define_property$x(_obj, classes.disabled, isDisabled), _obj))
+              }, addDataAttributes({
+                disabled: isDisabled,
+                active: isActive,
+                focused: isFocused
+              })), {
+                onClick: !isDisabled ? function(event) {
+                  return onOptionClick(i, event);
+                } : void 0,
+                children: opt
+              }), i);
+            }),
+            listOptions.length === 0 && /* @__PURE__ */ jsx("div", {
+              className: clsx(classes.cell, classes.noMatchesLabel),
+              children: noMatchesLabel
+            })
+          ]
+        })
       })
-    })
+    ]
   });
 }
 var _option_isDisabled;
@@ -7154,7 +7186,169 @@ var styles$u = {
       paddingRight: 32
     }
   },
-  tweakSelectList: {}
+  tweakSelectList: {},
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        height: 48,
+        borderRadius: 0,
+        border: "none",
+        backgroundColor: "transparent"
+      }
+    }
+  }
+};
+var LEFT_PADDING = 44;
+var styles$t = {
+  root: {
+    position: "relative"
+  },
+  icon: {
+    display: "flex",
+    alignItems: "center",
+    position: "absolute",
+    left: 12,
+    height: "100%",
+    width: 20,
+    zIndex: 2,
+    color: colors.GREY_ACTIVE
+  },
+  tweakInput: {
+    inputWrapper: {
+      height: 35,
+      borderColor: "transparent",
+      backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+      borderRadius: 18,
+      paddingLeft: LEFT_PADDING,
+      transitionProperty: "background-color, border-color"
+    },
+    focused: {
+      backgroundColor: colors.CLASSIC_WHITE,
+      borderColor: colors.BORDER_MAIN
+    },
+    input: {
+      fontSize: 14,
+      paddingLeft: 0
+    },
+    label: {
+      left: LEFT_PADDING,
+      fontSize: 14
+    }
+  }
+};
+function _define_property$w(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread$v(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys2 = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys2.forEach(function(key) {
+      _define_property$w(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys$p(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props$p(target, source) {
+  source = source != null ? source : {};
+  if (Object.getOwnPropertyDescriptors) {
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  } else {
+    ownKeys$p(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _object_without_properties$6(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _object_without_properties_loose$6(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _object_without_properties_loose$6(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var SearchInput = function(_param) {
+  var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, tweakStyles = _param.tweakStyles, testId = _param.testId, data = _param.data, props = _object_without_properties$6(_param, [
+    "isClearable",
+    "tweakStyles",
+    "testId",
+    "data"
+  ]);
+  var _useTheme = useTheme("SearchInput", styles$t, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+  var tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, "tweakInput");
+  return /* @__PURE__ */ jsxs("div", _object_spread_props$p(_object_spread$v({
+    className: classes.root
+  }, addDataTestId(testId), addDataAttributes(data)), {
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: classes.icon,
+        children: /* @__PURE__ */ jsx(Icon, {
+          type: "search"
+        })
+      }),
+      /* @__PURE__ */ jsx(Input, _object_spread$v({
+        isClearable,
+        isActive: props.value !== "" && props.value !== void 0,
+        testId: getTestId(testId, "input"),
+        tweakStyles: tweakInputStyles,
+        hasFloatingLabel: false,
+        label: props.placeholder
+      }, props))
+    ]
+  }));
 };
 function _array_like_to_array$j(arr, len) {
   if (len == null || len > arr.length)
@@ -7196,7 +7390,7 @@ function _async_to_generator$4(fn3) {
     });
   };
 }
-function _define_property$w(obj, key, value) {
+function _define_property$v(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -7240,7 +7434,7 @@ function _iterable_to_array_limit$j(arr, i) {
 function _non_iterable_rest$j() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$v(target) {
+function _object_spread$u(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -7250,12 +7444,12 @@ function _object_spread$v(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$w(target, key, source[key]);
+      _define_property$v(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$p(object, enumerableOnly) {
+function ownKeys$o(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -7268,21 +7462,21 @@ function ownKeys$p(object, enumerableOnly) {
   }
   return keys;
 }
-function _object_spread_props$p(target, source) {
+function _object_spread_props$o(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$p(Object(source)).forEach(function(key) {
+    ownKeys$o(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
   return target;
 }
-function _object_without_properties$6(source, excluded) {
+function _object_without_properties$5(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$6(source, excluded);
+  var target = _object_without_properties_loose$5(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -7297,7 +7491,7 @@ function _object_without_properties$6(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$6(source, excluded) {
+function _object_without_properties_loose$5(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -7430,7 +7624,7 @@ var __generator$4 = globalThis && globalThis.__generator || function(thisArg, bo
   }
 };
 function Select(_param) {
-  var options = _param.options, value = _param.value, defaultOptionLabel = _param.defaultOptionLabel, _param_debounceTime = _param.debounceTime, debounceTime = _param_debounceTime === void 0 ? 400 : _param_debounceTime, _param_optionsMode = _param.optionsMode, optionsMode = _param_optionsMode === void 0 ? "normal" : _param_optionsMode, noMatchesLabel = _param.noMatchesLabel, loadingLabel = _param.loadingLabel, tweakStyles = _param.tweakStyles, testId = _param.testId, isDisabled = _param.isDisabled, dropdownOptions = _param.dropdownOptions, _param_minSymbolsCountToOpenList = _param.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _param_minSymbolsCountToOpenList === void 0 ? 0 : _param_minSymbolsCountToOpenList, _param_dropdownIcon = _param.dropdownIcon, dropdownIcon = _param_dropdownIcon === void 0 ? "chevron-down" : _param_dropdownIcon, _param_shouldScrollToList = _param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, onChange = _param.onChange, onFocus = _param.onFocus, onBlur = _param.onBlur, onType = _param.onType, onOpen = _param.onOpen, _param_isOptionDisabled = _param.isOptionDisabled, isOptionDisabled = _param_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _param_isOptionDisabled, _param_compareValuesOnChange = _param.compareValuesOnChange, compareValuesOnChange = _param_compareValuesOnChange === void 0 ? defaultCompareFunction : _param_compareValuesOnChange, _param_convertValueToString = _param.convertValueToString, convertValueToString = _param_convertValueToString === void 0 ? defaultConvertFunction$2 : _param_convertValueToString, convertValueToId = _param.convertValueToId, convertValueToReactNode = _param.convertValueToReactNode, optionsFilter = _param.optionsFilter, inputProps = _object_without_properties$6(_param, [
+  var options = _param.options, value = _param.value, defaultOptionLabel = _param.defaultOptionLabel, _param_debounceTime = _param.debounceTime, debounceTime = _param_debounceTime === void 0 ? 400 : _param_debounceTime, _param_optionsMode = _param.optionsMode, optionsMode = _param_optionsMode === void 0 ? "normal" : _param_optionsMode, noMatchesLabel = _param.noMatchesLabel, loadingLabel = _param.loadingLabel, tweakStyles = _param.tweakStyles, testId = _param.testId, isDisabled = _param.isDisabled, dropdownOptions = _param.dropdownOptions, _param_minSymbolsCountToOpenList = _param.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _param_minSymbolsCountToOpenList === void 0 ? 0 : _param_minSymbolsCountToOpenList, _param_dropdownIcon = _param.dropdownIcon, dropdownIcon = _param_dropdownIcon === void 0 ? "chevron-down" : _param_dropdownIcon, _param_shouldScrollToList = _param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, searchInput = _param.searchInput, onChange = _param.onChange, onFocus = _param.onFocus, onBlur = _param.onBlur, onType = _param.onType, onOpen = _param.onOpen, _param_isOptionDisabled = _param.isOptionDisabled, isOptionDisabled = _param_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _param_isOptionDisabled, _param_compareValuesOnChange = _param.compareValuesOnChange, compareValuesOnChange = _param_compareValuesOnChange === void 0 ? defaultCompareFunction : _param_compareValuesOnChange, _param_convertValueToString = _param.convertValueToString, convertValueToString = _param_convertValueToString === void 0 ? defaultConvertFunction$2 : _param_convertValueToString, convertValueToId = _param.convertValueToId, convertValueToReactNode = _param.convertValueToReactNode, optionsFilter = _param.optionsFilter, inputProps = _object_without_properties$5(_param, [
     "options",
     "value",
     "defaultOptionLabel",
@@ -7445,6 +7639,7 @@ function Select(_param) {
     "minSymbolsCountToOpenList",
     "dropdownIcon",
     "shouldScrollToList",
+    "searchInput",
     "onChange",
     "onFocus",
     "onBlur",
@@ -7468,6 +7663,8 @@ function Select(_param) {
   var inputWrapper = useRef(null);
   var list = useRef(null);
   var input = useRef(null);
+  var shouldRenderSearchInputInList = (searchInput === null || searchInput === void 0 ? void 0 : searchInput.shouldRenderInList) === true;
+  var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
   var stringValue = isNotEmpty(value) ? convertValueToString(value) : void 0;
   var filteredOptions = useMemo(function() {
     if (optionsMode !== "search") {
@@ -7495,43 +7692,32 @@ function Select(_param) {
     value,
     convertValueToString
   ]);
-  var handleListClose = function() {
+  var handleListClose = function(event) {
     setIsListOpen(false);
     setSearchValue("");
     setShouldShowDefaultOption(true);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
   var handleListOpen = function() {
-    var _ref2 = _async_to_generator$4(function() {
-      return __generator$4(this, function(_state) {
-        if (isListOpen) {
-          return [
-            2
-          ];
-        }
-        setIsListOpen(true);
-        return [
-          2
-        ];
-      });
-    });
-    return function handleListOpen2() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var handleFocus = function(event) {
-    if (onFocus !== void 0) {
-      onFocus(event);
+    if (!isListOpen) {
+      setIsListOpen(true);
     }
+  };
+  var handleFocus = function(event) {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     handleListOpen();
   };
   var handleOnClick = function() {
     handleListOpen();
   };
   var handleBlur = function(event) {
-    if (onBlur !== void 0) {
-      onBlur(event);
+    if (!isNotEmpty(event.relatedTarget) || !isNotEmpty(list.current)) {
+      return;
+    }
+    var isActionInsideList = hasExactParent(event.relatedTarget, list.current);
+    if (!isActionInsideList) {
+      handleListClose(event);
     }
-    handleListClose();
   };
   var handleOnChange = useCallback(function(newValue) {
     var areValuesEqual = compareValuesOnChange(value, newValue);
@@ -7543,10 +7729,10 @@ function Select(_param) {
     value,
     onChange
   ]);
-  var handleOptionClick = useCallback(function(index) {
+  var handleOptionSelect = useCallback(function(index, event) {
     var _input_current;
     handleOnChange(index === -1 ? void 0 : filteredOptions[index]);
-    handleListClose();
+    handleListClose(event);
     (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
   }, [
     handleOnChange,
@@ -7601,7 +7787,7 @@ function Select(_param) {
     if (optionsMode !== "dynamic") {
       setShouldShowDefaultOption(v === "");
     }
-    if (v === "") {
+    if (v === "" && !hasSearchInputInList) {
       handleOnChange(void 0);
     }
     setSearchValue(v);
@@ -7618,7 +7804,7 @@ function Select(_param) {
         if (indexToClick === -1 && filteredOptions.length === 1) {
           indexToClick = 0;
         }
-        handleOptionClick(indexToClick);
+        handleOptionSelect(indexToClick, event);
         break;
       }
       case "ArrowDown": {
@@ -7665,14 +7851,23 @@ function Select(_param) {
       (_input_current1 = input.current) === null || _input_current1 === void 0 ? void 0 : _input_current1.focus();
     }
   };
-  useOnClickOutsideWithRef(list, function() {
-    handleListClose();
-  }, inputWrapper);
-  var isOpen = isListOpen && (inputProps.isLoading || filteredOptions.length > 0 || defaultOptionLabel !== void 0 && searchValue === "" || noMatchesLabel !== void 0) && searchValue.trim().length >= minSymbolsCountToOpenList;
+  useOnClickOutsideWithRef(list, handleListClose, inputWrapper);
+  var hasEnoughSymbolsToSearch = searchValue.trim().length >= minSymbolsCountToOpenList;
+  var isOpen = (
+    // Пользователь пытается открыть лист
+    isListOpen && // Нам есть что показать:
+    // Есть опции
+    (filteredOptions.length > 0 || // Дефолтная опция
+    defaultOptionLabel !== void 0 && !hasEnoughSymbolsToSearch || // Текст "Загрузка..."
+    inputProps.isLoading || // Текст "Совпадений не найдено"
+    noMatchesLabel !== void 0 || // У нас есть инпут с поиском внутри листа
+    hasSearchInputInList) && // Последняя проверка на случай, если мы че то ищем в опциях
+    (optionsMode === "normal" || hasEnoughSymbolsToSearch)
+  );
   var _inputProps_isReadonly = inputProps.isReadonly, isReadonly = _inputProps_isReadonly === void 0 ? true : _inputProps_isReadonly;
-  var shouldUsePointerCursor = optionsMode === "normal" && isReadonly;
+  var shouldUsePointerCursor = (optionsMode === "normal" || shouldRenderSearchInputInList) && isReadonly;
   var tweakInputStyles = useMemo(function() {
-    return merge({}, componentStyles.tweakInput, _object_spread$v({}, shouldUsePointerCursor ? {
+    return merge({}, componentStyles.tweakInput, _object_spread$u({}, shouldUsePointerCursor ? {
       input: {
         cursor: "pointer"
       }
@@ -7681,6 +7876,7 @@ function Select(_param) {
     tweakStyles === null || tweakStyles === void 0 ? void 0 : tweakStyles.tweakInput,
     shouldUsePointerCursor
   ]);
+  var tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, "tweakSearchInput");
   var _ref = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
   var popperData = useDropdown({
     isOpen,
@@ -7702,30 +7898,34 @@ function Select(_param) {
     onOpen
   ]);
   var _obj;
-  var listEl = /* @__PURE__ */ jsx("div", _object_spread_props$p(_object_spread$v({
-    className: clsx(classes.listWrapper, (_obj = {}, _define_property$w(_obj, classes.withoutPopper, !shouldUsePopper), _define_property$w(_obj, classes.listWrapperInBody, shouldRenderInBody), _obj)),
+  var listEl = /* @__PURE__ */ jsx("div", _object_spread_props$o(_object_spread$u({
+    className: clsx(classes.listWrapper, (_obj = {}, _define_property$v(_obj, classes.withoutPopper, !shouldUsePopper), _define_property$v(_obj, classes.listWrapperInBody, shouldRenderInBody), _obj)),
     ref: list,
-    onMouseDown: function(event) {
-      return event.preventDefault();
-    },
-    style: popperData === null || popperData === void 0 ? void 0 : popperData.styles.popper
+    style: popperData === null || popperData === void 0 ? void 0 : popperData.styles.popper,
+    onBlur: handleBlur
   }, popperData === null || popperData === void 0 ? void 0 : popperData.attributes.popper), {
     children: isOpen && /* @__PURE__ */ jsx(SelectList, {
       options: filteredOptions,
       defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : void 0,
+      customListHeader: hasSearchInputInList ? /* @__PURE__ */ jsx(SearchInput, _object_spread$u({
+        value: searchValue,
+        onChange: handleInputChange,
+        tweakStyles: tweakSearchInputStyles,
+        placeholder: "Поиск"
+      }, searchInput)) : void 0,
       noMatchesLabel,
       focusedIndex: focusedListCellIndex,
       activeValue: value,
       isLoading: inputProps.isLoading,
       loadingLabel,
       tweakStyles: tweakStyles === null || tweakStyles === void 0 ? void 0 : tweakStyles.tweakSelectList,
-      testId: testId !== void 0 ? "".concat(testId, "-list") : void 0,
+      testId: getTestId(testId, "list"),
       shouldScrollToList: shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll,
       isOptionDisabled,
       convertValueToString,
       convertValueToReactNode,
       convertValueToId,
-      onOptionClick: handleOptionClick
+      onOptionClick: handleOptionSelect
     })
   }));
   return /* @__PURE__ */ jsxs("div", {
@@ -7737,11 +7937,11 @@ function Select(_param) {
         onClick: isDisabled ? void 0 : handleOnClick,
         ref: inputWrapper,
         children: [
-          /* @__PURE__ */ jsx(Input, _object_spread$v({
-            value: searchValue !== "" ? searchValue : stringValue,
+          /* @__PURE__ */ jsx(Input, _object_spread$u({
+            value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : stringValue,
             onChange: handleInputChange,
             isActive: isListOpen,
-            isReadonly: optionsMode === "normal",
+            isReadonly: optionsMode === "normal" || shouldRenderSearchInputInList,
             onFocus: handleFocus,
             onBlur: handleBlur,
             isDisabled,
@@ -7775,7 +7975,7 @@ function Select(_param) {
 }
 var SELECT_PADDING_LEFT = 12;
 var SELECT_PADDING_RIGHT = 24;
-var styles$t = {
+var styles$s = {
   btn: {
     width: 36,
     height: 36,
@@ -7844,7 +8044,7 @@ var styles$t = {
 };
 var DatePickerHeader = function(param) {
   var date = param.date, changeYear = param.changeYear, changeMonth = param.changeMonth, decreaseMonth = param.decreaseMonth, increaseMonth = param.increaseMonth, isPrevMonthButtonDisabled = param.isPrevMonthButtonDisabled, isNextMonthButtonDisabled = param.isNextMonthButtonDisabled, months = param.months;
-  var _useTheme = useTheme("DatePickerHeader", styles$t), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
+  var _useTheme = useTheme("DatePickerHeader", styles$s), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
   var years = useMemo(function() {
     return Array.from(Array(41)).map(function(_, i) {
       return getYear(new Date()) - 30 + i;
@@ -7928,7 +8128,7 @@ var DatePickerHeader = function(param) {
     ]
   });
 };
-var styles$s = {
+var styles$r = {
   root: {
     width: "100%",
     height: "100%"
@@ -7990,7 +8190,7 @@ function _array_with_holes$i(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _define_property$v(obj, key, value) {
+function _define_property$u(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8034,7 +8234,7 @@ function _iterable_to_array_limit$i(arr, i) {
 function _non_iterable_rest$i() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$u(target) {
+function _object_spread$t(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8044,12 +8244,12 @@ function _object_spread$u(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$v(target, key, source[key]);
+      _define_property$u(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$o(object, enumerableOnly) {
+function ownKeys$n(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8062,21 +8262,21 @@ function ownKeys$o(object, enumerableOnly) {
   }
   return keys;
 }
-function _object_spread_props$o(target, source) {
+function _object_spread_props$n(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$o(Object(source)).forEach(function(key) {
+    ownKeys$n(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
   return target;
 }
-function _object_without_properties$5(source, excluded) {
+function _object_without_properties$4(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$5(source, excluded);
+  var target = _object_without_properties_loose$4(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -8091,7 +8291,7 @@ function _object_without_properties$5(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$5(source, excluded) {
+function _object_without_properties_loose$4(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -8132,7 +8332,7 @@ var PopperContainer = function(param) {
 };
 var DEFAULT_DATE_FORMAT$2 = "dd.MM.yyyy";
 var DatePicker = function(_param) {
-  var data = _param.data, tweakStyles = _param.tweakStyles, selectedDate = _param.selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, endDate = _param.endDate, startDate = _param.startDate, size = _param.size, isRange = _param.isRange, locale2 = _param.locale, months = _param.months, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_leftPosition = _param.leftPosition, leftPosition = _param_leftPosition === void 0 ? 0 : _param_leftPosition, _param_topPosition = _param.topPosition, topPosition = _param_topPosition === void 0 ? 0 : _param_topPosition, isInline = _param.isInline, isNeedClearSelectedDate = _param.isNeedClearSelectedDate, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "__.__.____" : _param_placeholder, shouldGiveValueOnType = _param.shouldGiveValueOnType, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, shouldRenderPopperInBody = _param.shouldRenderPopperInBody, popperModifiers = _param.popperModifiers, showPreviousMonths = _param.showPreviousMonths, popperPlacement = _param.popperPlacement, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, customHeader = _param.customHeader, filterDate = _param.filterDate, inputProps = _object_without_properties$5(_param, [
+  var data = _param.data, tweakStyles = _param.tweakStyles, selectedDate = _param.selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, endDate = _param.endDate, startDate = _param.startDate, size = _param.size, isRange = _param.isRange, locale2 = _param.locale, months = _param.months, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_leftPosition = _param.leftPosition, leftPosition = _param_leftPosition === void 0 ? 0 : _param_leftPosition, _param_topPosition = _param.topPosition, topPosition = _param_topPosition === void 0 ? 0 : _param_topPosition, isInline = _param.isInline, isNeedClearSelectedDate = _param.isNeedClearSelectedDate, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "__.__.____" : _param_placeholder, shouldGiveValueOnType = _param.shouldGiveValueOnType, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, shouldRenderPopperInBody = _param.shouldRenderPopperInBody, popperModifiers = _param.popperModifiers, showPreviousMonths = _param.showPreviousMonths, popperPlacement = _param.popperPlacement, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, customHeader = _param.customHeader, filterDate = _param.filterDate, inputProps = _object_without_properties$4(_param, [
     "data",
     "tweakStyles",
     "selectedDate",
@@ -8163,7 +8363,7 @@ var DatePicker = function(_param) {
     "customHeader",
     "filterDate"
   ]);
-  var classes = useTheme("DatePicker", styles$s, tweakStyles, {
+  var classes = useTheme("DatePicker", styles$r, tweakStyles, {
     leftPosition,
     topPosition
   }).classes;
@@ -8312,7 +8512,7 @@ var DatePicker = function(_param) {
     },
     filterDate
   };
-  var dateInputProps = _object_spread_props$o(_object_spread$u({}, inputProps), {
+  var dateInputProps = _object_spread_props$n(_object_spread$t({}, inputProps), {
     tweakStyles,
     iconType: inputProps.isClearable && dateValue !== "" ? void 0 : "calendar",
     isRange,
@@ -8321,14 +8521,14 @@ var DatePicker = function(_param) {
     }
   });
   if (onChangeRange) {
-    datePickerProps = _object_spread_props$o(_object_spread$u({}, datePickerProps), {
+    datePickerProps = _object_spread_props$n(_object_spread$t({}, datePickerProps), {
       startDate: start2,
       endDate: end2,
       selectsRange: true,
       selected: startDate,
       onChange: onChangeRange
     });
-    dateInputProps = _object_spread_props$o(_object_spread$u({}, dateInputProps), {
+    dateInputProps = _object_spread_props$n(_object_spread$t({}, dateInputProps), {
       startDate: startDateValue,
       endDate: endDateValue,
       onBlur: handleRangeBlur,
@@ -8336,7 +8536,7 @@ var DatePicker = function(_param) {
     });
   }
   if (onChangeDate) {
-    datePickerProps = _object_spread_props$o(_object_spread$u({}, datePickerProps), {
+    datePickerProps = _object_spread_props$n(_object_spread$t({}, datePickerProps), {
       selected: date,
       onChange: function(newDate) {
         return onChangeDate(newDate);
@@ -8350,20 +8550,20 @@ var DatePicker = function(_param) {
       minDate,
       maxDate
     });
-    dateInputProps = _object_spread_props$o(_object_spread$u({}, dateInputProps), {
+    dateInputProps = _object_spread_props$n(_object_spread$t({}, dateInputProps), {
       date: dateValue,
       isActive: isOpen,
       onBlur: handleBlur,
       onChange: handleDateChange
     });
   }
-  return /* @__PURE__ */ jsx("div", _object_spread_props$o(_object_spread$u({
+  return /* @__PURE__ */ jsx("div", _object_spread_props$n(_object_spread$t({
     className: classes.root
   }, addDataAttributes(data)), {
-    children: /* @__PURE__ */ jsx(Datepicker, _object_spread_props$o(_object_spread$u({}, datePickerProps), {
+    children: /* @__PURE__ */ jsx(Datepicker, _object_spread_props$n(_object_spread$t({}, datePickerProps), {
       customInput: /* @__PURE__ */ jsx(DatePickerInput, {
         size,
-        children: /* @__PURE__ */ jsx(DateInput, _object_spread$u({}, dateInputProps))
+        children: /* @__PURE__ */ jsx(DateInput, _object_spread$t({}, dateInputProps))
       }),
       renderCustomHeader: customHeader !== void 0 ? customHeader : function(param) {
         var renderDate = param.date, changeYear = param.changeYear, changeMonth = param.changeMonth, decreaseMonth = param.decreaseMonth, increaseMonth = param.increaseMonth, prevMonthButtonDisabled = param.prevMonthButtonDisabled, nextMonthButtonDisabled = param.nextMonthButtonDisabled;
@@ -8381,7 +8581,7 @@ var DatePicker = function(_param) {
     }))
   }));
 };
-var styles$r = {
+var styles$q = {
   root: {},
   button: {
     cursor: "pointer",
@@ -8422,7 +8622,7 @@ function _array_with_holes$h(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _define_property$u(obj, key, value) {
+function _define_property$t(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8466,7 +8666,7 @@ function _iterable_to_array_limit$h(arr, i) {
 function _non_iterable_rest$h() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$t(target) {
+function _object_spread$s(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8476,12 +8676,12 @@ function _object_spread$t(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$u(target, key, source[key]);
+      _define_property$t(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$n(object, enumerableOnly) {
+function ownKeys$m(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8494,12 +8694,12 @@ function ownKeys$n(object, enumerableOnly) {
   }
   return keys;
 }
-function _object_spread_props$n(target, source) {
+function _object_spread_props$m(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$n(Object(source)).forEach(function(key) {
+    ownKeys$m(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -8524,14 +8724,14 @@ function _unsupported_iterable_to_array$h(o, minLen) {
 var LINK_REGEXP = /(http(s?):\/\/(.*))(\s?)/;
 var Description = function(param) {
   var text = param.text, moreTitle = param.moreTitle, lessTitle = param.lessTitle, _param_truncateIndex = param.truncateIndex, truncateIndex = _param_truncateIndex === void 0 ? 150 : _param_truncateIndex, _param_isAlwaysOpen = param.isAlwaysOpen, isAlwaysOpen = _param_isAlwaysOpen === void 0 ? true : _param_isAlwaysOpen, data = param.data, tweakStyles = param.tweakStyles;
-  var classes = useTheme("Description", styles$r, tweakStyles).classes;
+  var classes = useTheme("Description", styles$q, tweakStyles).classes;
   var isTooShort = text.length < truncateIndex;
   var _useState = _sliced_to_array$h(useState(isAlwaysOpen), 2), isOpen = _useState[0], setIsOpen = _useState[1];
   var link = text.match(LINK_REGEXP);
   var linkText = link && link[0];
   var textWithNoLink = text.replace(LINK_REGEXP, "");
   var shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(" "));
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$n(_object_spread$t({
+  return /* @__PURE__ */ jsxs("div", _object_spread_props$m(_object_spread$s({
     className: classes.root
   }, addDataAttributes(data)), {
     children: [
@@ -8566,158 +8766,6 @@ var Description = function(param) {
     ]
   }));
 };
-var LEFT_PADDING = 44;
-var styles$q = {
-  root: {
-    position: "relative"
-  },
-  icon: {
-    display: "flex",
-    alignItems: "center",
-    position: "absolute",
-    left: 12,
-    height: "100%",
-    width: 20,
-    zIndex: 2,
-    color: colors.GREY_ACTIVE
-  },
-  tweakInput: {
-    inputWrapper: {
-      height: 35,
-      borderColor: "transparent",
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-      borderRadius: 18,
-      paddingLeft: LEFT_PADDING,
-      transitionProperty: "background-color, border-color"
-    },
-    focused: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderColor: colors.BORDER_MAIN
-    },
-    input: {
-      fontSize: 14,
-      paddingLeft: 0
-    },
-    label: {
-      left: LEFT_PADDING,
-      fontSize: 14
-    }
-  }
-};
-function _define_property$t(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _object_spread$s(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys2 = Object.keys(source);
-    if (typeof Object.getOwnPropertySymbols === "function") {
-      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-    ownKeys2.forEach(function(key) {
-      _define_property$t(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys$m(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) {
-      symbols = symbols.filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props$m(target, source) {
-  source = source != null ? source : {};
-  if (Object.getOwnPropertyDescriptors) {
-    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-  } else {
-    ownKeys$m(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-function _object_without_properties$4(source, excluded) {
-  if (source == null)
-    return {};
-  var target = _object_without_properties_loose$4(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0)
-        continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key))
-        continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-function _object_without_properties_loose$4(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0)
-      continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-var SearchInput = function(_param) {
-  var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, tweakStyles = _param.tweakStyles, testId = _param.testId, data = _param.data, props = _object_without_properties$4(_param, [
-    "isClearable",
-    "tweakStyles",
-    "testId",
-    "data"
-  ]);
-  var _useTheme = useTheme("SearchInput", styles$q, tweakStyles), classes = _useTheme.classes, componentStyles = _useTheme.componentStyles;
-  var tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, "tweakInput");
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$m(_object_spread$s({
-    className: classes.root
-  }, addDataTestId(testId), addDataAttributes(data)), {
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        className: classes.icon,
-        children: /* @__PURE__ */ jsx(Icon, {
-          type: "search"
-        })
-      }),
-      /* @__PURE__ */ jsx(Input, _object_spread$s({
-        isClearable,
-        isActive: props.value !== "" && props.value !== void 0,
-        testId: getTestId(testId, "input"),
-        tweakStyles: tweakInputStyles,
-        hasFloatingLabel: false,
-        label: props.placeholder
-      }, props))
-    ]
-  }));
-};
 var SelectLocales = {
   ru: {
     clear: "Очистить",
@@ -20374,7 +20422,9 @@ function TableRow(param) {
         },
         onMouseLeave: handleMouseLeave,
         onClick: handleRowClick
-      }, addDataAttributes(rowData)), {
+      }, addDataAttributes(_object_spread_props$d(_object_spread$f({}, rowData), {
+        isExpandableComponentActive: nestedComponent.isOpen ? true : void 0
+      }))), {
         children: items.map(function(key, idx) {
           return /* @__PURE__ */ jsx(TableValue, {
             columnName: key,
@@ -27082,6 +27132,7 @@ export {
   getScrollParent$1 as getScrollParent,
   getStyleComputedProperty,
   getTestId,
+  hasExactParent,
   isElementOffScreen,
   isElementOneOfParents,
   isInt,