@megafon/ui-core 7.3.0 → 7.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/es/components/Search/Search.css +1 -1
  2. package/dist/es/components/Search/Search.d.ts +15 -2
  3. package/dist/es/components/Search/Search.js +173 -23
  4. package/dist/es/components/Search/i/textarea-resizer.svg +4 -0
  5. package/dist/es/components/TextField/TextField.js +26 -3
  6. package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js +2 -1
  7. package/dist/lib/components/Search/Search.css +1 -1
  8. package/dist/lib/components/Search/Search.d.ts +15 -2
  9. package/dist/lib/components/Search/Search.js +174 -24
  10. package/dist/lib/components/Search/i/textarea-resizer.svg +4 -0
  11. package/dist/lib/components/TextField/TextField.js +26 -3
  12. package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js +2 -1
  13. package/package.json +3 -3
package/dist/es/components/Search/Search.css CHANGED
@@ -1 +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)}
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: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 CHANGED
@@ -1,5 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import './Search.scss';
3
+ export declare const MinTextareaHeight: {
4
+ readonly ONE_ROW: 24;
5
+ readonly THREE_ROWS: number;
6
+ };
7
+ type MinTextareaHeightType = (typeof MinTextareaHeight)[keyof typeof MinTextareaHeight];
3
8
  export declare const Verification: {
4
9
  readonly VALID: "valid";
5
10
  readonly ERROR: "error";
@@ -39,11 +44,14 @@ export interface ISearchProps {
39
44
  notice?: Record<string, string>;
40
45
  popularItem?: Record<string, string>;
41
46
  clearButton?: Record<string, string>;
47
+ resizer?: Record<string, string>;
42
48
  };
43
49
  /** Значение */
44
50
  value?: string;
45
51
  /** Вид отображения */
46
52
  type?: 'textfield' | 'compact';
53
+ /** Включить режим textarea */
54
+ textarea?: boolean;
47
55
  /** Заголовок поля */
48
56
  label?: string;
49
57
  /** HTML идентификатор поля поиска */
@@ -77,6 +85,7 @@ export interface ISearchProps {
77
85
  textNotFound?: string;
78
86
  popularTitle?: string;
79
87
  popularItem?: string;
88
+ resizer?: string;
80
89
  };
81
90
  /** Отображение загрузки */
82
91
  showLoader?: boolean;
@@ -90,14 +99,18 @@ export interface ISearchProps {
90
99
  popularTitle?: string;
91
100
  /** Ссылка на элемент списка с результатами */
92
101
  listRef?: React.Ref<HTMLDivElement>;
102
+ /** Минимальная высота textarea, px */
103
+ minTextareaHeight?: MinTextareaHeightType;
104
+ /** Показать хендлер для ресайза текстового поля */
105
+ showResizer?: boolean;
93
106
  /** Обработчик изменения поля */
94
107
  onChange?: (value: string) => void;
95
108
  /** Обработчик нажатия на enter */
96
109
  onSubmit?: (value: string) => void;
97
110
  /** Обработчик выхода из фокуса */
98
- onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
111
+ onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
99
112
  /** Обработчик входа в фокус */
100
- onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
113
+ onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
101
114
  /** Обработчик нажатия на популярный элемент */
102
115
  onPopularItemClick?: (popularItemValue?: string) => void;
103
116
  }
package/dist/es/components/Search/Search.js CHANGED
@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import "core-js/modules/es.array.map.js";
4
4
  import "core-js/modules/es.array.slice.js";
5
+ import "core-js/modules/es.parse-float.js";
5
6
  import "core-js/modules/es.regexp.constructor.js";
6
7
  import "core-js/modules/es.regexp.exec.js";
7
8
  import "core-js/modules/es.regexp.sticky.js";
@@ -11,6 +12,8 @@ import "core-js/modules/es.string.split.js";
11
12
  import * as React from 'react';
12
13
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
13
14
  import debounce from 'lodash.debounce';
15
+ import throttle from 'lodash.throttle';
16
+ import throttleTime from "../../constants/throttleTime";
14
17
  import Caption from "../Caption/Caption";
15
18
  import Header from "../Header/Header";
16
19
  import Preloader from "../Preloader/Preloader";
@@ -37,8 +40,25 @@ var ClearIcon = function ClearIcon(props) {
37
40
  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"
38
41
  }));
39
42
  };
43
+ var ResizeIcon = function ResizeIcon(props) {
44
+ return /*#__PURE__*/React.createElement("svg", _extends({
45
+ width: 12,
46
+ height: 12
47
+ }, props), /*#__PURE__*/React.createElement("path", {
48
+ d: "M1 11L11 1M7 11l4-4"
49
+ }));
50
+ };
51
+ var DEFAULT_ROW_COUNT = 3;
52
+ var MAX_ROW_COUNT = 6;
53
+ var TEXTAREA_ROW_HEIGHT = 24;
54
+ var TEXTAREA_MAX_HEIGHT = TEXTAREA_ROW_HEIGHT * MAX_ROW_COUNT;
55
+ var DEFAULT_LABEL_TOP_POSITION = 16;
40
56
  var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
41
57
  var MAX_POPULAR_ITEMS_LENGTH = 5;
58
+ export var MinTextareaHeight = {
59
+ ONE_ROW: TEXTAREA_ROW_HEIGHT,
60
+ THREE_ROWS: TEXTAREA_ROW_HEIGHT * DEFAULT_ROW_COUNT
61
+ };
42
62
  export var Verification = {
43
63
  VALID: 'valid',
44
64
  ERROR: 'error'
@@ -69,6 +89,7 @@ var Search = function Search(_ref) {
69
89
  classes = _ref.classes,
70
90
  _ref$type = _ref.type,
71
91
  type = _ref$type === void 0 ? 'textfield' : _ref$type,
92
+ textarea = _ref.textarea,
72
93
  showLoader = _ref.showLoader,
73
94
  showNotFound = _ref.showNotFound,
74
95
  textNotFound = _ref.textNotFound,
@@ -76,6 +97,9 @@ var Search = function Search(_ref) {
76
97
  popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
77
98
  popularTitle = _ref.popularTitle,
78
99
  listRef = _ref.listRef,
100
+ _ref$minTextareaHeigh = _ref.minTextareaHeight,
101
+ minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
102
+ showResizer = _ref.showResizer,
79
103
  onChange = _ref.onChange,
80
104
  onSubmit = _ref.onSubmit,
81
105
  onBlur = _ref.onBlur,
@@ -97,19 +121,57 @@ var Search = function Search(_ref) {
97
121
  _React$useState8 = _slicedToArray(_React$useState7, 2),
98
122
  popularActiveIndex = _React$useState8[0],
99
123
  setPopularActiveIndex = _React$useState8[1];
124
+ var _React$useState9 = React.useState(TEXTAREA_ROW_HEIGHT),
125
+ _React$useState10 = _slicedToArray(_React$useState9, 2),
126
+ textareaHeight = _React$useState10[0],
127
+ setTextareaHeight = _React$useState10[1];
128
+ var _React$useState11 = React.useState(false),
129
+ _React$useState12 = _slicedToArray(_React$useState11, 2),
130
+ isTextareaResizing = _React$useState12[0],
131
+ setIsTextareaResizing = _React$useState12[1];
132
+ var _React$useState13 = React.useState(false),
133
+ _React$useState14 = _slicedToArray(_React$useState13, 2),
134
+ isTextareaResized = _React$useState14[0],
135
+ setIsTextareaResized = _React$useState14[1];
100
136
  var debouncedOnChange = React.useRef(debounce(function (inputValue) {
101
137
  return onChange && onChange(inputValue);
102
138
  }, changeDelay));
103
139
  var highlightedItem = React.useRef(null);
104
- var fieldNode = React.useRef(null);
140
+ var containerRef = React.useRef(null);
141
+ var fieldRef = React.useRef(null);
142
+ var labelRef = React.useRef(null);
143
+ var resizerRef = React.useRef(null);
105
144
  var correctPopularItems = React.useMemo(function () {
106
145
  return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
107
146
  }, [popularItems]);
108
147
  var isCompact = type === 'compact';
148
+ var isTextarea = textarea && !isCompact;
109
149
  var showClearIcon = isCompact && !!searchQuery;
110
150
  var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
111
151
  var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
112
152
  var showPopularItems = !!correctPopularItems.length;
153
+ var getFieldRef = function getFieldRef(node) {
154
+ if (!node) {
155
+ return;
156
+ }
157
+ fieldRef.current = node;
158
+ };
159
+ var textareaResize = React.useCallback(function () {
160
+ if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
161
+ return;
162
+ }
163
+ fieldRef.current.style.height = "".concat(minTextareaHeight, "px");
164
+ var scrollHeight = fieldRef.current.scrollHeight;
165
+ var _window$getComputedSt = window.getComputedStyle(fieldRef.current),
166
+ paddingTop = _window$getComputedSt.paddingTop,
167
+ paddingBottom = _window$getComputedSt.paddingBottom;
168
+ var innerHeight = scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
169
+ if (innerHeight >= TEXTAREA_MAX_HEIGHT) {
170
+ fieldRef.current.style.height = "".concat(TEXTAREA_MAX_HEIGHT, "px");
171
+ return;
172
+ }
173
+ fieldRef.current.style.height = "".concat(innerHeight, "px");
174
+ }, [isTextareaResized, minTextareaHeight, isTextarea]);
113
175
  var handleChange = React.useCallback(function (e) {
114
176
  var _e$target$value = e.target.value,
115
177
  inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -122,7 +184,8 @@ var Search = function Search(_ref) {
122
184
  // @ts-ignore
123
185
  debouncedOnChange.current(inputValue);
124
186
  }
125
- }, [changeDelay, onChange]);
187
+ textareaResize();
188
+ }, [changeDelay, onChange, textareaResize]);
126
189
  var handleHoverItem = React.useCallback(function (index) {
127
190
  return function () {
128
191
  setActiveIndex(index);
@@ -170,7 +233,7 @@ var Search = function Search(_ref) {
170
233
  var handlePopularItemMouseUp = React.useCallback(function () {
171
234
  var _a;
172
235
  var chosenValue = popularItems[popularActiveIndex].title;
173
- (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
236
+ (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.blur();
174
237
  onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
175
238
  }, [onPopularItemClick, popularActiveIndex, popularItems]);
176
239
  var handleKeyDownPopularItems = React.useCallback(function (e) {
@@ -192,6 +255,7 @@ var Search = function Search(_ref) {
192
255
  {
193
256
  var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
194
257
  handlePopularItemMouseUp();
258
+ e.preventDefault();
195
259
  if (currentHref) {
196
260
  window.location.href = currentHref;
197
261
  }
@@ -221,13 +285,17 @@ var Search = function Search(_ref) {
221
285
  e.preventDefault();
222
286
  break;
223
287
  case e.key === 'Enter' && activeIndex === -1:
288
+ if (isTextarea && e.shiftKey) {
289
+ return false;
290
+ }
224
291
  handleSearchSubmit();
292
+ e.preventDefault();
225
293
  break;
226
294
  default:
227
295
  break;
228
296
  }
229
297
  return false;
230
- }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
298
+ }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length, isTextarea]);
231
299
  var handleKeyDown = React.useCallback(function (e) {
232
300
  if (showNotFound && showPopularItems) {
233
301
  return handleKeyDownPopularItems(e);
@@ -239,8 +307,58 @@ var Search = function Search(_ref) {
239
307
  !!debouncedOnChange.current && debouncedOnChange.current.cancel();
240
308
  onChange === null || onChange === void 0 ? void 0 : onChange('');
241
309
  setSearchQuery('');
242
- (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.focus();
310
+ (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
311
+ };
312
+ var handleTextareaScroll = function handleTextareaScroll() {
313
+ if (!(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) || !(labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
314
+ return;
315
+ }
316
+ var scrollTop = fieldRef.current.scrollTop;
317
+ if (!scrollTop) {
318
+ labelRef.current.style.top = '';
319
+ return;
320
+ }
321
+ labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
243
322
  };
323
+ React.useEffect(function () {
324
+ textareaResize();
325
+ }, [textareaResize]);
326
+ React.useEffect(function () {
327
+ if (!resizerRef.current || !isTextarea || !showResizer) {
328
+ return;
329
+ }
330
+ var originalHeight;
331
+ var originalCoordinateY;
332
+ var handleResize = throttle(function (moveEvent) {
333
+ var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
334
+ var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
335
+ var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
336
+ setTextareaHeight(updatedHeight);
337
+ setIsTextareaResized(true);
338
+ }, throttleTime.resizeTextarea);
339
+ var _handleResizeCancel = function handleResizeCancel() {
340
+ setIsTextareaResizing(false);
341
+ window.removeEventListener('mousemove', handleResize);
342
+ window.removeEventListener('touchmove', handleResize);
343
+ window.removeEventListener('mouseup', _handleResizeCancel);
344
+ window.removeEventListener('touchend', _handleResizeCancel);
345
+ };
346
+ var handleStartResize = function handleStartResize(event) {
347
+ if (!fieldRef.current) {
348
+ return;
349
+ }
350
+ setIsTextareaResizing(true);
351
+ event.preventDefault();
352
+ originalHeight = parseFloat(getComputedStyle(fieldRef.current).getPropertyValue('height').replace('px', ''));
353
+ originalCoordinateY = event.clientY || event.touches[0].clientY;
354
+ window.addEventListener('mousemove', handleResize);
355
+ window.addEventListener('touchmove', handleResize);
356
+ window.addEventListener('mouseup', _handleResizeCancel);
357
+ window.addEventListener('touchend', _handleResizeCancel);
358
+ };
359
+ resizerRef.current.addEventListener('mousedown', handleStartResize);
360
+ resizerRef.current.addEventListener('touchstart', handleStartResize);
361
+ }, [isTextarea, minTextareaHeight, showResizer]);
244
362
  React.useEffect(function () {
245
363
  return setSearchQuery(value);
246
364
  }, [value]);
@@ -365,17 +483,14 @@ var Search = function Search(_ref) {
365
483
  hasMargin: false
366
484
  }, popularTitle || 'Популярные действия'), renderPopularItems())));
367
485
  };
368
- return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
369
- className: cn({
370
- open: isFocused,
371
- disabled: disabled,
372
- type: type,
373
- error: verification === Verification.ERROR,
374
- success: verification === Verification.VALID
375
- }, [className])
376
- }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
377
- className: cn('control', [classes === null || classes === void 0 ? void 0 : classes.control])
378
- }), isCompact && renderSubmitButton(), /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
486
+ var renderLabel = /*#__PURE__*/React.createElement("label", {
487
+ className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
488
+ htmlFor: searchId,
489
+ ref: labelRef
490
+ }, label, required && /*#__PURE__*/React.createElement("span", {
491
+ className: cn('require-mark')
492
+ }, "*"));
493
+ var renderInput = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
379
494
  id: searchId,
380
495
  className: cn('field', {
381
496
  filled: !!searchQuery,
@@ -391,13 +506,48 @@ var Search = function Search(_ref) {
391
506
  disabled: disabled,
392
507
  type: "text",
393
508
  autoComplete: "off",
394
- ref: fieldNode
395
- })), label && /*#__PURE__*/React.createElement("label", {
396
- className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
397
- htmlFor: searchId
398
- }, label, required && /*#__PURE__*/React.createElement("span", {
399
- className: cn('require-mark')
400
- }, "*")), showAdditionalElement && /*#__PURE__*/React.createElement("div", {
509
+ ref: getFieldRef
510
+ })), label && renderLabel);
511
+ var renderTextarea = /*#__PURE__*/React.createElement(React.Fragment, null, showResizer && /*#__PURE__*/React.createElement("div", _extends({
512
+ className: cn('resizer', [classes === null || classes === void 0 ? void 0 : classes.resizer]),
513
+ ref: resizerRef
514
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null)), /*#__PURE__*/React.createElement("div", {
515
+ className: cn('textarea-wrapper')
516
+ }, /*#__PURE__*/React.createElement("textarea", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
517
+ id: searchId,
518
+ className: cn('field', {
519
+ filled: !!searchQuery,
520
+ labeled: !!label
521
+ }, [classes === null || classes === void 0 ? void 0 : classes.input]),
522
+ style: {
523
+ height: "".concat(textareaHeight, "px")
524
+ },
525
+ placeholder: placeholder,
526
+ value: searchQuery,
527
+ onChange: handleChange,
528
+ onFocus: handleFocus,
529
+ onBlur: handleBlur,
530
+ onKeyDown: handleKeyDown,
531
+ onClick: handleClick,
532
+ onScroll: handleTextareaScroll,
533
+ autoComplete: "off",
534
+ ref: getFieldRef
535
+ })), label && renderLabel));
536
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
537
+ className: cn({
538
+ open: isFocused,
539
+ disabled: disabled,
540
+ type: type,
541
+ textarea: isTextarea,
542
+ error: verification === Verification.ERROR,
543
+ success: verification === Verification.VALID
544
+ }, [className])
545
+ }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
546
+ className: cn('control', {
547
+ focused: isTextareaResizing
548
+ }, [classes === null || classes === void 0 ? void 0 : classes.control]),
549
+ ref: containerRef
550
+ }), isCompact && renderSubmitButton(), isTextarea ? renderTextarea : renderInput, showAdditionalElement && /*#__PURE__*/React.createElement("div", {
401
551
  className: cn('icons')
402
552
  }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/React.createElement(Preloader, {
403
553
  delay: false,
package/dist/es/components/Search/i/textarea-resizer.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 11L11 1" stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
3
+ <path d="M7 11L11 7" stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
4
+ </svg>
package/dist/es/components/TextField/TextField.js CHANGED
@@ -6,6 +6,7 @@ import "core-js/modules/es.object.get-own-property-descriptor.js";
6
6
  import "core-js/modules/es.parse-float.js";
7
7
  import "core-js/modules/es.regexp.exec.js";
8
8
  import "core-js/modules/es.string.replace.js";
9
+ import "core-js/modules/web.timers.js";
9
10
  /* eslint-disable react/no-multi-comp */
10
11
  import * as React from 'react';
11
12
  import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
@@ -54,6 +55,9 @@ var ResizeIcon = function ResizeIcon(props) {
54
55
  d: "M1 11L11 1M7 11l4-4"
55
56
  }));
56
57
  };
58
+ var isElement = function isElement(target) {
59
+ return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
60
+ };
57
61
  var TEXTAREA_MAX_HEIGHT = 144;
58
62
  var DEFAULT_LABEL_TOP_POSITION = 16;
59
63
  var DEFAULT_ROW_COUNT = 3;
@@ -154,6 +158,10 @@ var TextField = function TextField(_ref) {
154
158
  _useState14 = _slicedToArray(_useState13, 2),
155
159
  isTextareaResized = _useState14[0],
156
160
  setIsTextareaResized = _useState14[1];
161
+ var _useState15 = useState(null),
162
+ _useState16 = _slicedToArray(_useState15, 2),
163
+ clickedElement = _useState16[0],
164
+ setClickedElement = _useState16[1];
157
165
  var fieldNode = useRef();
158
166
  var labelRef = useRef(null);
159
167
  var resizerRef = useRef(null);
@@ -244,6 +252,13 @@ var TextField = function TextField(_ref) {
244
252
  checkSymbolMaxLimit(e.target.value);
245
253
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
246
254
  };
255
+ var handleMouseDown = function handleMouseDown(e) {
256
+ if (isElement(e.target)) {
257
+ setClickedElement(e.target);
258
+ return;
259
+ }
260
+ setClickedElement(null);
261
+ };
247
262
  var handleNoticeTransitionEnd = useCallback(function () {
248
263
  !noticeText && setCurrentNoticeText(noticeText);
249
264
  }, [noticeText]);
@@ -272,7 +287,9 @@ var TextField = function TextField(_ref) {
272
287
  });
273
288
  (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
274
289
  field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
275
- field === null || field === void 0 ? void 0 : field.focus();
290
+ setTimeout(function () {
291
+ return field === null || field === void 0 ? void 0 : field.focus();
292
+ });
276
293
  }
277
294
  onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
278
295
  }, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
@@ -280,8 +297,13 @@ var TextField = function TextField(_ref) {
280
297
  onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
281
298
  }, [onFocus]);
282
299
  var handleBlur = useCallback(function (e) {
300
+ var _a;
301
+ setClickedElement(null);
302
+ if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
303
+ return;
304
+ }
283
305
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
284
- }, [onBlur]);
306
+ }, [onBlur, clickedElement]);
285
307
  var handleBeforeMaskChange = useCallback(function (_ref2) {
286
308
  var previousState = _ref2.previousState,
287
309
  nextState = _ref2.nextState;
@@ -416,7 +438,8 @@ var TextField = function TextField(_ref) {
416
438
  }), /*#__PURE__*/React.createElement("div", {
417
439
  className: cn('field-wrapper', {
418
440
  textarea: textarea && textareaType
419
- })
441
+ }),
442
+ onMouseDown: handleMouseDown
420
443
  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", _extends({
421
444
  className: cn('resizer'),
422
445
  ref: resizerRef
package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js CHANGED
@@ -55,7 +55,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
55
55
  className: cn('error-tooltip'),
56
56
  triggerElement: tooltipTriggerElement,
57
57
  colorTheme: "blue",
58
- placement: "bottom"
58
+ placement: "bottom",
59
+ offset: "small"
59
60
  }, errorText));
60
61
  }
61
62
  return /*#__PURE__*/React.createElement("span", {
package/dist/lib/components/Search/Search.css CHANGED
@@ -1 +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)}
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: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 CHANGED
@@ -1,5 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import './Search.scss';
3
+ export declare const MinTextareaHeight: {
4
+ readonly ONE_ROW: 24;
5
+ readonly THREE_ROWS: number;
6
+ };
7
+ type MinTextareaHeightType = (typeof MinTextareaHeight)[keyof typeof MinTextareaHeight];
3
8
  export declare const Verification: {
4
9
  readonly VALID: "valid";
5
10
  readonly ERROR: "error";
@@ -39,11 +44,14 @@ export interface ISearchProps {
39
44
  notice?: Record<string, string>;
40
45
  popularItem?: Record<string, string>;
41
46
  clearButton?: Record<string, string>;
47
+ resizer?: Record<string, string>;
42
48
  };
43
49
  /** Значение */
44
50
  value?: string;
45
51
  /** Вид отображения */
46
52
  type?: 'textfield' | 'compact';
53
+ /** Включить режим textarea */
54
+ textarea?: boolean;
47
55
  /** Заголовок поля */
48
56
  label?: string;
49
57
  /** HTML идентификатор поля поиска */
@@ -77,6 +85,7 @@ export interface ISearchProps {
77
85
  textNotFound?: string;
78
86
  popularTitle?: string;
79
87
  popularItem?: string;
88
+ resizer?: string;
80
89
  };
81
90
  /** Отображение загрузки */
82
91
  showLoader?: boolean;
@@ -90,14 +99,18 @@ export interface ISearchProps {
90
99
  popularTitle?: string;
91
100
  /** Ссылка на элемент списка с результатами */
92
101
  listRef?: React.Ref<HTMLDivElement>;
102
+ /** Минимальная высота textarea, px */
103
+ minTextareaHeight?: MinTextareaHeightType;
104
+ /** Показать хендлер для ресайза текстового поля */
105
+ showResizer?: boolean;
93
106
  /** Обработчик изменения поля */
94
107
  onChange?: (value: string) => void;
95
108
  /** Обработчик нажатия на enter */
96
109
  onSubmit?: (value: string) => void;
97
110
  /** Обработчик выхода из фокуса */
98
- onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
111
+ onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
99
112
  /** Обработчик входа в фокус */
100
- onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
113
+ onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
101
114
  /** Обработчик нажатия на популярный элемент */
102
115
  onPopularItemClick?: (popularItemValue?: string) => void;
103
116
  }
package/dist/lib/components/Search/Search.js CHANGED
@@ -4,11 +4,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports["default"] = exports.Verification = exports.SearchItemsPaddings = void 0;
7
+ exports["default"] = exports.Verification = exports.SearchItemsPaddings = exports.MinTextareaHeight = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  require("core-js/modules/es.array.map.js");
11
11
  require("core-js/modules/es.array.slice.js");
12
+ require("core-js/modules/es.parse-float.js");
12
13
  require("core-js/modules/es.regexp.constructor.js");
13
14
  require("core-js/modules/es.regexp.exec.js");
14
15
  require("core-js/modules/es.regexp.sticky.js");
@@ -18,6 +19,8 @@ require("core-js/modules/es.string.split.js");
18
19
  var React = _interopRequireWildcard(require("react"));
19
20
  var _uiHelpers = require("@megafon/ui-helpers");
20
21
  var _lodash = _interopRequireDefault(require("lodash.debounce"));
22
+ var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
23
+ var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
21
24
  var _Caption = _interopRequireDefault(require("../Caption/Caption"));
22
25
  var _Header = _interopRequireDefault(require("../Header/Header"));
23
26
  var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
@@ -46,8 +49,25 @@ var ClearIcon = function ClearIcon(props) {
46
49
  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"
47
50
  }));
48
51
  };
52
+ var ResizeIcon = function ResizeIcon(props) {
53
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
54
+ width: 12,
55
+ height: 12
56
+ }, props), /*#__PURE__*/React.createElement("path", {
57
+ d: "M1 11L11 1M7 11l4-4"
58
+ }));
59
+ };
60
+ var DEFAULT_ROW_COUNT = 3;
61
+ var MAX_ROW_COUNT = 6;
62
+ var TEXTAREA_ROW_HEIGHT = 24;
63
+ var TEXTAREA_MAX_HEIGHT = TEXTAREA_ROW_HEIGHT * MAX_ROW_COUNT;
64
+ var DEFAULT_LABEL_TOP_POSITION = 16;
49
65
  var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
50
66
  var MAX_POPULAR_ITEMS_LENGTH = 5;
67
+ var MinTextareaHeight = exports.MinTextareaHeight = {
68
+ ONE_ROW: TEXTAREA_ROW_HEIGHT,
69
+ THREE_ROWS: TEXTAREA_ROW_HEIGHT * DEFAULT_ROW_COUNT
70
+ };
51
71
  var Verification = exports.Verification = {
52
72
  VALID: 'valid',
53
73
  ERROR: 'error'
@@ -78,6 +98,7 @@ var Search = function Search(_ref) {
78
98
  classes = _ref.classes,
79
99
  _ref$type = _ref.type,
80
100
  type = _ref$type === void 0 ? 'textfield' : _ref$type,
101
+ textarea = _ref.textarea,
81
102
  showLoader = _ref.showLoader,
82
103
  showNotFound = _ref.showNotFound,
83
104
  textNotFound = _ref.textNotFound,
@@ -85,6 +106,9 @@ var Search = function Search(_ref) {
85
106
  popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
86
107
  popularTitle = _ref.popularTitle,
87
108
  listRef = _ref.listRef,
109
+ _ref$minTextareaHeigh = _ref.minTextareaHeight,
110
+ minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
111
+ showResizer = _ref.showResizer,
88
112
  onChange = _ref.onChange,
89
113
  onSubmit = _ref.onSubmit,
90
114
  onBlur = _ref.onBlur,
@@ -106,19 +130,57 @@ var Search = function Search(_ref) {
106
130
  _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
107
131
  popularActiveIndex = _React$useState8[0],
108
132
  setPopularActiveIndex = _React$useState8[1];
133
+ var _React$useState9 = React.useState(TEXTAREA_ROW_HEIGHT),
134
+ _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
135
+ textareaHeight = _React$useState10[0],
136
+ setTextareaHeight = _React$useState10[1];
137
+ var _React$useState11 = React.useState(false),
138
+ _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
139
+ isTextareaResizing = _React$useState12[0],
140
+ setIsTextareaResizing = _React$useState12[1];
141
+ var _React$useState13 = React.useState(false),
142
+ _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
143
+ isTextareaResized = _React$useState14[0],
144
+ setIsTextareaResized = _React$useState14[1];
109
145
  var debouncedOnChange = React.useRef((0, _lodash["default"])(function (inputValue) {
110
146
  return onChange && onChange(inputValue);
111
147
  }, changeDelay));
112
148
  var highlightedItem = React.useRef(null);
113
- var fieldNode = React.useRef(null);
149
+ var containerRef = React.useRef(null);
150
+ var fieldRef = React.useRef(null);
151
+ var labelRef = React.useRef(null);
152
+ var resizerRef = React.useRef(null);
114
153
  var correctPopularItems = React.useMemo(function () {
115
154
  return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
116
155
  }, [popularItems]);
117
156
  var isCompact = type === 'compact';
157
+ var isTextarea = textarea && !isCompact;
118
158
  var showClearIcon = isCompact && !!searchQuery;
119
159
  var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
120
160
  var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
121
161
  var showPopularItems = !!correctPopularItems.length;
162
+ var getFieldRef = function getFieldRef(node) {
163
+ if (!node) {
164
+ return;
165
+ }
166
+ fieldRef.current = node;
167
+ };
168
+ var textareaResize = React.useCallback(function () {
169
+ if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
170
+ return;
171
+ }
172
+ fieldRef.current.style.height = "".concat(minTextareaHeight, "px");
173
+ var scrollHeight = fieldRef.current.scrollHeight;
174
+ var _window$getComputedSt = window.getComputedStyle(fieldRef.current),
175
+ paddingTop = _window$getComputedSt.paddingTop,
176
+ paddingBottom = _window$getComputedSt.paddingBottom;
177
+ var innerHeight = scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
178
+ if (innerHeight >= TEXTAREA_MAX_HEIGHT) {
179
+ fieldRef.current.style.height = "".concat(TEXTAREA_MAX_HEIGHT, "px");
180
+ return;
181
+ }
182
+ fieldRef.current.style.height = "".concat(innerHeight, "px");
183
+ }, [isTextareaResized, minTextareaHeight, isTextarea]);
122
184
  var handleChange = React.useCallback(function (e) {
123
185
  var _e$target$value = e.target.value,
124
186
  inputValue = _e$target$value === void 0 ? '' : _e$target$value;
@@ -131,7 +193,8 @@ var Search = function Search(_ref) {
131
193
  // @ts-ignore
132
194
  debouncedOnChange.current(inputValue);
133
195
  }
134
- }, [changeDelay, onChange]);
196
+ textareaResize();
197
+ }, [changeDelay, onChange, textareaResize]);
135
198
  var handleHoverItem = React.useCallback(function (index) {
136
199
  return function () {
137
200
  setActiveIndex(index);
@@ -179,7 +242,7 @@ var Search = function Search(_ref) {
179
242
  var handlePopularItemMouseUp = React.useCallback(function () {
180
243
  var _a;
181
244
  var chosenValue = popularItems[popularActiveIndex].title;
182
- (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.blur();
245
+ (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.blur();
183
246
  onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
184
247
  }, [onPopularItemClick, popularActiveIndex, popularItems]);
185
248
  var handleKeyDownPopularItems = React.useCallback(function (e) {
@@ -201,6 +264,7 @@ var Search = function Search(_ref) {
201
264
  {
202
265
  var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
203
266
  handlePopularItemMouseUp();
267
+ e.preventDefault();
204
268
  if (currentHref) {
205
269
  window.location.href = currentHref;
206
270
  }
@@ -230,13 +294,17 @@ var Search = function Search(_ref) {
230
294
  e.preventDefault();
231
295
  break;
232
296
  case e.key === 'Enter' && activeIndex === -1:
297
+ if (isTextarea && e.shiftKey) {
298
+ return false;
299
+ }
233
300
  handleSearchSubmit();
301
+ e.preventDefault();
234
302
  break;
235
303
  default:
236
304
  break;
237
305
  }
238
306
  return false;
239
- }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length]);
307
+ }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length, isTextarea]);
240
308
  var handleKeyDown = React.useCallback(function (e) {
241
309
  if (showNotFound && showPopularItems) {
242
310
  return handleKeyDownPopularItems(e);
@@ -248,8 +316,58 @@ var Search = function Search(_ref) {
248
316
  !!debouncedOnChange.current && debouncedOnChange.current.cancel();
249
317
  onChange === null || onChange === void 0 ? void 0 : onChange('');
250
318
  setSearchQuery('');
251
- (_a = fieldNode === null || fieldNode === void 0 ? void 0 : fieldNode.current) === null || _a === void 0 ? void 0 : _a.focus();
319
+ (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
320
+ };
321
+ var handleTextareaScroll = function handleTextareaScroll() {
322
+ if (!(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) || !(labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
323
+ return;
324
+ }
325
+ var scrollTop = fieldRef.current.scrollTop;
326
+ if (!scrollTop) {
327
+ labelRef.current.style.top = '';
328
+ return;
329
+ }
330
+ labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
252
331
  };
332
+ React.useEffect(function () {
333
+ textareaResize();
334
+ }, [textareaResize]);
335
+ React.useEffect(function () {
336
+ if (!resizerRef.current || !isTextarea || !showResizer) {
337
+ return;
338
+ }
339
+ var originalHeight;
340
+ var originalCoordinateY;
341
+ var handleResize = (0, _lodash2["default"])(function (moveEvent) {
342
+ var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
343
+ var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
344
+ var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
345
+ setTextareaHeight(updatedHeight);
346
+ setIsTextareaResized(true);
347
+ }, _throttleTime["default"].resizeTextarea);
348
+ var _handleResizeCancel = function handleResizeCancel() {
349
+ setIsTextareaResizing(false);
350
+ window.removeEventListener('mousemove', handleResize);
351
+ window.removeEventListener('touchmove', handleResize);
352
+ window.removeEventListener('mouseup', _handleResizeCancel);
353
+ window.removeEventListener('touchend', _handleResizeCancel);
354
+ };
355
+ var handleStartResize = function handleStartResize(event) {
356
+ if (!fieldRef.current) {
357
+ return;
358
+ }
359
+ setIsTextareaResizing(true);
360
+ event.preventDefault();
361
+ originalHeight = parseFloat(getComputedStyle(fieldRef.current).getPropertyValue('height').replace('px', ''));
362
+ originalCoordinateY = event.clientY || event.touches[0].clientY;
363
+ window.addEventListener('mousemove', handleResize);
364
+ window.addEventListener('touchmove', handleResize);
365
+ window.addEventListener('mouseup', _handleResizeCancel);
366
+ window.addEventListener('touchend', _handleResizeCancel);
367
+ };
368
+ resizerRef.current.addEventListener('mousedown', handleStartResize);
369
+ resizerRef.current.addEventListener('touchstart', handleStartResize);
370
+ }, [isTextarea, minTextareaHeight, showResizer]);
253
371
  React.useEffect(function () {
254
372
  return setSearchQuery(value);
255
373
  }, [value]);
@@ -374,17 +492,14 @@ var Search = function Search(_ref) {
374
492
  hasMargin: false
375
493
  }, popularTitle || 'Популярные действия'), renderPopularItems())));
376
494
  };
377
- return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
378
- className: cn({
379
- open: isFocused,
380
- disabled: disabled,
381
- type: type,
382
- error: verification === Verification.ERROR,
383
- success: verification === Verification.VALID
384
- }, [className])
385
- }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
386
- className: cn('control', [classes === null || classes === void 0 ? void 0 : classes.control])
387
- }), isCompact && renderSubmitButton(), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
495
+ var renderLabel = /*#__PURE__*/React.createElement("label", {
496
+ className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
497
+ htmlFor: searchId,
498
+ ref: labelRef
499
+ }, label, required && /*#__PURE__*/React.createElement("span", {
500
+ className: cn('require-mark')
501
+ }, "*"));
502
+ 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), {
388
503
  id: searchId,
389
504
  className: cn('field', {
390
505
  filled: !!searchQuery,
@@ -400,13 +515,48 @@ var Search = function Search(_ref) {
400
515
  disabled: disabled,
401
516
  type: "text",
402
517
  autoComplete: "off",
403
- ref: fieldNode
404
- })), label && /*#__PURE__*/React.createElement("label", {
405
- className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
406
- htmlFor: searchId
407
- }, label, required && /*#__PURE__*/React.createElement("span", {
408
- className: cn('require-mark')
409
- }, "*")), showAdditionalElement && /*#__PURE__*/React.createElement("div", {
518
+ ref: getFieldRef
519
+ })), label && renderLabel);
520
+ var renderTextarea = /*#__PURE__*/React.createElement(React.Fragment, null, showResizer && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
521
+ className: cn('resizer', [classes === null || classes === void 0 ? void 0 : classes.resizer]),
522
+ ref: resizerRef
523
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null)), /*#__PURE__*/React.createElement("div", {
524
+ className: cn('textarea-wrapper')
525
+ }, /*#__PURE__*/React.createElement("textarea", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
526
+ id: searchId,
527
+ className: cn('field', {
528
+ filled: !!searchQuery,
529
+ labeled: !!label
530
+ }, [classes === null || classes === void 0 ? void 0 : classes.input]),
531
+ style: {
532
+ height: "".concat(textareaHeight, "px")
533
+ },
534
+ placeholder: placeholder,
535
+ value: searchQuery,
536
+ onChange: handleChange,
537
+ onFocus: handleFocus,
538
+ onBlur: handleBlur,
539
+ onKeyDown: handleKeyDown,
540
+ onClick: handleClick,
541
+ onScroll: handleTextareaScroll,
542
+ autoComplete: "off",
543
+ ref: getFieldRef
544
+ })), label && renderLabel));
545
+ return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
546
+ className: cn({
547
+ open: isFocused,
548
+ disabled: disabled,
549
+ type: type,
550
+ textarea: isTextarea,
551
+ error: verification === Verification.ERROR,
552
+ success: verification === Verification.VALID
553
+ }, [className])
554
+ }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
555
+ className: cn('control', {
556
+ focused: isTextareaResizing
557
+ }, [classes === null || classes === void 0 ? void 0 : classes.control]),
558
+ ref: containerRef
559
+ }), isCompact && renderSubmitButton(), isTextarea ? renderTextarea : renderInput, showAdditionalElement && /*#__PURE__*/React.createElement("div", {
410
560
  className: cn('icons')
411
561
  }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/React.createElement(_Preloader["default"], {
412
562
  delay: false,
package/dist/lib/components/Search/i/textarea-resizer.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M1 11L11 1" stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
3
+ <path d="M7 11L11 7" stroke-opacity="0.2" stroke-width="2" stroke-linecap="round"/>
4
+ </svg>
package/dist/lib/components/TextField/TextField.js CHANGED
@@ -13,6 +13,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
13
13
  require("core-js/modules/es.parse-float.js");
14
14
  require("core-js/modules/es.regexp.exec.js");
15
15
  require("core-js/modules/es.string.replace.js");
16
+ require("core-js/modules/web.timers.js");
16
17
  var _react = _interopRequireWildcard(require("react"));
17
18
  var React = _react;
18
19
  var _uiHelpers = require("@megafon/ui-helpers");
@@ -64,6 +65,9 @@ var ResizeIcon = function ResizeIcon(props) {
64
65
  d: "M1 11L11 1M7 11l4-4"
65
66
  }));
66
67
  };
68
+ var isElement = function isElement(target) {
69
+ return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
70
+ };
67
71
  var TEXTAREA_MAX_HEIGHT = 144;
68
72
  var DEFAULT_LABEL_TOP_POSITION = 16;
69
73
  var DEFAULT_ROW_COUNT = 3;
@@ -164,6 +168,10 @@ var TextField = function TextField(_ref) {
164
168
  _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
165
169
  isTextareaResized = _useState14[0],
166
170
  setIsTextareaResized = _useState14[1];
171
+ var _useState15 = (0, _react.useState)(null),
172
+ _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
173
+ clickedElement = _useState16[0],
174
+ setClickedElement = _useState16[1];
167
175
  var fieldNode = (0, _react.useRef)();
168
176
  var labelRef = (0, _react.useRef)(null);
169
177
  var resizerRef = (0, _react.useRef)(null);
@@ -254,6 +262,13 @@ var TextField = function TextField(_ref) {
254
262
  checkSymbolMaxLimit(e.target.value);
255
263
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
256
264
  };
265
+ var handleMouseDown = function handleMouseDown(e) {
266
+ if (isElement(e.target)) {
267
+ setClickedElement(e.target);
268
+ return;
269
+ }
270
+ setClickedElement(null);
271
+ };
257
272
  var handleNoticeTransitionEnd = (0, _react.useCallback)(function () {
258
273
  !noticeText && setCurrentNoticeText(noticeText);
259
274
  }, [noticeText]);
@@ -282,7 +297,9 @@ var TextField = function TextField(_ref) {
282
297
  });
283
298
  (_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
284
299
  field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
285
- field === null || field === void 0 ? void 0 : field.focus();
300
+ setTimeout(function () {
301
+ return field === null || field === void 0 ? void 0 : field.focus();
302
+ });
286
303
  }
287
304
  onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
288
305
  }, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
@@ -290,8 +307,13 @@ var TextField = function TextField(_ref) {
290
307
  onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
291
308
  }, [onFocus]);
292
309
  var handleBlur = (0, _react.useCallback)(function (e) {
310
+ var _a;
311
+ setClickedElement(null);
312
+ if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
313
+ return;
314
+ }
293
315
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
294
- }, [onBlur]);
316
+ }, [onBlur, clickedElement]);
295
317
  var handleBeforeMaskChange = (0, _react.useCallback)(function (_ref2) {
296
318
  var previousState = _ref2.previousState,
297
319
  nextState = _ref2.nextState;
@@ -426,7 +448,8 @@ var TextField = function TextField(_ref) {
426
448
  }), /*#__PURE__*/React.createElement("div", {
427
449
  className: cn('field-wrapper', {
428
450
  textarea: textarea && textareaType
429
- })
451
+ }),
452
+ onMouseDown: handleMouseDown
430
453
  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
431
454
  className: cn('resizer'),
432
455
  ref: resizerRef
package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js CHANGED
@@ -64,7 +64,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
64
64
  className: cn('error-tooltip'),
65
65
  triggerElement: tooltipTriggerElement,
66
66
  colorTheme: "blue",
67
- placement: "bottom"
67
+ placement: "bottom",
68
+ offset: "small"
68
69
  }, errorText));
69
70
  }
70
71
  return /*#__PURE__*/React.createElement("span", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "7.3.0",
3
+ "version": "7.4.1",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -50,7 +50,7 @@
50
50
  "@babel/preset-env": "^7.8.6",
51
51
  "@babel/preset-react": "^7.8.3",
52
52
  "@babel/preset-typescript": "^7.8.3",
53
- "@megafon/ui-icons": "^3.2.1",
53
+ "@megafon/ui-icons": "^3.3.0",
54
54
  "@svgr/core": "^2.4.1",
55
55
  "@testing-library/jest-dom": "^6.5.0",
56
56
  "@testing-library/react": "^16.0.1",
@@ -104,5 +104,5 @@
104
104
  "simplebar-react": "^3.2.5",
105
105
  "swiper": "^11.1.1"
106
106
  },
107
- "gitHead": "b77283ba6760e14912cc98f3e1745ed53477cd22"
107
+ "gitHead": "0e2e21bc1f63599d5c0c1c606178422e1d70e787"
108
108
  }