@megafon/ui-core 7.3.0 → 7.4.0

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-search{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;min-height:40px;position:relative;z-index:auto}.mfui-search__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-search__control{border:1px solid;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;outline:none;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.mfui-search__field_labeled::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field:focus::-webkit-input-placeholder{opacity:1}.mfui-search__field:focus::-moz-placeholder{opacity:1}.mfui-search__field:focus:-ms-input-placeholder{opacity:1}.mfui-search__field:focus::-ms-input-placeholder{opacity:1}.mfui-search__field:focus::placeholder{opacity:1}.mfui-search__field{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;caret-color:var(--brandGreen);color:var(--content);cursor:text;flex-grow:1;font-family:inherit;font-size:100%;height:100%;line-height:25px;opacity:1;outline:none;overflow:auto;padding:0;width:100%}@media screen and (max-width:767px){.mfui-search__field{width:90%}}.mfui-search__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s;z-index:1}.mfui-search__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:none;left:-1px;position:absolute;right:-1px;top:calc(100% + 1px);z-index:0}.mfui-search__clear,.mfui-search__submit-button{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;background-color:transparent;border:none;cursor:pointer;height:100%;justify-content:center;padding:0;text-align:center}.mfui-search__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px}.mfui-search__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-search__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-search__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-search__popular-item{background-color:var(--base);border-radius:16px;cursor:pointer;min-height:48px;padding-left:12px;padding-right:16px;text-decoration:none}.mfui-search__popular-icon,.mfui-search__popular-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-search__popular-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:16px;width:32px}.mfui-search__list-item_active,.mfui-search__popular-item_active{background-color:var(--spbSky0)}.mfui-search__item-title,.mfui-search__popular-item-title{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap}.mfui-search__item-title:after,.mfui-search__popular-item-title:after{background:var(--base);bottom:0;content:"";-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--base) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);position:absolute;right:0;top:0;width:40px}.mfui-search__list-item_active .mfui-search__item-title:after,.mfui-search__popular-item_active .mfui-search__popular-item-title:after{background:var(--spbSky0);-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%)}.mfui-search__highlighted-fragment{font-weight:700}.mfui-search__notice{font-size:12px;line-height:16px;margin-top:4px}.mfui-search__notice_error{color:var(--fury)}.mfui-search__notice_success{color:var(--brandGreen)}.mfui-search__icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.mfui-search__list_not-found{cursor:default}.mfui-search__not-found-text{background-color:var(--base);color:var(--spbSky3);font-family:inherit;padding:12px 32px}.mfui-search__not-found-text_show-popular{border-bottom:1px solid var(--spbSky2);padding:0 0 16px}.mfui-search__popular-title{padding-bottom:8px;padding-top:16px}.mfui-search_open{z-index:12}.mfui-search_open .mfui-search__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;display:block}.mfui-search_type_textfield .mfui-search__control{background-color:var(--base);border-color:var(--spbSky2);border-radius:12px;height:60px;padding:0 16px}.mfui-search_type_textfield .mfui-search__control:hover{border-color:var(--content)}.mfui-search_type_textfield .mfui-search__label{top:17px}.mfui-search_type_textfield .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_textfield .mfui-search__field_filled+.mfui-search__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%)}.mfui-search_type_textfield .mfui-search__field_labeled{padding-top:22px}.mfui-search_type_textfield .mfui-search__submit-icon{height:32px;width:32px;fill:var(--content)}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__control{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_type_compact .mfui-search__control{background-color:var(--spbSky0);border-color:var(--spbSky0);border-radius:24px;height:40px;padding:0 12px;-webkit-transition:background-color,border-color .3s;transition:background-color,border-color .3s}.mfui-search_type_compact .mfui-search__control:hover{background-color:var(--spbSky1)}.mfui-search_type_compact .mfui-search__field{height:100%;padding:8px 0 8px 12px}.mfui-search_type_compact .mfui-search__label{left:44px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mfui-search_type_compact .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_compact .mfui-search__field_filled+.mfui-search__label{opacity:0}.mfui-search_type_compact .mfui-search__submit-icon{height:20px;width:20px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:transparent;border:none;cursor:pointer;height:24px;justify-content:center;margin-left:12px;padding:0;width:24px}.mfui-search_type_compact .mfui-search__clear-icon{height:24px;width:24px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear-icon:hover{fill:var(--content)}.mfui-search_type_compact .mfui-search__clear-icon:active{fill:var(--buttonDown)}.mfui-search_type_compact.mfui-search_open .mfui-search__control{background-color:var(--spbSky1)}.mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon{fill:var(--content)}.mfui-search_disabled .mfui-search__control{cursor:default;pointer-events:none}.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_error .mfui-search__control{border-color:var(--fury)}.mfui-search_success .mfui-search__control{border-color:var(--brandGreen)}
+h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-search{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;min-height:40px;position:relative;z-index:auto}.mfui-search__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-search__control{border:1px solid;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;outline:none;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.mfui-search__field_labeled::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field:focus::-webkit-input-placeholder{opacity:1}.mfui-search__field:focus::-moz-placeholder{opacity:1}.mfui-search__field:focus:-ms-input-placeholder{opacity:1}.mfui-search__field:focus::-ms-input-placeholder{opacity:1}.mfui-search__field:focus::placeholder{opacity:1}.mfui-search__field{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;caret-color:var(--brandGreen);color:var(--content);cursor:text;flex-grow:1;font-family:inherit;font-size:100%;height:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0;resize:none;width:100%}@media screen and (max-width:767px){.mfui-search__field{width:90%}}.mfui-search__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;-webkit-transition:scale .5s,top .01s,-webkit-transform .5s;transition:scale .5s,top .01s,-webkit-transform .5s;transition:transform .5s,scale .5s,top .01s;transition:transform .5s,scale .5s,top .01s,-webkit-transform .5s;z-index:1}.mfui-search__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:none;left:-1px;position:absolute;right:-1px;top:calc(100% + 1px);z-index:0}.mfui-search__clear,.mfui-search__submit-button{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;background-color:transparent;border:none;cursor:pointer;height:100%;justify-content:center;padding:0;text-align:center}.mfui-search__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px}.mfui-search__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-search__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-search__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-search__popular-item{background-color:var(--base);border-radius:16px;cursor:pointer;min-height:48px;padding-left:12px;padding-right:16px;text-decoration:none}.mfui-search__popular-icon,.mfui-search__popular-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-search__popular-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:16px;width:32px}.mfui-search__list-item_active,.mfui-search__popular-item_active{background-color:var(--spbSky0)}.mfui-search__item-title,.mfui-search__popular-item-title{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap}.mfui-search__item-title:after,.mfui-search__popular-item-title:after{background:var(--base);bottom:0;content:"";-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--base) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);position:absolute;right:0;top:0;width:40px}.mfui-search__list-item_active .mfui-search__item-title:after,.mfui-search__popular-item_active .mfui-search__popular-item-title:after{background:var(--spbSky0);-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%)}.mfui-search__highlighted-fragment{font-weight:700}.mfui-search__notice{font-size:12px;line-height:16px;margin-top:4px}.mfui-search__notice_error{color:var(--fury)}.mfui-search__notice_success{color:var(--brandGreen)}.mfui-search__icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.mfui-search__list_not-found{cursor:default}.mfui-search__not-found-text{background-color:var(--base);color:var(--spbSky3);font-family:inherit;padding:12px 32px}.mfui-search__not-found-text_show-popular{border-bottom:1px solid var(--spbSky2);padding:0 0 16px}.mfui-search__popular-title{padding-bottom:8px;padding-top:16px}.mfui-search_open{z-index:12}.mfui-search_open .mfui-search__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;display:block}.mfui-search_type_textfield .mfui-search__control{background-color:var(--base);border-color:var(--spbSky2);border-radius:12px;height:60px;padding:0 16px}.mfui-search_type_textfield .mfui-search__control:hover,.mfui-search_type_textfield .mfui-search__control_focused{border-color:var(--content)}.mfui-search_type_textfield .mfui-search__label{top:17px}.mfui-search_type_textfield .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_textfield .mfui-search__field_filled+.mfui-search__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition:scale .2s,top .01s,-webkit-transform .2s;transition:scale .2s,top .01s,-webkit-transform .2s;transition:transform .2s,scale .2s,top .01s;transition:transform .2s,scale .2s,top .01s,-webkit-transform .2s}.mfui-search_type_textfield .mfui-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-search_type_textfield .mfui-search__submit-icon{height:32px;width:32px;fill:var(--content)}.mfui-search_textarea .mfui-search__control{height:auto;min-height:60px}.mfui-search_textarea .mfui-search__field{-webkit-box-sizing:content-box;box-sizing:content-box;max-height:204px;padding-bottom:9px;padding-top:17px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-search_textarea .mfui-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-search_textarea .mfui-search__icons{height:58px;margin-left:8px}.mfui-search_textarea .mfui-search__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-search__textarea-wrapper{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;width:100%}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__control{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_type_compact .mfui-search__control{background-color:var(--spbSky0);border-color:var(--spbSky0);border-radius:24px;height:40px;padding:0 12px;-webkit-transition:background-color,border-color .3s;transition:background-color,border-color .3s}.mfui-search_type_compact .mfui-search__control:hover{background-color:var(--spbSky1)}.mfui-search_type_compact .mfui-search__field{height:100%;padding:8px 0 8px 12px}.mfui-search_type_compact .mfui-search__label{left:44px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mfui-search_type_compact .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_compact .mfui-search__field_filled+.mfui-search__label{opacity:0}.mfui-search_type_compact .mfui-search__submit-icon{height:20px;width:20px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:transparent;border:none;cursor:pointer;height:24px;justify-content:center;margin-left:12px;padding:0;width:24px}.mfui-search_type_compact .mfui-search__clear-icon{height:24px;width:24px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear-icon:hover{fill:var(--content)}.mfui-search_type_compact .mfui-search__clear-icon:active{fill:var(--buttonDown)}.mfui-search_type_compact.mfui-search_open .mfui-search__control{background-color:var(--spbSky1)}.mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon{fill:var(--content)}.mfui-search_disabled .mfui-search__control{cursor:default;pointer-events:none}.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_error .mfui-search__control{border-color:var(--fury)}.mfui-search_success .mfui-search__control{border-color:var(--brandGreen)}.mfui-search__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:4px;width:12px}.mfui-search__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-search__resizer:active svg,.mfui-search__resizer:hover svg{stroke:var(--spbSky3)}

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import './Search.scss';
+export declare const MinTextareaHeight: {
+    readonly ONE_ROW: 24;
+    readonly THREE_ROWS: number;
+};
+type MinTextareaHeightType = (typeof MinTextareaHeight)[keyof typeof MinTextareaHeight];
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -39,11 +44,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 идентификатор поля поиска */
@@ -77,6 +85,7 @@ export interface ISearchProps {
         textNotFound?: string;
         popularTitle?: string;
         popularItem?: string;
+        resizer?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;
@@ -90,14 +99,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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.parse-float.js";
 import "core-js/modules/es.regexp.constructor.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.regexp.sticky.js";
@@ -11,6 +12,8 @@ import "core-js/modules/es.string.split.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
 import Caption from "../Caption/Caption";
 import Header from "../Header/Header";
 import Preloader from "../Preloader/Preloader";
@@ -37,8 +40,25 @@ var ClearIcon = function ClearIcon(props) {
     d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
   }));
 };
+var 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'
@@ -69,6 +89,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,
@@ -76,6 +97,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,
@@ -97,19 +121,57 @@ var Search = function Search(_ref) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     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;
@@ -122,7 +184,8 @@ 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);
@@ -170,7 +233,7 @@ var Search = function Search(_ref) {
   var handlePopularItemMouseUp = React.useCallback(function () {
     var _a;
     var chosenValue = popularItems[popularActiveIndex].title;
-    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
+    (_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) {
@@ -192,6 +255,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;
           }
@@ -221,13 +285,17 @@ var Search = function Search(_ref) {
         e.preventDefault();
         break;
       case e.key === 'Enter' && activeIndex === -1:
+        if (isTextarea && e.shiftKey) {
+          return false;
+        }
         handleSearchSubmit();
+        e.preventDefault();
         break;
       default:
         break;
     }
     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);
@@ -239,8 +307,58 @@ 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]);
@@ -365,17 +483,14 @@ var Search = function Search(_ref) {
       hasMargin: false
     }, 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,
@@ -391,13 +506,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,

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/lib/components/Search/Search.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-search{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;min-height:40px;position:relative;z-index:auto}.mfui-search__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-search__control{border:1px solid;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;outline:none;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.mfui-search__field_labeled::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field:focus::-webkit-input-placeholder{opacity:1}.mfui-search__field:focus::-moz-placeholder{opacity:1}.mfui-search__field:focus:-ms-input-placeholder{opacity:1}.mfui-search__field:focus::-ms-input-placeholder{opacity:1}.mfui-search__field:focus::placeholder{opacity:1}.mfui-search__field{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;caret-color:var(--brandGreen);color:var(--content);cursor:text;flex-grow:1;font-family:inherit;font-size:100%;height:100%;line-height:25px;opacity:1;outline:none;overflow:auto;padding:0;width:100%}@media screen and (max-width:767px){.mfui-search__field{width:90%}}.mfui-search__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s;z-index:1}.mfui-search__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:none;left:-1px;position:absolute;right:-1px;top:calc(100% + 1px);z-index:0}.mfui-search__clear,.mfui-search__submit-button{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;background-color:transparent;border:none;cursor:pointer;height:100%;justify-content:center;padding:0;text-align:center}.mfui-search__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px}.mfui-search__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-search__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-search__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-search__popular-item{background-color:var(--base);border-radius:16px;cursor:pointer;min-height:48px;padding-left:12px;padding-right:16px;text-decoration:none}.mfui-search__popular-icon,.mfui-search__popular-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-search__popular-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:16px;width:32px}.mfui-search__list-item_active,.mfui-search__popular-item_active{background-color:var(--spbSky0)}.mfui-search__item-title,.mfui-search__popular-item-title{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap}.mfui-search__item-title:after,.mfui-search__popular-item-title:after{background:var(--base);bottom:0;content:"";-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--base) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);position:absolute;right:0;top:0;width:40px}.mfui-search__list-item_active .mfui-search__item-title:after,.mfui-search__popular-item_active .mfui-search__popular-item-title:after{background:var(--spbSky0);-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%)}.mfui-search__highlighted-fragment{font-weight:700}.mfui-search__notice{font-size:12px;line-height:16px;margin-top:4px}.mfui-search__notice_error{color:var(--fury)}.mfui-search__notice_success{color:var(--brandGreen)}.mfui-search__icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.mfui-search__list_not-found{cursor:default}.mfui-search__not-found-text{background-color:var(--base);color:var(--spbSky3);font-family:inherit;padding:12px 32px}.mfui-search__not-found-text_show-popular{border-bottom:1px solid var(--spbSky2);padding:0 0 16px}.mfui-search__popular-title{padding-bottom:8px;padding-top:16px}.mfui-search_open{z-index:12}.mfui-search_open .mfui-search__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;display:block}.mfui-search_type_textfield .mfui-search__control{background-color:var(--base);border-color:var(--spbSky2);border-radius:12px;height:60px;padding:0 16px}.mfui-search_type_textfield .mfui-search__control:hover{border-color:var(--content)}.mfui-search_type_textfield .mfui-search__label{top:17px}.mfui-search_type_textfield .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_textfield .mfui-search__field_filled+.mfui-search__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%)}.mfui-search_type_textfield .mfui-search__field_labeled{padding-top:22px}.mfui-search_type_textfield .mfui-search__submit-icon{height:32px;width:32px;fill:var(--content)}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__control{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_type_compact .mfui-search__control{background-color:var(--spbSky0);border-color:var(--spbSky0);border-radius:24px;height:40px;padding:0 12px;-webkit-transition:background-color,border-color .3s;transition:background-color,border-color .3s}.mfui-search_type_compact .mfui-search__control:hover{background-color:var(--spbSky1)}.mfui-search_type_compact .mfui-search__field{height:100%;padding:8px 0 8px 12px}.mfui-search_type_compact .mfui-search__label{left:44px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mfui-search_type_compact .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_compact .mfui-search__field_filled+.mfui-search__label{opacity:0}.mfui-search_type_compact .mfui-search__submit-icon{height:20px;width:20px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:transparent;border:none;cursor:pointer;height:24px;justify-content:center;margin-left:12px;padding:0;width:24px}.mfui-search_type_compact .mfui-search__clear-icon{height:24px;width:24px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear-icon:hover{fill:var(--content)}.mfui-search_type_compact .mfui-search__clear-icon:active{fill:var(--buttonDown)}.mfui-search_type_compact.mfui-search_open .mfui-search__control{background-color:var(--spbSky1)}.mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon{fill:var(--content)}.mfui-search_disabled .mfui-search__control{cursor:default;pointer-events:none}.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_error .mfui-search__control{border-color:var(--fury)}.mfui-search_success .mfui-search__control{border-color:var(--brandGreen)}
+h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-search{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;min-height:40px;position:relative;z-index:auto}.mfui-search__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-search__control{border:1px solid;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;outline:none;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.mfui-search__field_labeled::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-search__field_labeled::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-search__field:focus::-webkit-input-placeholder{opacity:1}.mfui-search__field:focus::-moz-placeholder{opacity:1}.mfui-search__field:focus:-ms-input-placeholder{opacity:1}.mfui-search__field:focus::-ms-input-placeholder{opacity:1}.mfui-search__field:focus::placeholder{opacity:1}.mfui-search__field{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;caret-color:var(--brandGreen);color:var(--content);cursor:text;flex-grow:1;font-family:inherit;font-size:100%;height:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0;resize:none;width:100%}@media screen and (max-width:767px){.mfui-search__field{width:90%}}.mfui-search__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;-webkit-transition:scale .5s,top .01s,-webkit-transform .5s;transition:scale .5s,top .01s,-webkit-transform .5s;transition:transform .5s,scale .5s,top .01s;transition:transform .5s,scale .5s,top .01s,-webkit-transform .5s;z-index:1}.mfui-search__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:none;left:-1px;position:absolute;right:-1px;top:calc(100% + 1px);z-index:0}.mfui-search__clear,.mfui-search__submit-button{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;background-color:transparent;border:none;cursor:pointer;height:100%;justify-content:center;padding:0;text-align:center}.mfui-search__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px}.mfui-search__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-search__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-search__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-search__popular-item{background-color:var(--base);border-radius:16px;cursor:pointer;min-height:48px;padding-left:12px;padding-right:16px;text-decoration:none}.mfui-search__popular-icon,.mfui-search__popular-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-search__popular-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:32px;justify-content:center;margin-right:16px;width:32px}.mfui-search__list-item_active,.mfui-search__popular-item_active{background-color:var(--spbSky0)}.mfui-search__item-title,.mfui-search__popular-item-title{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap}.mfui-search__item-title:after,.mfui-search__popular-item-title:after{background:var(--base);bottom:0;content:"";-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--base) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);position:absolute;right:0;top:0;width:40px}.mfui-search__list-item_active .mfui-search__item-title:after,.mfui-search__popular-item_active .mfui-search__popular-item-title:after{background:var(--spbSky0);-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));-webkit-mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%);mask-image:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));mask-image:linear-gradient(to right,hsla(0,0%,100%,0) 0,var(--spbSky0) 100%)}.mfui-search__highlighted-fragment{font-weight:700}.mfui-search__notice{font-size:12px;line-height:16px;margin-top:4px}.mfui-search__notice_error{color:var(--fury)}.mfui-search__notice_success{color:var(--brandGreen)}.mfui-search__icons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%}.mfui-search__list_not-found{cursor:default}.mfui-search__not-found-text{background-color:var(--base);color:var(--spbSky3);font-family:inherit;padding:12px 32px}.mfui-search__not-found-text_show-popular{border-bottom:1px solid var(--spbSky2);padding:0 0 16px}.mfui-search__popular-title{padding-bottom:8px;padding-top:16px}.mfui-search_open{z-index:12}.mfui-search_open .mfui-search__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;display:block}.mfui-search_type_textfield .mfui-search__control{background-color:var(--base);border-color:var(--spbSky2);border-radius:12px;height:60px;padding:0 16px}.mfui-search_type_textfield .mfui-search__control:hover,.mfui-search_type_textfield .mfui-search__control_focused{border-color:var(--content)}.mfui-search_type_textfield .mfui-search__label{top:17px}.mfui-search_type_textfield .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_textfield .mfui-search__field_filled+.mfui-search__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition:scale .2s,top .01s,-webkit-transform .2s;transition:scale .2s,top .01s,-webkit-transform .2s;transition:transform .2s,scale .2s,top .01s;transition:transform .2s,scale .2s,top .01s,-webkit-transform .2s}.mfui-search_type_textfield .mfui-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-search_type_textfield .mfui-search__submit-icon{height:32px;width:32px;fill:var(--content)}.mfui-search_textarea .mfui-search__control{height:auto;min-height:60px}.mfui-search_textarea .mfui-search__field{-webkit-box-sizing:content-box;box-sizing:content-box;max-height:204px;padding-bottom:9px;padding-top:17px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-search_textarea .mfui-search__field_labeled{padding-bottom:9px;padding-top:25px}.mfui-search_textarea .mfui-search__icons{height:58px;margin-left:8px}.mfui-search_textarea .mfui-search__field_resized{-webkit-transition:height .1s;transition:height .1s;will-change:height}.mfui-search__textarea-wrapper{position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;width:100%}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__control{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_type_compact .mfui-search__control{background-color:var(--spbSky0);border-color:var(--spbSky0);border-radius:24px;height:40px;padding:0 12px;-webkit-transition:background-color,border-color .3s;transition:background-color,border-color .3s}.mfui-search_type_compact .mfui-search__control:hover{background-color:var(--spbSky1)}.mfui-search_type_compact .mfui-search__field{height:100%;padding:8px 0 8px 12px}.mfui-search_type_compact .mfui-search__label{left:44px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mfui-search_type_compact .mfui-search__field:focus+.mfui-search__label,.mfui-search_type_compact .mfui-search__field_filled+.mfui-search__label{opacity:0}.mfui-search_type_compact .mfui-search__submit-icon{height:20px;width:20px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:transparent;border:none;cursor:pointer;height:24px;justify-content:center;margin-left:12px;padding:0;width:24px}.mfui-search_type_compact .mfui-search__clear-icon{height:24px;width:24px;fill:var(--spbSky3)}.mfui-search_type_compact .mfui-search__clear-icon:hover{fill:var(--content)}.mfui-search_type_compact .mfui-search__clear-icon:active{fill:var(--buttonDown)}.mfui-search_type_compact.mfui-search_open .mfui-search__control{background-color:var(--spbSky1)}.mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon{fill:var(--content)}.mfui-search_disabled .mfui-search__control{cursor:default;pointer-events:none}.mfui-search_disabled .mfui-search__submit-icon{opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-search_error .mfui-search__control{border-color:var(--fury)}.mfui-search_success .mfui-search__control{border-color:var(--brandGreen)}.mfui-search__resizer{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:ns-resize;height:12px;justify-content:center;padding:4px;width:12px}.mfui-search__resizer svg{-webkit-transition:stroke .3s;transition:stroke .3s;stroke:var(--spbSky2)}.mfui-search__resizer:active svg,.mfui-search__resizer:hover svg{stroke:var(--spbSky3)}

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import './Search.scss';
+export declare const MinTextareaHeight: {
+    readonly ONE_ROW: 24;
+    readonly THREE_ROWS: number;
+};
+type MinTextareaHeightType = (typeof MinTextareaHeight)[keyof typeof MinTextareaHeight];
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -39,11 +44,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 идентификатор поля поиска */
@@ -77,6 +85,7 @@ export interface ISearchProps {
         textNotFound?: string;
         popularTitle?: string;
         popularItem?: string;
+        resizer?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;
@@ -90,14 +99,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

@@ -4,11 +4,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Verification = exports.SearchItemsPaddings = void 0;
+exports["default"] = exports.Verification = exports.SearchItemsPaddings = exports.MinTextareaHeight = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.parse-float.js");
 require("core-js/modules/es.regexp.constructor.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.sticky.js");
@@ -18,6 +19,8 @@ require("core-js/modules/es.string.split.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 var _Caption = _interopRequireDefault(require("../Caption/Caption"));
 var _Header = _interopRequireDefault(require("../Header/Header"));
 var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
@@ -46,8 +49,25 @@ var ClearIcon = function ClearIcon(props) {
     d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
   }));
 };
+var ResizeIcon = function ResizeIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    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;
+var MinTextareaHeight = exports.MinTextareaHeight = {
+  ONE_ROW: TEXTAREA_ROW_HEIGHT,
+  THREE_ROWS: TEXTAREA_ROW_HEIGHT * DEFAULT_ROW_COUNT
+};
 var Verification = exports.Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -78,6 +98,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,
@@ -85,6 +106,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,
@@ -106,19 +130,57 @@ var Search = function Search(_ref) {
     _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
     popularActiveIndex = _React$useState8[0],
     setPopularActiveIndex = _React$useState8[1];
+  var _React$useState9 = React.useState(TEXTAREA_ROW_HEIGHT),
+    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+    textareaHeight = _React$useState10[0],
+    setTextareaHeight = _React$useState10[1];
+  var _React$useState11 = React.useState(false),
+    _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
+    isTextareaResizing = _React$useState12[0],
+    setIsTextareaResizing = _React$useState12[1];
+  var _React$useState13 = React.useState(false),
+    _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
+    isTextareaResized = _React$useState14[0],
+    setIsTextareaResized = _React$useState14[1];
   var debouncedOnChange = React.useRef((0, _lodash["default"])(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;
@@ -131,7 +193,8 @@ 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);
@@ -179,7 +242,7 @@ var Search = function Search(_ref) {
   var handlePopularItemMouseUp = React.useCallback(function () {
     var _a;
     var chosenValue = popularItems[popularActiveIndex].title;
-    (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
+    (_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) {
@@ -201,6 +264,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;
           }
@@ -230,13 +294,17 @@ var Search = function Search(_ref) {
         e.preventDefault();
         break;
       case e.key === 'Enter' && activeIndex === -1:
+        if (isTextarea && e.shiftKey) {
+          return false;
+        }
         handleSearchSubmit();
+        e.preventDefault();
         break;
       default:
         break;
     }
     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);
@@ -248,8 +316,58 @@ 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 = (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.useEffect(function () {
     return setSearchQuery(value);
   }, [value]);
@@ -374,17 +492,14 @@ var Search = function Search(_ref) {
       hasMargin: false
     }, popularTitle || 'Популярные действия'), renderPopularItems())));
   };
-  return /*#__PURE__*/React.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.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.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
     id: searchId,
     className: cn('field', {
       filled: !!searchQuery,
@@ -400,13 +515,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", (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.createElement(ResizeIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: cn('textarea-wrapper')
+  }, /*#__PURE__*/React.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.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.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.createElement("div", {
     className: cn('icons')
   }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/React.createElement(_Preloader["default"], {
     delay: false,

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "7.3.0",
+    "version": "7.4.0",
     "files": [
         "dist",
         "styles"
@@ -50,7 +50,7 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^3.2.1",
+        "@megafon/ui-icons": "^3.3.0",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "b77283ba6760e14912cc98f3e1745ed53477cd22"
+    "gitHead": "1c60e4170d77c8e21323016d3f4554f66fa8cefb"
 }