@megafon/ui-core 6.5.0 → 6.6.1

package/dist/es/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/es/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/es/components/Search/Search.js

@@ -1,6 +1,7 @@
 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.parse-float.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,10 +12,12 @@ import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
+import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
 import Caption from "../Caption/Caption";
 import Header from "../Header/Header";
 import Preloader from "../Preloader/Preloader";
+import throttleTime from "../../constants/throttleTime";
 import "./Search.css";
 
 var SearchIcon16 = function SearchIcon16(props) {
@@ -42,8 +45,26 @@ var ClearIcon = function ClearIcon(props) {
   }));
 };
 
+var ResizeIcon = function ResizeIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 12,
+    height: 12
+  }, props), /*#__PURE__*/React.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;
+export var MinTextareaHeight = {
+  ONE_ROW: TEXTAREA_ROW_HEIGHT,
+  THREE_ROWS: TEXTAREA_ROW_HEIGHT * DEFAULT_ROW_COUNT
+};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -75,6 +96,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,
@@ -82,6 +104,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,
@@ -108,19 +133,68 @@ var Search = function Search(_ref) {
       popularActiveIndex = _React$useState8[0],
       setPopularActiveIndex = _React$useState8[1];
 
+  var _React$useState9 = React.useState(TEXTAREA_ROW_HEIGHT),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      textareaHeight = _React$useState10[0],
+      setTextareaHeight = _React$useState10[1];
+
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      isTextareaResizing = _React$useState12[0],
+      setIsTextareaResizing = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      isTextareaResized = _React$useState14[0],
+      setIsTextareaResized = _React$useState14[1];
+
   var debouncedOnChange = React.useRef(debounce(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
   var highlightedItem = React.useRef(null);
-  var fieldNode = React.useRef(null);
+  var containerRef = React.useRef(null);
+  var fieldRef = React.useRef(null);
+  var labelRef = React.useRef(null);
+  var resizerRef = React.useRef(null);
   var correctPopularItems = React.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.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.useCallback(function (e) {
     var _e$target$value = e.target.value,
         inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -134,7 +208,9 @@ var Search = function Search(_ref) {
       // @ts-ignore
       debouncedOnChange.current(inputValue);
     }
-  }, [changeDelay, onChange]);
+
+    textareaResize();
+  }, [changeDelay, onChange, textareaResize]);
   var handleHoverItem = React.useCallback(function (index) {
     return function () {
       setActiveIndex(index);
@@ -185,7 +261,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]);
   var handleKeyDownPopularItems = React.useCallback(function (e) {
@@ -210,6 +286,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;
@@ -246,7 +323,12 @@ var Search = function Search(_ref) {
         break;
 
       case e.key === 'Enter' && activeIndex === -1:
+        if (isTextarea && e.shiftKey) {
+          return false;
+        }
+
         handleSearchSubmit();
+        e.preventDefault();
         break;
 
       default:
@@ -254,7 +336,7 @@ var Search = function Search(_ref) {
     }
 
     return false;
-  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
+  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length, isTextarea]);
   var handleKeyDown = React.useCallback(function (e) {
     if (showNotFound && showPopularItems) {
       return handleKeyDownPopularItems(e);
@@ -272,9 +354,68 @@ 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.useEffect(function () {
+    textareaResize();
+  }, [textareaResize]);
+  React.useEffect(function () {
+    if (!resizerRef.current || !isTextarea || !showResizer) {
+      return;
+    }
+
+    var originalHeight;
+    var originalCoordinateY;
+    var handleResize = throttle(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.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.useEffect(function () {
     return setSearchQuery(value);
   }, [value]);
@@ -407,17 +548,14 @@ var Search = function Search(_ref) {
     }, popularTitle || 'Популярные действия'), renderPopularItems())));
   };
 
-  return /*#__PURE__*/React.createElement("div", _extends({}, 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.createElement("div", _extends({}, 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.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
+  var renderLabel = /*#__PURE__*/React.createElement("label", {
+    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
+    htmlFor: searchId,
+    ref: labelRef
+  }, label, required && /*#__PURE__*/React.createElement("span", {
+    className: cn('require-mark')
+  }, "*"));
+  var renderInput = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
     id: searchId,
     className: cn('field', {
       filled: !!searchQuery,
@@ -433,13 +571,48 @@ var Search = function Search(_ref) {
     disabled: disabled,
     type: "text",
     autoComplete: "off",
-    ref: fieldNode
-  })), label && /*#__PURE__*/React.createElement("label", {
-    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
-    htmlFor: searchId
-  }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: cn('require-mark')
-  }, "*")), showAdditionalElement && /*#__PURE__*/React.createElement("div", {
+    ref: getFieldRef
+  })), label && renderLabel);
+  var renderTextarea = /*#__PURE__*/React.createElement(React.Fragment, null, showResizer && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('resizer', [classes === null || classes === void 0 ? void 0 : classes.resizer]),
+    ref: resizerRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: cn('textarea-wrapper')
+  }, /*#__PURE__*/React.createElement("textarea", _extends({}, 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.createElement("div", _extends({}, 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.createElement("div", _extends({}, 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.createElement("div", {
     className: cn('icons')
   }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/React.createElement(Preloader, {
     delay: false,
@@ -462,9 +635,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,
@@ -489,7 +665,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,
@@ -502,6 +679,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/es/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>

package/dist/es/components/TextField/TextField.js

@@ -5,6 +5,7 @@ import "core-js/modules/es.parse-float.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.timers.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.values.js";
 
@@ -63,6 +64,10 @@ var ResizeIcon = function ResizeIcon(props) {
   }));
 };
 
+var isElement = function isElement(target) {
+  return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
+};
+
 var TEXTAREA_MAX_HEIGHT = 144;
 var DEFAULT_LABEL_TOP_POSITION = 16;
 var DEFAULT_ROW_COUNT = 3;
@@ -172,6 +177,11 @@ var TextField = function TextField(_ref) {
       isTextareaResized = _useState14[0],
       setIsTextareaResized = _useState14[1];
 
+  var _useState15 = useState(null),
+      _useState16 = _slicedToArray(_useState15, 2),
+      clickedElement = _useState16[0],
+      setClickedElement = _useState16[1];
+
   var fieldNode = useRef();
   var labelRef = useRef(null);
   var resizerRef = useRef(null);
@@ -275,6 +285,15 @@ var TextField = function TextField(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
+  var handleMouseDown = function handleMouseDown(e) {
+    if (isElement(e.target)) {
+      setClickedElement(e.target);
+      return;
+    }
+
+    setClickedElement(null);
+  };
+
   var handleNoticeTransitionEnd = useCallback(function () {
     !noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
@@ -311,7 +330,9 @@ var TextField = function TextField(_ref) {
       });
       (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
       field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
-      field === null || field === void 0 ? void 0 : field.focus();
+      setTimeout(function () {
+        return field === null || field === void 0 ? void 0 : field.focus();
+      });
     }
 
     onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
@@ -320,8 +341,16 @@ var TextField = function TextField(_ref) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
   var handleBlur = useCallback(function (e) {
+    var _a;
+
+    setClickedElement(null);
+
+    if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
+      return;
+    }
+
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }, [onBlur]);
+  }, [onBlur, clickedElement]);
   var handleBeforeMaskChange = useCallback(function (newState, oldState, inputedValue) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
@@ -475,7 +504,8 @@ var TextField = function TextField(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
-    })
+    }),
+    onMouseDown: handleMouseDown
   }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('resizer'),
     ref: resizerRef

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>

package/dist/lib/components/TextField/TextField.js

@@ -21,6 +21,8 @@ require("core-js/modules/es.string.replace.js");
 
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 
+require("core-js/modules/web.timers.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.object.values.js");
@@ -90,6 +92,10 @@ var ResizeIcon = function ResizeIcon(props) {
   }));
 };
 
+var isElement = function isElement(target) {
+  return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
+};
+
 var TEXTAREA_MAX_HEIGHT = 144;
 var DEFAULT_LABEL_TOP_POSITION = 16;
 var DEFAULT_ROW_COUNT = 3;
@@ -202,6 +208,11 @@ var TextField = function TextField(_ref) {
       isTextareaResized = _useState14[0],
       setIsTextareaResized = _useState14[1];
 
+  var _useState15 = (0, React.useState)(null),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      clickedElement = _useState16[0],
+      setClickedElement = _useState16[1];
+
   var fieldNode = (0, React.useRef)();
   var labelRef = (0, React.useRef)(null);
   var resizerRef = (0, React.useRef)(null);
@@ -305,6 +316,15 @@ var TextField = function TextField(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
 
+  var handleMouseDown = function handleMouseDown(e) {
+    if (isElement(e.target)) {
+      setClickedElement(e.target);
+      return;
+    }
+
+    setClickedElement(null);
+  };
+
   var handleNoticeTransitionEnd = (0, React.useCallback)(function () {
     !noticeText && setCurrentNoticeText(noticeText);
   }, [noticeText]);
@@ -341,7 +361,9 @@ var TextField = function TextField(_ref) {
       });
       (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
       field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
-      field === null || field === void 0 ? void 0 : field.focus();
+      setTimeout(function () {
+        return field === null || field === void 0 ? void 0 : field.focus();
+      });
     }
 
     onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
@@ -350,8 +372,16 @@ var TextField = function TextField(_ref) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
   var handleBlur = (0, React.useCallback)(function (e) {
+    var _a;
+
+    setClickedElement(null);
+
+    if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
+      return;
+    }
+
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }, [onBlur]);
+  }, [onBlur, clickedElement]);
   var handleBeforeMaskChange = (0, React.useCallback)(function (newState, oldState, inputedValue) {
     return onBeforeMaskChange && onBeforeMaskChange(inputedValue, newState, oldState);
   }, [onBeforeMaskChange]);
@@ -501,7 +531,8 @@ var TextField = function TextField(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
-    })
+    }),
+    onMouseDown: handleMouseDown
   }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('resizer'),
     ref: resizerRef

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "6.5.0",
+    "version": "6.6.1",
     "files": [
         "dist",
         "styles"
@@ -99,5 +99,5 @@
         "react-popper": "^2.2.3",
         "swiper": "^6.5.6"
     },
-    "gitHead": "9804a8e7196f90b0c310e4ee83988276ff7b58bc"
+    "gitHead": "c119b673112829f75ebb828789f183e7c061b715"
 }