@megafon/ui-core 4.14.0 → 4.14.2

package/dist/lib/components/Search/Search.css

@@ -48,11 +48,7 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 100%;
-  height: 60px;
-  padding: 0 16px 0 16px;
-  border: 1px solid var(--spbSky2);
-  border-radius: 12px;
-  background-color: var(--base);
+  border: 1px solid;
   outline: none;
   cursor: pointer;
   -webkit-transition: border-color 0.3s;
@@ -62,122 +58,64 @@
       -ms-user-select: none;
           user-select: none;
 }
-.mfui-search__control:not(.mfui-search__control_success):not(.mfui-search__control_error):hover {
-  border-color: var(--content);
-}
-.mfui-search__control_success {
-  border-color: var(--brandGreen);
-}
-.mfui-search__control_error {
-  border-color: var(--fury);
-}
-.mfui-search__search-wrapper {
-  position: relative;
-  display: block;
-  width: 100%;
-  cursor: text;
-}
-.mfui-search__search-wrapper_labeled {
-  padding-top: 22px;
-}
-.mfui-search__label {
-  position: absolute;
-  top: 17px;
-  z-index: 1;
-  display: block;
-  overflow: auto;
-  color: var(--spbSky3);
-  -webkit-transition: top 0.5s, -webkit-transform 0.5s;
-  transition: top 0.5s, -webkit-transform 0.5s;
-  transition: transform 0.5s, top 0.5s;
-  transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
-  pointer-events: none;
-  font-family: inherit;
-  font-size: 15px;
-  line-height: 24px;
-}
-.mfui-search__search-field::-webkit-input-placeholder {
+.mfui-search__field_labeled::-webkit-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__search-field::-moz-placeholder {
+.mfui-search__field_labeled::-moz-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__search-field:-moz-placeholder {
+.mfui-search__field_labeled:-moz-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__search-field:-ms-input-placeholder {
+.mfui-search__field_labeled:-ms-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__search-field::-ms-input-placeholder {
+.mfui-search__field_labeled::-ms-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__search-field::placeholder {
+.mfui-search__field_labeled::placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__search-field:focus::-webkit-input-placeholder {
-  opacity: 1;
-}
-.mfui-search__search-field:focus::-moz-placeholder {
-  opacity: 1;
-}
-.mfui-search__search-field:focus:-moz-placeholder {
-  opacity: 1;
-}
-.mfui-search__search-field:focus:-ms-input-placeholder {
-  opacity: 1;
-}
-.mfui-search__search-field:focus::-ms-input-placeholder {
+.mfui-search__field:focus::-webkit-input-placeholder {
   opacity: 1;
 }
-.mfui-search__search-field:focus::placeholder {
+.mfui-search__field:focus::-moz-placeholder {
   opacity: 1;
 }
-.mfui-search__search-wrapper_no-label .mfui-search__search-field::-webkit-input-placeholder {
+.mfui-search__field:focus:-moz-placeholder {
   opacity: 1;
 }
-.mfui-search__search-wrapper_no-label .mfui-search__search-field::-moz-placeholder {
+.mfui-search__field:focus:-ms-input-placeholder {
   opacity: 1;
 }
-.mfui-search__search-wrapper_no-label .mfui-search__search-field:-moz-placeholder {
+.mfui-search__field:focus::-ms-input-placeholder {
   opacity: 1;
 }
-.mfui-search__search-wrapper_no-label .mfui-search__search-field:-ms-input-placeholder {
+.mfui-search__field:focus::placeholder {
   opacity: 1;
 }
-.mfui-search__search-wrapper_no-label .mfui-search__search-field::-ms-input-placeholder {
-  opacity: 1;
-}
-.mfui-search__search-wrapper_no-label .mfui-search__search-field::placeholder {
-  opacity: 1;
-}
-.mfui-search__search-field_filled + .mfui-search__label,
-.mfui-search__search-field:focus + .mfui-search__label {
-  -webkit-transform: scale(0.8) translate(-12.5%, -75%);
-          transform: scale(0.8) translate(-12.5%, -75%);
-  -webkit-transition-duration: 0.2s, 0.01s;
-          transition-duration: 0.2s, 0.01s;
-}
-.mfui-search__search-field {
+.mfui-search__field {
   position: relative;
   z-index: 1;
+  display: block;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
@@ -197,16 +135,31 @@
   outline: none;
   -webkit-box-shadow: none;
           box-shadow: none;
+  cursor: text;
   opacity: 1;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  caret-color: var(--brandGreen);
 }
 @media screen and (max-width: 767px) {
-  .mfui-search__search-field {
+  .mfui-search__field {
     width: 90%;
   }
 }
+.mfui-search__label {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  overflow: auto;
+  color: var(--spbSky3);
+  -webkit-transition-duration: 0.2s, 0.01s;
+          transition-duration: 0.2s, 0.01s;
+  pointer-events: none;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
 .mfui-search__list {
   position: absolute;
   top: calc(100% + 1px);
@@ -219,17 +172,8 @@
   -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
-.mfui-search__icon {
-  display: block;
-  width: 32px;
-  height: 32px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  fill: var(--content);
-}
-.mfui-search__icon-box {
+.mfui-search__clear,
+.mfui-search__submit-button {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -240,8 +184,11 @@
       -ms-flex-pack: center;
           justify-content: center;
   height: 100%;
+  padding: 0;
+  border: none;
   text-align: center;
-  fill: var(--content);
+  background-color: transparent;
+  cursor: pointer;
 }
 .mfui-search__list-inner {
   -webkit-box-sizing: border-box;
@@ -291,6 +238,32 @@
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
+.mfui-search__highlighted-fragment {
+  font-weight: bold;
+}
+.mfui-search__notice {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 16px;
+}
+.mfui-search__notice_error {
+  color: var(--fury);
+}
+.mfui-search__notice_success {
+  color: var(--brandGreen);
+}
+.mfui-search__icons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100%;
+}
+.mfui-search_open {
+  z-index: 12;
+}
 .mfui-search_open .mfui-search__list {
   display: block;
   -webkit-animation-name: listAppear;
@@ -300,29 +273,123 @@
   -webkit-animation-timing-function: ease-in-out;
           animation-timing-function: ease-in-out;
 }
-.mfui-search_open {
-  z-index: 12;
+.mfui-search_type_textfield .mfui-search__control {
+  height: 60px;
+  padding: 0 16px 0 16px;
+  border-color: var(--spbSky2);
+  border-radius: 12px;
+  background-color: var(--base);
 }
-.mfui-search_disabled .mfui-search__control {
+.mfui-search_type_textfield .mfui-search__control:hover {
+  border-color: var(--content);
+}
+.mfui-search_type_textfield .mfui-search__label {
+  top: 17px;
+}
+.mfui-search_type_textfield .mfui-search__field_filled + .mfui-search__label,
+.mfui-search_type_textfield .mfui-search__field:focus + .mfui-search__label {
+  -webkit-transform: scale(0.8) translate(-12.5%, -75%);
+          transform: scale(0.8) translate(-12.5%, -75%);
+}
+.mfui-search_type_textfield .mfui-search__field_labeled {
+  padding-top: 22px;
+}
+.mfui-search_type_textfield .mfui-search__submit-icon {
+  width: 32px;
+  height: 32px;
+  fill: var(--content);
+}
+.mfui-search_type_textfield.mfui-search_disabled .mfui-search__control {
   border-color: var(--spbSky1);
   background-color: var(--spbSky1);
-  cursor: default;
-  pointer-events: none;
 }
-.mfui-search_disabled .mfui-search__icon {
+.mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon {
   opacity: 0.5;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
-.mfui-search__highlighted-fragment {
-  font-weight: bold;
+.mfui-search_type_compact .mfui-search__control {
+  height: 40px;
+  padding: 0 12px;
+  border-color: var(--spbSky0);
+  border-radius: 24px;
+  background-color: var(--spbSky0);
+  -webkit-transition: background-color, border-color 0.3s;
+  transition: background-color, border-color 0.3s;
 }
-.mfui-search__notice {
-  margin-top: 4px;
-  font-size: 12px;
-  line-height: 16px;
+.mfui-search_type_compact .mfui-search__control:hover {
+  background-color: var(--spbSky1);
 }
-.mfui-search__notice_error {
-  color: var(--fury);
+.mfui-search_type_compact .mfui-search__field {
+  height: 100%;
+  padding: 8px 0 8px 12px;
 }
-.mfui-search__notice_success {
-  color: var(--brandGreen);
+.mfui-search_type_compact .mfui-search__label {
+  top: 50%;
+  left: 44px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.mfui-search_type_compact .mfui-search__field_filled + .mfui-search__label,
+.mfui-search_type_compact .mfui-search__field:focus + .mfui-search__label {
+  opacity: 0;
+}
+.mfui-search_type_compact .mfui-search__submit-icon {
+  width: 20px;
+  height: 20px;
+  fill: var(--spbSky3);
+}
+.mfui-search_type_compact .mfui-search__clear {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 12px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.mfui-search_type_compact .mfui-search__clear-icon {
+  width: 24px;
+  height: 24px;
+  fill: var(--spbSky3);
+}
+.mfui-search_type_compact .mfui-search__clear-icon:hover {
+  fill: var(--content);
+}
+.mfui-search_type_compact .mfui-search__clear-icon:active {
+  fill: var(--buttonDown);
+}
+.mfui-search_type_compact.mfui-search_open .mfui-search__control {
+  background-color: var(--spbSky1);
+}
+.mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon {
+  fill: var(--content);
+}
+.mfui-search_disabled .mfui-search__control {
+  cursor: default;
+  pointer-events: none;
+}
+.mfui-search_disabled .mfui-search__submit-icon {
+  opacity: 0.5;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mfui-search_error .mfui-search__control {
+  border-color: var(--fury);
+}
+.mfui-search_success .mfui-search__control {
+  border-color: var(--brandGreen);
 }

package/dist/lib/components/Search/Search.d.ts

@@ -31,6 +31,8 @@ export interface ISearchProps {
     };
     /** Значение */
     value?: string;
+    /** Вид отображения */
+    type?: 'textfield' | 'compact';
     /** Заголовок поля */
     label?: string;
     /** HTML идентификатор поля поиска */
@@ -61,6 +63,8 @@ export interface ISearchProps {
         control?: string;
         icon?: string;
     };
+    /** Отображение загрузки */
+    showLoader?: boolean;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */

package/dist/lib/components/Search/Search.js

@@ -33,12 +33,22 @@ var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
+var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var SearchIcon16 = function SearchIcon16(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M17 9a7 7 0 10-3.32 6l2.49 3 .77-.64-2.47-3A7 7 0 0017 9zM4 9a6 6 0 116 6 6 6 0 01-6-6z"
+  }));
+};
+
 var SearchIcon = function SearchIcon(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -47,6 +57,16 @@ var SearchIcon = function SearchIcon(props) {
   }));
 };
 
+var ClearIcon = function ClearIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    className: "ClearIcon__st0",
+    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
+  }));
+};
+
+var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -78,6 +98,9 @@ var Search = function Search(_ref) {
       noticeText = _ref.noticeText,
       className = _ref.className,
       classes = _ref.classes,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'textfield' : _ref$type,
+      showLoader = _ref.showLoader,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onBlur = _ref.onBlur,
@@ -104,6 +127,13 @@ var Search = function Search(_ref) {
 
   var highlightedItem = _react["default"].useRef(null);
 
+  var fieldNode = _react["default"].useRef(null);
+
+  var isCompact = type === 'compact';
+  var showClearIcon = isCompact && !!searchQuery;
+  var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
+  var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
+
   var handleChange = _react["default"].useCallback(function (e) {
     var _e$target$value = e.target.value,
         inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -181,6 +211,14 @@ var Search = function Search(_ref) {
     return false;
   }, [activeIndex, items, handleItemSubmit, handleSearchSubmit]);
 
+  var handleClearClick = function handleClearClick() {
+    var _a;
+
+    onChange === null || onChange === void 0 ? void 0 : onChange('');
+    setSearchQuery('');
+    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+
   _react["default"].useEffect(function () {
     return setSearchQuery(value);
   }, [value]);
@@ -209,7 +247,7 @@ var Search = function Search(_ref) {
   }, [activeIndex, items]);
 
   var highlightString = function highlightString(title) {
-    var query = searchQuery.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
+    var query = searchQuery.replace(SEARCH_QUERY_REGEX, function (w) {
       return "\\".concat(w);
     });
     var stringFragments = title.split(RegExp("(".concat(query, ")"), 'ig'));
@@ -222,26 +260,67 @@ var Search = function Search(_ref) {
     }));
   };
 
+  var renderSubmitButton = function renderSubmitButton() {
+    var Icon = isCompact ? SearchIcon16 : SearchIcon;
+    return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
+      className: cn('submit-button'),
+      onClick: handleSearchSubmit,
+      type: "button"
+    }), /*#__PURE__*/_react["default"].createElement(Icon, {
+      className: cn('submit-icon', [classes === null || classes === void 0 ? void 0 : classes.icon])
+    }));
+  };
+
+  var renderClearButton = function renderClearButton() {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: handleClearClick,
+      type: "button",
+      className: cn('clear')
+    }, /*#__PURE__*/_react["default"].createElement(ClearIcon, {
+      className: cn('clear-icon')
+    }));
+  };
+
+  var renderList = function renderList() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('list')
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('list-inner')
+    }, items.map(function (_ref2, i) {
+      var itemValue = _ref2.value,
+          searchView = _ref2.searchView,
+          _ref2$paddings = _ref2.paddings,
+          paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+        ref: activeIndex === i ? highlightedItem : null,
+        className: cn('list-item', {
+          active: activeIndex === i,
+          paddings: paddings
+        }),
+        onMouseDown: handleSelectSubmit(i),
+        onMouseEnter: handleHoverItem(i),
+        key: i
+      }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1), {
+        className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
+      }), searchView || highlightString(itemValue)));
+    })));
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       open: isFocused,
-      disabled: disabled
-    }, [className])
-  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
-    className: cn('control', {
+      disabled: disabled,
+      type: type,
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
-    }, [classes === null || classes === void 0 ? void 0 : classes.control])
-  }), /*#__PURE__*/_react["default"].createElement("label", {
-    className: cn('search-wrapper', {
-      labeled: !!label,
-      'no-label': !label
-    }),
-    htmlFor: searchId
-  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
+    }, [className])
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
+    className: cn('control', [classes === null || classes === void 0 ? void 0 : classes.control])
+  }), isCompact && renderSubmitButton(), /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
     id: searchId,
-    className: cn('search-field', {
-      filled: !!searchQuery
+    className: cn('field', {
+      filled: !!searchQuery,
+      labeled: !!label
     }, [classes === null || classes === void 0 ? void 0 : classes.input]),
     placeholder: placeholder,
     value: searchQuery,
@@ -252,38 +331,20 @@ var Search = function Search(_ref) {
     onClick: handleClick,
     disabled: disabled,
     type: "text",
-    autoComplete: "off"
-  })), label && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label])
+    autoComplete: "off",
+    ref: fieldNode
+  })), label && /*#__PURE__*/_react["default"].createElement("label", {
+    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
+    htmlFor: searchId
   }, label, required && /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('require-mark')
-  }, "*"))), !hideIcon && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
-    className: cn('icon-box'),
-    onClick: handleSearchSubmit
-  }), /*#__PURE__*/_react["default"].createElement(SearchIcon, {
-    className: cn('icon', [classes === null || classes === void 0 ? void 0 : classes.icon])
-  })), !!items.length && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('list')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('list-inner')
-  }, items.map(function (_ref2, i) {
-    var itemValue = _ref2.value,
-        searchView = _ref2.searchView,
-        _ref2$paddings = _ref2.paddings,
-        paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
-    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
-      ref: activeIndex === i ? highlightedItem : null,
-      className: cn('list-item', {
-        active: activeIndex === i,
-        paddings: paddings
-      }),
-      onMouseDown: handleSelectSubmit(i),
-      onMouseEnter: handleHoverItem(i),
-      key: i
-    }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1), {
-      className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
-    }), searchView || highlightString(itemValue)));
-  })))), noticeText && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
+  }, "*")), showAdditionalElement && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('icons')
+  }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/_react["default"].createElement(_Preloader["default"], {
+    delay: false,
+    className: cn('loader'),
+    sizeAll: "small"
+  }), showClearIcon && renderClearButton()), !!items.length && renderList()), noticeText && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
     className: cn('notice', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.14.0",
+  "version": "4.14.2",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.7.0",
+    "@megafon/ui-icons": "^2.8.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "b9b0a048d2faba323bebaddbf302aed8e0894506"
+  "gitHead": "43725eddf6f23f91c95f9f7c932e9b9589a4af04"
 }