@megafon/ui-core 6.4.4 → 6.6.0

package/dist/lib/components/Calendar/components/Day/Day.css

@@ -45,7 +45,10 @@
   width: 38px;
   height: 38px;
 }
-.mfui-v6-day_active-modern:hover:after {
+.mfui-v6-day_active-modern:hover:after,
+.mfui-v6-day_active-modern:focus:after {
+  width: 38px !important;
+  height: 38px !important;
   background-color: var(--brandGreen) !important;
 }
 .mfui-v6-day:not(:disabled):not(.mfui-v6-day_active):hover:after {
@@ -67,7 +70,7 @@
 .mfui-v6-day:not(:disabled):not(.mfui-v6-day_active):focus {
   color: var(--stcWhite);
 }
-.mfui-v6-day_active + .mfui-v6-day_active:before,
+.mfui-v6-day_active + .mfui-v6-day:not(.mfui-v6-day_monday).mfui-v6-day_active:before,
 .mfui-v6-day_between:hover + .mfui-v6-day:not(.mfui-v6-day_monday).mfui-v6-day_active:before {
   content: '';
   position: absolute;
@@ -137,7 +140,7 @@
   z-index: 99;
 }
 .mfui-v6-day_modern {
-  width: 38.29px;
+  width: 100%;
   height: 38px;
 }
 .mfui-v6-day_modern:not(:disabled):not(.mfui-v6-day_modern_active-modern):hover:after,
@@ -166,7 +169,7 @@
 .mfui-v6-day:not(:disabled):focus {
   color: var(--stcWhite);
 }
-.mfui-v6-day_active-modern + .mfui-v6-day_active-modern:before,
+.mfui-v6-day_active-modern + .mfui-v6-day:not(.mfui-v6-day_monday-modern).mfui-v6-day_active-modern:before,
 .mfui-v6-day_between-modern:hover + .mfui-v6-day:not(.mfui-v6-day_monday-modern).mfui-v6-day_active-modern:before {
   content: '';
   position: absolute;
@@ -186,7 +189,7 @@
   content: '';
   position: absolute;
   top: 0;
-  left: -28px;
+  left: -20px;
   z-index: -1;
   display: block;
   height: 38px;
@@ -197,7 +200,7 @@
   content: '';
   position: absolute;
   top: 0;
-  right: -18px;
+  right: -12px;
   z-index: -1;
   display: block;
   width: 45px;
@@ -210,7 +213,7 @@
 }
 .mfui-v6-day_sunday-modern:before,
 .mfui-v6-day_last-modern:before {
-  padding-left: 20px;
+  padding-left: 8px;
 }
 .mfui-v6-day_sunday-modern:after,
 .mfui-v6-day_last-modern:after {

package/dist/lib/components/Calendar/components/Month/Month.css

@@ -80,8 +80,8 @@ svg.mfui-v6-month__arrow_disabled {
   opacity: 0.5;
 }
 .mfui-v6-month_modern {
-  width: 344px;
-  padding: 0 0 24px;
+  width: 100%;
+  padding: 0 16px 24px 0;
 }
 .mfui-v6-month_modern .mfui-v6-month__header {
   display: -webkit-box;
@@ -90,7 +90,7 @@ svg.mfui-v6-month__arrow_disabled {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 328px;
+  width: 100%;
   margin-bottom: 16px;
   text-transform: capitalize;
 }
@@ -105,7 +105,7 @@ svg.mfui-v6-month__arrow_disabled {
 .mfui-v6-month_modern .mfui-v6-month__weekday-labels {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  width: 328px;
+  width: 100%;
   padding-bottom: 0;
   border-bottom: none;
   -webkit-column-gap: 8px;
@@ -126,7 +126,7 @@ svg.mfui-v6-month__arrow_disabled {
 .mfui-v6-month_modern .mfui-v6-month__days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  width: 328px;
+  width: 100%;
   margin-top: 10px;
   -webkit-column-gap: 0;
      -moz-column-gap: 0;

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

@@ -130,7 +130,7 @@
   color: var(--content);
   font-size: 100%;
   font-family: inherit;
-  line-height: 25px;
+  line-height: 24px;
   background-color: transparent;
   outline: none;
   -webkit-box-shadow: none;
@@ -140,6 +140,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  resize: none;
   caret-color: var(--brandGreen);
 }
 @media screen and (max-width: 767px) {
@@ -153,8 +154,10 @@
   display: block;
   overflow: auto;
   color: var(--spbSky3);
-  -webkit-transition-duration: 0.2s, 0.01s;
-          transition-duration: 0.2s, 0.01s;
+  -webkit-transition: scale 0.5s, top 0.01s, -webkit-transform 0.5s;
+  transition: scale 0.5s, top 0.01s, -webkit-transform 0.5s;
+  transition: transform 0.5s, scale 0.5s, top 0.01s;
+  transition: transform 0.5s, scale 0.5s, top 0.01s, -webkit-transform 0.5s;
   pointer-events: none;
   font-family: inherit;
   font-size: 15px;
@@ -338,6 +341,7 @@
   border-radius: 12px;
   background-color: var(--base);
 }
+.mfui-v6-search_type_textfield .mfui-v6-search__control_focused,
 .mfui-v6-search_type_textfield .mfui-v6-search__control:hover {
   border-color: var(--content);
 }
@@ -348,15 +352,54 @@
 .mfui-v6-search_type_textfield .mfui-v6-search__field:focus + .mfui-v6-search__label {
   -webkit-transform: scale(0.8) translate(-12.5%, -75%);
           transform: scale(0.8) translate(-12.5%, -75%);
+  -webkit-transition: scale 0.2s, top 0.01s, -webkit-transform 0.2s;
+  transition: scale 0.2s, top 0.01s, -webkit-transform 0.2s;
+  transition: transform 0.2s, scale 0.2s, top 0.01s;
+  transition: transform 0.2s, scale 0.2s, top 0.01s, -webkit-transform 0.2s;
 }
 .mfui-v6-search_type_textfield .mfui-v6-search__field_labeled {
-  padding-top: 22px;
+  padding-top: 25px;
+  padding-bottom: 9px;
 }
 .mfui-v6-search_type_textfield .mfui-v6-search__submit-icon {
   width: 32px;
   height: 32px;
   fill: var(--content);
 }
+.mfui-v6-search_textarea .mfui-v6-search__control {
+  height: auto;
+  min-height: 60px;
+}
+.mfui-v6-search_textarea .mfui-v6-search__field {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  max-height: 204px;
+  padding-top: 17px;
+  padding-bottom: 9px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+}
+.mfui-v6-search_textarea .mfui-v6-search__field_labeled {
+  padding-top: 25px;
+  padding-bottom: 9px;
+}
+.mfui-v6-search_textarea .mfui-v6-search__icons {
+  height: 58px;
+  margin-left: 8px;
+}
+.mfui-v6-search_textarea .mfui-v6-search__field_resized {
+  -webkit-transition: height 0.1s;
+  transition: height 0.1s;
+  will-change: height;
+}
+.mfui-v6-search__textarea-wrapper {
+  position: relative;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  width: 100%;
+  overflow: hidden;
+}
 .mfui-v6-search_type_textfield.mfui-v6-search_disabled .mfui-v6-search__control {
   border-color: var(--spbSky1);
   background-color: var(--spbSky1);
@@ -451,3 +494,32 @@
 .mfui-v6-search_success .mfui-v6-search__control {
   border-color: var(--brandGreen);
 }
+.mfui-v6-search__resizer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  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;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  width: 12px;
+  height: 12px;
+  padding: 4px;
+  cursor: ns-resize;
+}
+.mfui-v6-search__resizer svg {
+  -webkit-transition: stroke 0.3s;
+  transition: stroke 0.3s;
+  stroke: var(--spbSky2);
+}
+.mfui-v6-search__resizer:hover svg,
+.mfui-v6-search__resizer:active svg {
+  stroke: var(--spbSky3);
+}

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import './Search.less';
+export declare const MinTextareaHeight: {
+    readonly ONE_ROW: 24;
+    readonly THREE_ROWS: number;
+};
+declare type MinTextareaHeightType = typeof MinTextareaHeight[keyof typeof MinTextareaHeight];
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -40,11 +45,14 @@ export interface ISearchProps {
         notice?: Record<string, string>;
         popularItem?: Record<string, string>;
         clearButton?: Record<string, string>;
+        resizer?: Record<string, string>;
     };
     /** Значение */
     value?: string;
     /** Вид отображения */
     type?: 'textfield' | 'compact';
+    /** Включить режим textarea */
+    textarea?: boolean;
     /** Заголовок поля */
     label?: string;
     /** HTML идентификатор поля поиска */
@@ -78,6 +86,7 @@ export interface ISearchProps {
         textNotFound?: string;
         popularTitle?: string;
         popularItem?: string;
+        resizer?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;
@@ -91,14 +100,18 @@ export interface ISearchProps {
     popularTitle?: string;
     /** Ссылка на элемент списка с результатами */
     listRef?: React.Ref<HTMLDivElement>;
+    /** Минимальная высота textarea, px */
+    minTextareaHeight?: MinTextareaHeightType;
+    /** Показать хендлер для ресайза текстового поля */
+    showResizer?: boolean;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */
     onSubmit?: (value: string) => void;
     /** Обработчик выхода из фокуса */
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик входа в фокус */
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Обработчик нажатия на популярный элемент */
     onPopularItemClick?: (popularItemValue?: string) => void;
 }

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SearchItemsPaddings = exports.Verification = void 0;
+exports["default"] = exports.SearchItemsPaddings = exports.Verification = exports.MinTextareaHeight = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 require("core-js/modules/es.array.slice.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
@@ -33,6 +35,8 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
+var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
+
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 var _Caption = _interopRequireDefault(require("../Caption/Caption"));
@@ -41,6 +45,8 @@ var _Header = _interopRequireDefault(require("../Header/Header"));
 
 var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
 
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -72,8 +78,27 @@ var ClearIcon = function ClearIcon(props) {
   }));
 };
 
+var ResizeIcon = function ResizeIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    width: 12,
+    height: 12
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M1 11L11 1M7 11l4-4"
+  }));
+};
+
+var DEFAULT_ROW_COUNT = 3;
+var MAX_ROW_COUNT = 6;
+var TEXTAREA_ROW_HEIGHT = 24;
+var TEXTAREA_MAX_HEIGHT = TEXTAREA_ROW_HEIGHT * MAX_ROW_COUNT;
+var DEFAULT_LABEL_TOP_POSITION = 16;
 var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
 var MAX_POPULAR_ITEMS_LENGTH = 5;
+var MinTextareaHeight = {
+  ONE_ROW: TEXTAREA_ROW_HEIGHT,
+  THREE_ROWS: TEXTAREA_ROW_HEIGHT * DEFAULT_ROW_COUNT
+};
+exports.MinTextareaHeight = MinTextareaHeight;
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -107,6 +132,7 @@ var Search = function Search(_ref) {
       classes = _ref.classes,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'textfield' : _ref$type,
+      textarea = _ref.textarea,
       showLoader = _ref.showLoader,
       showNotFound = _ref.showNotFound,
       textNotFound = _ref.textNotFound,
@@ -114,6 +140,9 @@ var Search = function Search(_ref) {
       popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
       popularTitle = _ref.popularTitle,
       listRef = _ref.listRef,
+      _ref$minTextareaHeigh = _ref.minTextareaHeight,
+      minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
+      showResizer = _ref.showResizer,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onBlur = _ref.onBlur,
@@ -140,24 +169,76 @@ var Search = function Search(_ref) {
       popularActiveIndex = _React$useState8[0],
       setPopularActiveIndex = _React$useState8[1];
 
+  var _React$useState9 = _react["default"].useState(TEXTAREA_ROW_HEIGHT),
+      _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+      textareaHeight = _React$useState10[0],
+      setTextareaHeight = _React$useState10[1];
+
+  var _React$useState11 = _react["default"].useState(false),
+      _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
+      isTextareaResizing = _React$useState12[0],
+      setIsTextareaResizing = _React$useState12[1];
+
+  var _React$useState13 = _react["default"].useState(false),
+      _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
+      isTextareaResized = _React$useState14[0],
+      setIsTextareaResized = _React$useState14[1];
+
   var debouncedOnChange = _react["default"].useRef((0, _lodash["default"])(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
 
   var highlightedItem = _react["default"].useRef(null);
 
-  var fieldNode = _react["default"].useRef(null);
+  var containerRef = _react["default"].useRef(null);
+
+  var fieldRef = _react["default"].useRef(null);
+
+  var labelRef = _react["default"].useRef(null);
+
+  var resizerRef = _react["default"].useRef(null);
 
   var correctPopularItems = _react["default"].useMemo(function () {
     return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
   }, [popularItems]);
 
   var isCompact = type === 'compact';
+  var isTextarea = textarea && !isCompact;
   var showClearIcon = isCompact && !!searchQuery;
   var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
   var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
   var showPopularItems = !!correctPopularItems.length;
 
+  var getFieldRef = function getFieldRef(node) {
+    if (!node) {
+      return;
+    }
+
+    fieldRef.current = node;
+  };
+
+  var textareaResize = _react["default"].useCallback(function () {
+    if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
+      return;
+    }
+
+    fieldRef.current.style.height = "".concat(minTextareaHeight, "px");
+    var scrollHeight = fieldRef.current.scrollHeight;
+
+    var _window$getComputedSt = window.getComputedStyle(fieldRef.current),
+        paddingTop = _window$getComputedSt.paddingTop,
+        paddingBottom = _window$getComputedSt.paddingBottom;
+
+    var innerHeight = scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
+
+    if (innerHeight >= TEXTAREA_MAX_HEIGHT) {
+      fieldRef.current.style.height = "".concat(TEXTAREA_MAX_HEIGHT, "px");
+      return;
+    }
+
+    fieldRef.current.style.height = "".concat(innerHeight, "px");
+  }, [isTextareaResized, minTextareaHeight, isTextarea]);
+
   var handleChange = _react["default"].useCallback(function (e) {
     var _e$target$value = e.target.value,
         inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -171,7 +252,9 @@ var Search = function Search(_ref) {
       // @ts-ignore
       debouncedOnChange.current(inputValue);
     }
-  }, [changeDelay, onChange]);
+
+    textareaResize();
+  }, [changeDelay, onChange, textareaResize]);
 
   var handleHoverItem = _react["default"].useCallback(function (index) {
     return function () {
@@ -232,7 +315,7 @@ var Search = function Search(_ref) {
     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();
+    (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
   }, [onPopularItemClick, popularActiveIndex, popularItems]);
 
@@ -258,6 +341,7 @@ var Search = function Search(_ref) {
         {
           var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
           handlePopularItemMouseUp();
+          e.preventDefault();
 
           if (currentHref) {
             window.location.href = currentHref;
@@ -295,7 +379,12 @@ var Search = function Search(_ref) {
         break;
 
       case e.key === 'Enter' && activeIndex === -1:
+        if (isTextarea && e.shiftKey) {
+          return false;
+        }
+
         handleSearchSubmit();
+        e.preventDefault();
         break;
 
       default:
@@ -303,7 +392,7 @@ var Search = function Search(_ref) {
     }
 
     return false;
-  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
+  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length, isTextarea]);
 
   var handleKeyDown = _react["default"].useCallback(function (e) {
     if (showNotFound && showPopularItems) {
@@ -322,9 +411,70 @@ var Search = function Search(_ref) {
     !!debouncedOnChange.current && debouncedOnChange.current.cancel();
     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();
+    (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   };
 
+  var handleTextareaScroll = function handleTextareaScroll() {
+    if (!(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) || !(labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
+      return;
+    }
+
+    var scrollTop = fieldRef.current.scrollTop;
+
+    if (!scrollTop) {
+      labelRef.current.style.top = '';
+      return;
+    }
+
+    labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
+  };
+
+  _react["default"].useEffect(function () {
+    textareaResize();
+  }, [textareaResize]);
+
+  _react["default"].useEffect(function () {
+    if (!resizerRef.current || !isTextarea || !showResizer) {
+      return;
+    }
+
+    var originalHeight;
+    var originalCoordinateY;
+    var handleResize = (0, _lodash2["default"])(function (moveEvent) {
+      var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
+      var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
+      var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
+      setTextareaHeight(updatedHeight);
+      setIsTextareaResized(true);
+    }, _throttleTime["default"].resizeTextarea);
+
+    var handleResizeCancel = function handleResizeCancel() {
+      setIsTextareaResizing(false);
+      window.removeEventListener('mousemove', handleResize);
+      window.removeEventListener('touchmove', handleResize);
+      window.removeEventListener('mouseup', handleResizeCancel);
+      window.removeEventListener('touchend', handleResizeCancel);
+    };
+
+    var handleStartResize = function handleStartResize(event) {
+      if (!fieldRef.current) {
+        return;
+      }
+
+      setIsTextareaResizing(true);
+      event.preventDefault();
+      originalHeight = parseFloat(getComputedStyle(fieldRef.current).getPropertyValue('height').replace('px', ''));
+      originalCoordinateY = event.clientY || event.touches[0].clientY;
+      window.addEventListener('mousemove', handleResize);
+      window.addEventListener('touchmove', handleResize);
+      window.addEventListener('mouseup', handleResizeCancel);
+      window.addEventListener('touchend', handleResizeCancel);
+    };
+
+    resizerRef.current.addEventListener('mousedown', handleStartResize);
+    resizerRef.current.addEventListener('touchstart', handleStartResize);
+  }, [isTextarea, minTextareaHeight, showResizer]);
+
   _react["default"].useEffect(function () {
     return setSearchQuery(value);
   }, [value]);
@@ -460,17 +610,15 @@ var Search = function Search(_ref) {
     }, 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,
-      disabled: disabled,
-      type: type,
-      error: verification === Verification.ERROR,
-      success: verification === Verification.VALID
-    }, [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), {
+  var renderLabel = /*#__PURE__*/_react["default"].createElement("label", {
+    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
+    htmlFor: searchId,
+    ref: labelRef
+  }, label, required && /*#__PURE__*/_react["default"].createElement("span", {
+    className: cn('require-mark')
+  }, "*"));
+
+  var renderInput = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
     id: searchId,
     className: cn('field', {
       filled: !!searchQuery,
@@ -486,13 +634,50 @@ var Search = function Search(_ref) {
     disabled: disabled,
     type: "text",
     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')
-  }, "*")), showAdditionalElement && /*#__PURE__*/_react["default"].createElement("div", {
+    ref: getFieldRef
+  })), label && renderLabel);
+
+  var renderTextarea = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showResizer && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn('resizer', [classes === null || classes === void 0 ? void 0 : classes.resizer]),
+    ref: resizerRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/_react["default"].createElement(ResizeIcon, null)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('textarea-wrapper')
+  }, /*#__PURE__*/_react["default"].createElement("textarea", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
+    id: searchId,
+    className: cn('field', {
+      filled: !!searchQuery,
+      labeled: !!label
+    }, [classes === null || classes === void 0 ? void 0 : classes.input]),
+    style: {
+      height: "".concat(textareaHeight, "px")
+    },
+    placeholder: placeholder,
+    value: searchQuery,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    onScroll: handleTextareaScroll,
+    autoComplete: "off",
+    ref: getFieldRef
+  })), label && renderLabel));
+
+  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,
+      type: type,
+      textarea: isTextarea,
+      error: verification === Verification.ERROR,
+      success: verification === Verification.VALID
+    }, [className])
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
+    className: cn('control', {
+      focused: isTextareaResizing
+    }, [classes === null || classes === void 0 ? void 0 : classes.control]),
+    ref: containerRef
+  }), isCompact && renderSubmitButton(), isTextarea ? renderTextarea : renderInput, showAdditionalElement && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('icons')
   }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/_react["default"].createElement(_Preloader["default"], {
     delay: false,
@@ -515,9 +700,12 @@ Search.propTypes = {
     item: PropTypes.objectOf(PropTypes.string.isRequired),
     itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
     notice: PropTypes.objectOf(PropTypes.string.isRequired),
-    popularItem: PropTypes.objectOf(PropTypes.string.isRequired)
+    popularItem: PropTypes.objectOf(PropTypes.string.isRequired),
+    resizer: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   value: PropTypes.string,
+  type: PropTypes.oneOf(['textfield', 'compact']),
+  textarea: PropTypes.bool,
   label: PropTypes.string,
   searchId: PropTypes.string,
   placeholder: PropTypes.string,
@@ -542,7 +730,8 @@ Search.propTypes = {
     icon: PropTypes.string,
     textNotFound: PropTypes.string,
     popularTitle: PropTypes.string,
-    popularItem: PropTypes.string
+    popularItem: PropTypes.string,
+    resizer: PropTypes.string
   }),
   showNotFound: PropTypes.bool,
   textNotFound: PropTypes.string,
@@ -555,6 +744,8 @@ Search.propTypes = {
   listRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
+  minTextareaHeight: PropTypes.oneOf([MinTextareaHeight.ONE_ROW, MinTextareaHeight.THREE_ROWS]),
+  showResizer: PropTypes.bool,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
   onBlur: PropTypes.func,

package/dist/lib/components/Search/i/textarea-resizer.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 11L11 1"  stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
+<path d="M7 11L11 7" stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
+</svg>