@megafon/ui-core 5.5.0 → 5.6.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.6.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.5.0...@megafon/ui-core@5.6.0) (2024-02-20)
+
+
+### Features
+
+* **search:** added results for not found ([1a62ab7](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/1a62ab78071e2b58235d93f403512a987a3c5ce1))
+
+
+
+
+
 # [5.5.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.6...@megafon/ui-core@5.5.0) (2024-02-13)
 
 

package/dist/es/components/Search/Search.css

@@ -213,10 +213,43 @@
   padding-right: 12px;
   padding-left: 12px;
 }
-.mfui-search__list-item_active {
+.mfui-search__popular-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 48px;
+  padding-right: 16px;
+  padding-left: 12px;
+  border-radius: 16px;
+  text-decoration: none;
+  background-color: var(--base);
+  cursor: pointer;
+}
+.mfui-search__popular-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+}
+.mfui-search__list-item_active,
+.mfui-search__popular-item_active {
   background-color: var(--spbSky0);
 }
-.mfui-search__item-title {
+.mfui-search__item-title,
+.mfui-search__popular-item-title {
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -224,7 +257,8 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.mfui-search__item-title:after {
+.mfui-search__item-title:after,
+.mfui-search__popular-item-title:after {
   content: '';
   position: absolute;
   top: 0;
@@ -234,7 +268,8 @@
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
-.mfui-search__list-item_active .mfui-search__item-title:after {
+.mfui-search__list-item_active .mfui-search__item-title:after,
+.mfui-search__popular-item_active .mfui-search__popular-item-title:after {
   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));
 }
@@ -261,6 +296,23 @@
           align-items: center;
   height: 100%;
 }
+.mfui-search__list_not-found {
+  cursor: default;
+}
+.mfui-search__not-found-text {
+  font-family: inherit;
+  padding: 12px 32px;
+  color: var(--spbSky3);
+  background-color: var(--base);
+}
+.mfui-search__not-found-text_show-popular {
+  padding: 0 0 16px 0;
+  border-bottom: 1px solid var(--spbSky2);
+}
+.mfui-search__popular-title {
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
 .mfui-search_open {
   z-index: 12;
 }

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

@@ -18,6 +18,14 @@ export declare type SearchItem = {
     /** Размер горизонтальных отступов элемента */
     paddings?: typeof SearchItemsPaddings[keyof typeof SearchItemsPaddings];
 };
+export declare type PopularItem = {
+    /** Название элемента */
+    title: string;
+    /** Ссылка элемента */
+    href?: string;
+    /** Иконка элемента */
+    icon?: JSX.Element;
+};
 export interface ISearchProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -28,6 +36,7 @@ export interface ISearchProps {
         item?: Record<string, string>;
         itemTitle?: Record<string, string>;
         notice?: Record<string, string>;
+        popularItem?: Record<string, string>;
     };
     /** Значение */
     value?: string;
@@ -63,9 +72,20 @@ export interface ISearchProps {
         control?: string;
         icon?: string;
         submitButton?: string;
+        textNotFound?: string;
+        popularTitle?: string;
+        popularItem?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;
+    /** Выводить результат, когда нет результатов поиска */
+    showNotFound?: boolean;
+    /** Текст, когда нет результатов поиска */
+    textNotFound?: string;
+    /** Популярные элементы (max 5) */
+    popularItems?: PopularItem[];
+    /** Заголовок перед популярными элементами */
+    popularTitle?: string;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */
@@ -74,6 +94,8 @@ export interface ISearchProps {
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /** Обработчик входа в фокус */
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик нажатия на популярный элемент */
+    onPopularItemClick?: (popularItemValue?: string) => void;
 }
 declare const Search: React.FC<ISearchProps>;
 export default Search;

package/dist/es/components/Search/Search.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.string.split.js";
@@ -11,6 +12,8 @@ import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
+import Caption from "../Caption/Caption";
+import Header from "../Header/Header";
 import Preloader from "../Preloader/Preloader";
 import "./Search.css";
 
@@ -40,6 +43,7 @@ var ClearIcon = function ClearIcon(props) {
 };
 
 var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
+var MAX_POPULAR_ITEMS_LENGTH = 5;
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -72,10 +76,16 @@ var Search = function Search(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'textfield' : _ref$type,
       showLoader = _ref.showLoader,
+      showNotFound = _ref.showNotFound,
+      textNotFound = _ref.textNotFound,
+      _ref$popularItems = _ref.popularItems,
+      popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
+      popularTitle = _ref.popularTitle,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus;
+      onFocus = _ref.onFocus,
+      onPopularItemClick = _ref.onPopularItemClick;
 
   var _React$useState = React.useState(value),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -92,15 +102,24 @@ var Search = function Search(_ref) {
       isFocused = _React$useState6[0],
       setFocus = _React$useState6[1];
 
+  var _React$useState7 = React.useState(-1),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      popularActiveIndex = _React$useState8[0],
+      setPopularActiveIndex = _React$useState8[1];
+
   var debouncedOnChange = React.useRef(debounce(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
   var highlightedItem = React.useRef(null);
   var fieldNode = React.useRef(null);
+  var correctPopularItems = React.useMemo(function () {
+    return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
+  }, [popularItems]);
   var isCompact = type === 'compact';
   var showClearIcon = isCompact && !!searchQuery;
   var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
   var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
+  var showPopularItems = !!correctPopularItems.length;
   var handleChange = React.useCallback(function (e) {
     var _e$target$value = e.target.value,
         inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -120,6 +139,11 @@ var Search = function Search(_ref) {
       setActiveIndex(index);
     };
   }, []);
+  var handlePopularItemHover = React.useCallback(function (index) {
+    return function () {
+      setPopularActiveIndex(index);
+    };
+  }, []);
   var handleSearchSubmit = React.useCallback(function () {
     onSubmit && searchQuery && onSubmit(searchQuery);
   }, [searchQuery, onSubmit]);
@@ -149,26 +173,90 @@ var Search = function Search(_ref) {
       setActiveIndex(-1);
     }
   }, [activeIndex]);
-  var handleKeyDown = React.useCallback(function (e) {
-    if (e.key === 'ArrowDown' && activeIndex < items.length - 1) {
-      setActiveIndex(function (index) {
-        return index + 1;
-      });
-      e.preventDefault();
-    } else if (e.key === 'ArrowUp' && activeIndex > -1) {
-      setActiveIndex(function (index) {
-        return index - 1;
-      });
-      e.preventDefault();
-    } else if (e.key === 'Enter' && activeIndex > -1) {
-      handleItemSubmit(activeIndex);
-      e.preventDefault();
-    } else if (e.key === 'Enter' && activeIndex === -1) {
-      handleSearchSubmit();
+  var handlePopularItemMouseDown = React.useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var handlePopularItemMouseUp = React.useCallback(function () {
+    var _a;
+
+    var chosenValue = popularItems[popularActiveIndex].title;
+    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
+    onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
+  }, [onPopularItemClick, popularActiveIndex, popularItems]);
+  var handleKeyDownPopularItems = React.useCallback(function (e) {
+    var _a;
+
+    switch (true) {
+      case e.key === 'ArrowDown' && popularActiveIndex < popularItems.length - 1:
+        setPopularActiveIndex(function (index) {
+          return index + 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'ArrowUp' && popularActiveIndex > -1:
+        setPopularActiveIndex(function (index) {
+          return index - 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && popularActiveIndex > -1:
+        {
+          var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
+          handlePopularItemMouseUp();
+
+          if (currentHref) {
+            window.location.href = currentHref;
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+
+    return false;
+  }, [popularActiveIndex, popularItems, handlePopularItemMouseUp]);
+  var handleKeyDownItems = React.useCallback(function (e) {
+    switch (true) {
+      case e.key === 'ArrowDown' && activeIndex < items.length - 1:
+        setActiveIndex(function (index) {
+          return index + 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'ArrowUp' && activeIndex > -1:
+        setActiveIndex(function (index) {
+          return index - 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && activeIndex > -1:
+        handleItemSubmit(activeIndex);
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && activeIndex === -1:
+        handleSearchSubmit();
+        break;
+
+      default:
+        break;
     }
 
     return false;
-  }, [activeIndex, items, handleItemSubmit, handleSearchSubmit]);
+  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
+  var handleKeyDown = React.useCallback(function (e) {
+    if (showNotFound && showPopularItems) {
+      return handleKeyDownPopularItems(e);
+    }
+
+    return handleKeyDownItems(e);
+  }, [handleKeyDownItems, handleKeyDownPopularItems, showNotFound, showPopularItems]);
 
   var handleClearClick = function handleClearClick() {
     var _a; // TODO: После обновления TS до 4 версии, установить @types/lodash.debounce и убрать disable
@@ -266,6 +354,53 @@ var Search = function Search(_ref) {
     })));
   };
 
+  var renderPopularItems = function renderPopularItems() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('popular-list')
+    }, correctPopularItems.map(function (_ref3, i) {
+      var title = _ref3.title,
+          href = _ref3.href,
+          icon = _ref3.icon;
+      var Elem = href ? 'a' : 'div';
+      return /*#__PURE__*/React.createElement(Elem, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popularItem, i + 1), {
+        className: cn('popular-item', {
+          active: popularActiveIndex === i
+        }, [classes === null || classes === void 0 ? void 0 : classes.popularItem]),
+        key: i,
+        href: href,
+        onMouseDown: handlePopularItemMouseDown,
+        onMouseUp: handlePopularItemMouseUp,
+        onMouseEnter: handlePopularItemHover(i)
+      }), icon && /*#__PURE__*/React.createElement("span", {
+        className: cn('popular-icon')
+      }, icon), /*#__PURE__*/React.createElement(Header, {
+        className: cn('popular-item-title'),
+        as: "h5"
+      }, title));
+    }));
+  };
+
+  var renderNotFound = function renderNotFound() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('list', {
+        'not-found': true
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('list-inner')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('not-found-text', {
+        'show-popular': showPopularItems
+      }, [classes === null || classes === void 0 ? void 0 : classes.textNotFound])
+    }, textNotFound || 'Ничего не нашлось'), showPopularItems && /*#__PURE__*/React.createElement("div", {
+      className: cn('popular-wrap')
+    }, /*#__PURE__*/React.createElement(Caption, {
+      className: cn('popular-title', [classes === null || classes === void 0 ? void 0 : classes.popularTitle]),
+      variant: "medium",
+      color: "gray",
+      hasMargin: false
+    }, popularTitle || 'Популярные действия'), renderPopularItems())));
+  };
+
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       open: isFocused,
@@ -304,7 +439,7 @@ var Search = function Search(_ref) {
     delay: false,
     className: cn('loader'),
     sizeAll: "small"
-  }), showClearIcon && renderClearButton()), !!items.length && renderList()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
+  }), showClearIcon && renderClearButton()), !!items.length && !showNotFound && renderList(), showNotFound && renderNotFound()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
     className: cn('notice', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
@@ -320,7 +455,8 @@ Search.propTypes = {
     submit: PropTypes.objectOf(PropTypes.string.isRequired),
     item: PropTypes.objectOf(PropTypes.string.isRequired),
     itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
-    notice: PropTypes.objectOf(PropTypes.string.isRequired)
+    notice: PropTypes.objectOf(PropTypes.string.isRequired),
+    popularItem: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   value: PropTypes.string,
   label: PropTypes.string,
@@ -343,11 +479,23 @@ Search.propTypes = {
     input: PropTypes.string,
     listItemTitle: PropTypes.string,
     control: PropTypes.string,
-    icon: PropTypes.string
+    icon: PropTypes.string,
+    textNotFound: PropTypes.string,
+    popularTitle: PropTypes.string,
+    popularItem: PropTypes.string
   }),
+  showNotFound: PropTypes.bool,
+  textNotFound: PropTypes.string,
+  popularItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    icon: PropTypes.element
+  }).isRequired),
+  popularTitle: PropTypes.string,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
   onBlur: PropTypes.func,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  onPopularItemClick: PropTypes.func
 };
 export default Search;

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

@@ -213,10 +213,43 @@
   padding-right: 12px;
   padding-left: 12px;
 }
-.mfui-search__list-item_active {
+.mfui-search__popular-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 48px;
+  padding-right: 16px;
+  padding-left: 12px;
+  border-radius: 16px;
+  text-decoration: none;
+  background-color: var(--base);
+  cursor: pointer;
+}
+.mfui-search__popular-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-right: 16px;
+}
+.mfui-search__list-item_active,
+.mfui-search__popular-item_active {
   background-color: var(--spbSky0);
 }
-.mfui-search__item-title {
+.mfui-search__item-title,
+.mfui-search__popular-item-title {
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -224,7 +257,8 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.mfui-search__item-title:after {
+.mfui-search__item-title:after,
+.mfui-search__popular-item-title:after {
   content: '';
   position: absolute;
   top: 0;
@@ -234,7 +268,8 @@
   background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
   background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
-.mfui-search__list-item_active .mfui-search__item-title:after {
+.mfui-search__list-item_active .mfui-search__item-title:after,
+.mfui-search__popular-item_active .mfui-search__popular-item-title:after {
   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));
 }
@@ -261,6 +296,23 @@
           align-items: center;
   height: 100%;
 }
+.mfui-search__list_not-found {
+  cursor: default;
+}
+.mfui-search__not-found-text {
+  font-family: inherit;
+  padding: 12px 32px;
+  color: var(--spbSky3);
+  background-color: var(--base);
+}
+.mfui-search__not-found-text_show-popular {
+  padding: 0 0 16px 0;
+  border-bottom: 1px solid var(--spbSky2);
+}
+.mfui-search__popular-title {
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
 .mfui-search_open {
   z-index: 12;
 }

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

@@ -18,6 +18,14 @@ export declare type SearchItem = {
     /** Размер горизонтальных отступов элемента */
     paddings?: typeof SearchItemsPaddings[keyof typeof SearchItemsPaddings];
 };
+export declare type PopularItem = {
+    /** Название элемента */
+    title: string;
+    /** Ссылка элемента */
+    href?: string;
+    /** Иконка элемента */
+    icon?: JSX.Element;
+};
 export interface ISearchProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -28,6 +36,7 @@ export interface ISearchProps {
         item?: Record<string, string>;
         itemTitle?: Record<string, string>;
         notice?: Record<string, string>;
+        popularItem?: Record<string, string>;
     };
     /** Значение */
     value?: string;
@@ -63,9 +72,20 @@ export interface ISearchProps {
         control?: string;
         icon?: string;
         submitButton?: string;
+        textNotFound?: string;
+        popularTitle?: string;
+        popularItem?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;
+    /** Выводить результат, когда нет результатов поиска */
+    showNotFound?: boolean;
+    /** Текст, когда нет результатов поиска */
+    textNotFound?: string;
+    /** Популярные элементы (max 5) */
+    popularItems?: PopularItem[];
+    /** Заголовок перед популярными элементами */
+    popularTitle?: string;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */
@@ -74,6 +94,8 @@ export interface ISearchProps {
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /** Обработчик входа в фокус */
     onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик нажатия на популярный элемент */
+    onPopularItemClick?: (popularItemValue?: string) => void;
 }
 declare const Search: React.FC<ISearchProps>;
 export default Search;

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

@@ -11,6 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+require("core-js/modules/es.array.slice.js");
+
 require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
@@ -33,6 +35,10 @@ var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+
+var _Header = _interopRequireDefault(require("../Header/Header"));
+
 var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -67,6 +73,7 @@ var ClearIcon = function ClearIcon(props) {
 };
 
 var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
+var MAX_POPULAR_ITEMS_LENGTH = 5;
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -101,10 +108,16 @@ var Search = function Search(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'textfield' : _ref$type,
       showLoader = _ref.showLoader,
+      showNotFound = _ref.showNotFound,
+      textNotFound = _ref.textNotFound,
+      _ref$popularItems = _ref.popularItems,
+      popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
+      popularTitle = _ref.popularTitle,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus;
+      onFocus = _ref.onFocus,
+      onPopularItemClick = _ref.onPopularItemClick;
 
   var _React$useState = _react["default"].useState(value),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -121,6 +134,11 @@ var Search = function Search(_ref) {
       isFocused = _React$useState6[0],
       setFocus = _React$useState6[1];
 
+  var _React$useState7 = _react["default"].useState(-1),
+      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+      popularActiveIndex = _React$useState8[0],
+      setPopularActiveIndex = _React$useState8[1];
+
   var debouncedOnChange = _react["default"].useRef((0, _lodash["default"])(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
@@ -129,10 +147,15 @@ var Search = function Search(_ref) {
 
   var fieldNode = _react["default"].useRef(null);
 
+  var correctPopularItems = _react["default"].useMemo(function () {
+    return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
+  }, [popularItems]);
+
   var isCompact = type === 'compact';
   var showClearIcon = isCompact && !!searchQuery;
   var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
   var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
+  var showPopularItems = !!correctPopularItems.length;
 
   var handleChange = _react["default"].useCallback(function (e) {
     var _e$target$value = e.target.value,
@@ -155,6 +178,12 @@ var Search = function Search(_ref) {
     };
   }, []);
 
+  var handlePopularItemHover = _react["default"].useCallback(function (index) {
+    return function () {
+      setPopularActiveIndex(index);
+    };
+  }, []);
+
   var handleSearchSubmit = _react["default"].useCallback(function () {
     onSubmit && searchQuery && onSubmit(searchQuery);
   }, [searchQuery, onSubmit]);
@@ -190,26 +219,94 @@ var Search = function Search(_ref) {
     }
   }, [activeIndex]);
 
-  var handleKeyDown = _react["default"].useCallback(function (e) {
-    if (e.key === 'ArrowDown' && activeIndex < items.length - 1) {
-      setActiveIndex(function (index) {
-        return index + 1;
-      });
-      e.preventDefault();
-    } else if (e.key === 'ArrowUp' && activeIndex > -1) {
-      setActiveIndex(function (index) {
-        return index - 1;
-      });
-      e.preventDefault();
-    } else if (e.key === 'Enter' && activeIndex > -1) {
-      handleItemSubmit(activeIndex);
-      e.preventDefault();
-    } else if (e.key === 'Enter' && activeIndex === -1) {
-      handleSearchSubmit();
+  var handlePopularItemMouseDown = _react["default"].useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+
+  var handlePopularItemMouseUp = _react["default"].useCallback(function () {
+    var _a;
+
+    var chosenValue = popularItems[popularActiveIndex].title;
+    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
+    onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
+  }, [onPopularItemClick, popularActiveIndex, popularItems]);
+
+  var handleKeyDownPopularItems = _react["default"].useCallback(function (e) {
+    var _a;
+
+    switch (true) {
+      case e.key === 'ArrowDown' && popularActiveIndex < popularItems.length - 1:
+        setPopularActiveIndex(function (index) {
+          return index + 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'ArrowUp' && popularActiveIndex > -1:
+        setPopularActiveIndex(function (index) {
+          return index - 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && popularActiveIndex > -1:
+        {
+          var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
+          handlePopularItemMouseUp();
+
+          if (currentHref) {
+            window.location.href = currentHref;
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+
+    return false;
+  }, [popularActiveIndex, popularItems, handlePopularItemMouseUp]);
+
+  var handleKeyDownItems = _react["default"].useCallback(function (e) {
+    switch (true) {
+      case e.key === 'ArrowDown' && activeIndex < items.length - 1:
+        setActiveIndex(function (index) {
+          return index + 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'ArrowUp' && activeIndex > -1:
+        setActiveIndex(function (index) {
+          return index - 1;
+        });
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && activeIndex > -1:
+        handleItemSubmit(activeIndex);
+        e.preventDefault();
+        break;
+
+      case e.key === 'Enter' && activeIndex === -1:
+        handleSearchSubmit();
+        break;
+
+      default:
+        break;
     }
 
     return false;
-  }, [activeIndex, items, handleItemSubmit, handleSearchSubmit]);
+  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
+
+  var handleKeyDown = _react["default"].useCallback(function (e) {
+    if (showNotFound && showPopularItems) {
+      return handleKeyDownPopularItems(e);
+    }
+
+    return handleKeyDownItems(e);
+  }, [handleKeyDownItems, handleKeyDownPopularItems, showNotFound, showPopularItems]);
 
   var handleClearClick = function handleClearClick() {
     var _a; // TODO: После обновления TS до 4 версии, установить @types/lodash.debounce и убрать disable
@@ -310,6 +407,53 @@ var Search = function Search(_ref) {
     })));
   };
 
+  var renderPopularItems = function renderPopularItems() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('popular-list')
+    }, correctPopularItems.map(function (_ref3, i) {
+      var title = _ref3.title,
+          href = _ref3.href,
+          icon = _ref3.icon;
+      var Elem = href ? 'a' : 'div';
+      return /*#__PURE__*/_react["default"].createElement(Elem, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popularItem, i + 1), {
+        className: cn('popular-item', {
+          active: popularActiveIndex === i
+        }, [classes === null || classes === void 0 ? void 0 : classes.popularItem]),
+        key: i,
+        href: href,
+        onMouseDown: handlePopularItemMouseDown,
+        onMouseUp: handlePopularItemMouseUp,
+        onMouseEnter: handlePopularItemHover(i)
+      }), icon && /*#__PURE__*/_react["default"].createElement("span", {
+        className: cn('popular-icon')
+      }, icon), /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+        className: cn('popular-item-title'),
+        as: "h5"
+      }, title));
+    }));
+  };
+
+  var renderNotFound = function renderNotFound() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('list', {
+        'not-found': true
+      })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('list-inner')
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('not-found-text', {
+        'show-popular': showPopularItems
+      }, [classes === null || classes === void 0 ? void 0 : classes.textNotFound])
+    }, textNotFound || 'Ничего не нашлось'), showPopularItems && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('popular-wrap')
+    }, /*#__PURE__*/_react["default"].createElement(_Caption["default"], {
+      className: cn('popular-title', [classes === null || classes === void 0 ? void 0 : classes.popularTitle]),
+      variant: "medium",
+      color: "gray",
+      hasMargin: false
+    }, popularTitle || 'Популярные действия'), renderPopularItems())));
+  };
+
   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,
@@ -348,7 +492,7 @@ var Search = function Search(_ref) {
     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), {
+  }), showClearIcon && renderClearButton()), !!items.length && !showNotFound && renderList(), showNotFound && renderNotFound()), 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
@@ -364,7 +508,8 @@ Search.propTypes = {
     submit: PropTypes.objectOf(PropTypes.string.isRequired),
     item: PropTypes.objectOf(PropTypes.string.isRequired),
     itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
-    notice: PropTypes.objectOf(PropTypes.string.isRequired)
+    notice: PropTypes.objectOf(PropTypes.string.isRequired),
+    popularItem: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   value: PropTypes.string,
   label: PropTypes.string,
@@ -387,12 +532,24 @@ Search.propTypes = {
     input: PropTypes.string,
     listItemTitle: PropTypes.string,
     control: PropTypes.string,
-    icon: PropTypes.string
+    icon: PropTypes.string,
+    textNotFound: PropTypes.string,
+    popularTitle: PropTypes.string,
+    popularItem: PropTypes.string
   }),
+  showNotFound: PropTypes.bool,
+  textNotFound: PropTypes.string,
+  popularItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    icon: PropTypes.element
+  }).isRequired),
+  popularTitle: PropTypes.string,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
   onBlur: PropTypes.func,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  onPopularItemClick: PropTypes.func
 };
 var _default = Search;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "files": [
     "dist",
     "styles"
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "34e8243c981c8304b0d857a04dd0e25b1a7dc762"
+  "gitHead": "bbacc7ca8173754967c131090ce860c050b2ce36"
 }