@megafon/ui-core 5.4.6 → 5.6.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 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)
+
+
+### Bug Fixes
+
+* **snackbar:** fix useSwipe logic ([29b1187](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/29b1187fdcb065d91123a85e4ee2fde4bd9ab077))
+
+
+### Features
+
+* **button:** add icon to text for extra-small and small sizes ([170b606](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/170b60639863a4b933db5a9c1072e3d1f15f8050))
+* **chip:** create component Chip ([268d329](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/268d329713468e78c111675f0fbe8061b6c91d4c))
+* **tabs:** add new prop for panel class ([0a5d47e](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0a5d47e46a618cec32f62ab94b9d0f9ee769d029))
+
+
+
+
+
 ## [5.4.6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.5...@megafon/ui-core@5.4.6) (2024-01-30)
 
 **Note:** Version bump only for package @megafon/ui-core

package/dist/es/components/Button/Button.css

@@ -40,10 +40,14 @@
   line-height: 14px;
 }
 .mfui-button_size-all_extra-small .mfui-button__icon,
-.mfui-button_size-all_extra-small .mfui-button__icon-arrow {
+.mfui-button_size-all_extra-small .mfui-button__icon-arrow,
+.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 20px;
   height: 20px;
 }
+.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+  margin-right: 2px;
+}
 .mfui-button_size-all_small {
   min-width: 40px;
   height: 40px;
@@ -54,12 +58,17 @@
   width: 20px;
   height: 20px;
 }
+.mfui-button_size-all_small.mfui-button_content-type_icon-text .mfui-button__icon {
+  width: 32px;
+  height: 32px;
+}
 .mfui-button_size-all_medium {
   min-width: 52px;
   height: 52px;
 }
 .mfui-button_size-all_medium .mfui-button__icon,
-.mfui-button_size-all_medium .mfui-button__icon-arrow {
+.mfui-button_size-all_medium .mfui-button__icon-arrow,
+.mfui-button_size-all_medium.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 32px;
   height: 32px;
 }
@@ -68,7 +77,8 @@
   height: 60px;
 }
 .mfui-button_size-all_large .mfui-button__icon,
-.mfui-button_size-all_large .mfui-button__icon-arrow {
+.mfui-button_size-all_large .mfui-button__icon-arrow,
+.mfui-button_size-all_large.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 32px;
   height: 32px;
 }
@@ -99,10 +109,14 @@
     line-height: 14px;
   }
   .mfui-button_size-desktop_extra-small .mfui-button__icon,
-  .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-desktop_small {
     min-width: 40px;
     height: 40px;
@@ -113,12 +127,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-desktop_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-desktop_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-desktop_medium .mfui-button__icon,
-  .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_medium .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -127,7 +146,8 @@
     height: 60px;
   }
   .mfui-button_size-desktop_large .mfui-button__icon,
-  .mfui-button_size-desktop_large .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_large .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -159,10 +179,14 @@
     line-height: 14px;
   }
   .mfui-button_size-wide_extra-small .mfui-button__icon,
-  .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-wide_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-wide_small {
     min-width: 40px;
     height: 40px;
@@ -173,12 +197,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-wide_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-wide_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-wide_medium .mfui-button__icon,
-  .mfui-button_size-wide_medium .mfui-button__icon-arrow {
+  .mfui-button_size-wide_medium .mfui-button__icon-arrow,
+  .mfui-button_size-wide_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -187,7 +216,8 @@
     height: 60px;
   }
   .mfui-button_size-wide_large .mfui-button__icon,
-  .mfui-button_size-wide_large .mfui-button__icon-arrow {
+  .mfui-button_size-wide_large .mfui-button__icon-arrow,
+  .mfui-button_size-wide_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -219,10 +249,14 @@
     line-height: 14px;
   }
   .mfui-button_size-tablet_extra-small .mfui-button__icon,
-  .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-tablet_small {
     min-width: 40px;
     height: 40px;
@@ -233,12 +267,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-tablet_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-tablet_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-tablet_medium .mfui-button__icon,
-  .mfui-button_size-tablet_medium .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_medium .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -247,7 +286,8 @@
     height: 60px;
   }
   .mfui-button_size-tablet_large .mfui-button__icon,
-  .mfui-button_size-tablet_large .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_large .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -279,10 +319,14 @@
     line-height: 14px;
   }
   .mfui-button_size-mobile_extra-small .mfui-button__icon,
-  .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-mobile_small {
     min-width: 40px;
     height: 40px;
@@ -293,12 +337,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-mobile_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-mobile_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-mobile_medium .mfui-button__icon,
-  .mfui-button_size-mobile_medium .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_medium .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -307,7 +356,8 @@
     height: 60px;
   }
   .mfui-button_size-mobile_large .mfui-button__icon,
-  .mfui-button_size-mobile_large .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_large .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -395,14 +445,8 @@
   padding: 0;
 }
 .mfui-button_content-type_icon-text .mfui-button__icon {
-  width: 32px;
-  height: 32px;
   margin-right: 4px;
 }
-.mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon,
-.mfui-button_content-type_icon-text.mfui-button_size-all_extra-small .mfui-button__icon {
-  display: none;
-}
 .mfui-button_type_text.mfui-button_theme_green {
   width: -webkit-fit-content;
   width: -moz-fit-content;

package/dist/es/components/Calendar/Calendar.js

@@ -207,6 +207,7 @@ var Calendar = function Calendar(_ref) {
   };
 
   var renderDays = function renderDays(days) {
+    var correctionIndex = 0;
     return days.map(function (day, index) {
       if (_typeof(day) === 'object') {
         var date = day.date,
@@ -220,7 +221,7 @@ var Calendar = function Calendar(_ref) {
 
         return /*#__PURE__*/React.createElement(Day, _extends({
           dataAttrs: {
-            root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1))
+            root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1 - correctionIndex))
           },
           date: date,
           key: formatDate(date, 'dd-MM-yyyy'),
@@ -233,6 +234,7 @@ var Calendar = function Calendar(_ref) {
         }));
       }
 
+      correctionIndex += 1;
       return /*#__PURE__*/React.createElement("div", {
         key: index + day
       });

package/dist/es/components/Calendar/components/Month/Month.js

@@ -3,8 +3,8 @@ import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.map.js";
 import React from 'react';
 import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import "./Month.css";
 import PropTypes from 'prop-types';
+import "./Month.css";
 
 var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({

package/dist/es/components/Chip/Chip.css

@@ -0,0 +1,111 @@
+.mfui-chip {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  padding: 8px 20px;
+  border: none;
+  border-radius: 20px;
+  overflow: hidden;
+  color: var(--content);
+  text-align: center;
+  text-decoration: none;
+  background-color: var(--spbSky0);
+  outline: none;
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s, color 0.3s;
+  transition: background-color 0.3s, color 0.3s;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.mfui-chip svg {
+  -webkit-transition: fill 0.3s;
+  transition: fill 0.3s;
+  fill: var(--content);
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip {
+    padding: 4px 12px;
+  }
+}
+.mfui-chip:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-chip_disabled,
+.mfui-chip_disabled:hover {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+  cursor: default;
+  pointer-events: none;
+}
+.mfui-chip_disabled svg,
+.mfui-chip_disabled:hover svg {
+  fill: var(--spbSky3);
+}
+.mfui-chip_checked,
+.mfui-chip_checked:hover {
+  color: var(--stcWhite);
+  background-color: var(--reflexBlue);
+}
+.mfui-chip_checked svg,
+.mfui-chip_checked:hover svg {
+  fill: var(--stcWhite);
+}
+.mfui-chip_checked.mfui-chip_color_black,
+.mfui-chip_checked.mfui-chip_color_black:hover {
+  color: var(--base);
+  background-color: var(--content);
+}
+.mfui-chip_checked.mfui-chip_color_black svg,
+.mfui-chip_checked.mfui-chip_color_black:hover svg {
+  fill: var(--base);
+}
+.mfui-chip_with-icon {
+  padding-left: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip_with-icon {
+    padding-left: 8px;
+  }
+}
+.mfui-chip__inner {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  white-space: nowrap;
+}
+.mfui-chip__icon {
+  display: block;
+  width: 20px;
+  min-width: 20px;
+  max-height: 20px;
+  margin-right: 6px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__icon {
+    margin-right: 4px;
+  }
+}
+.mfui-chip__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,36 @@
+import React, { Ref } from 'react';
+import './Chip.less';
+export interface IChipProps {
+    /** Идентификатор */
+    id: number | string;
+    /** Набор цветов для компонента */
+    color?: 'default' | 'black';
+    /** Отображение в отмеченном (зажатом) состоянии */
+    checked?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Обработчик нажатия */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number | string) => void;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        inner?: string;
+        icon?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+        icon?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: Ref<HTMLButtonElement>;
+}
+declare const Chip: React.FC<IChipProps>;
+export default Chip;

package/dist/es/components/Chip/Chip.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./Chip.css";
+var cn = cnCreate('mfui-chip');
+
+var Chip = function Chip(_ref) {
+  var id = _ref.id,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      icon = _ref.icon,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef;
+  var handleClick = React.useCallback(function (e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
+  }, [onClick, id]);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: cn({
+      color: color,
+      checked: checked,
+      disabled: disabled,
+      'with-icon': !!icon
+    }, [className, classes.root])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    disabled: disabled,
+    onClick: handleClick,
+    ref: rootRef
+  }), !!icon && /*#__PURE__*/React.createElement("span", _extends({
+    className: cn('icon', [classes.icon])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", _extends({
+    className: cn('inner', [classes.inner])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children));
+};
+
+Chip.propTypes = {
+  id: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(['default', 'black']),
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  icon: PropTypes.element,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+export default Chip;

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;