@megafon/ui-core 6.2.1 → 6.4.0

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

@@ -22,7 +22,7 @@
     opacity: 1;
   }
 }
-.mfui-search {
+.mfui-v6-search {
   position: relative;
   z-index: auto;
   -webkit-box-sizing: border-box;
@@ -33,13 +33,13 @@
   font-size: 15px;
   line-height: 24px;
 }
-.mfui-search__require-mark {
+.mfui-v6-search__require-mark {
   margin-left: 1px;
   color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
-.mfui-search__control {
+.mfui-v6-search__control {
   position: relative;
   z-index: 1;
   display: -webkit-box;
@@ -58,61 +58,61 @@
       -ms-user-select: none;
           user-select: none;
 }
-.mfui-search__field_labeled::-webkit-input-placeholder {
+.mfui-v6-search__field_labeled::-webkit-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__field_labeled::-moz-placeholder {
+.mfui-v6-search__field_labeled::-moz-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__field_labeled:-moz-placeholder {
+.mfui-v6-search__field_labeled:-moz-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__field_labeled:-ms-input-placeholder {
+.mfui-v6-search__field_labeled:-ms-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__field_labeled::-ms-input-placeholder {
+.mfui-v6-search__field_labeled::-ms-input-placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__field_labeled::placeholder {
+.mfui-v6-search__field_labeled::placeholder {
   color: var(--spbSky3);
   opacity: 0;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
-.mfui-search__field:focus::-webkit-input-placeholder {
+.mfui-v6-search__field:focus::-webkit-input-placeholder {
   opacity: 1;
 }
-.mfui-search__field:focus::-moz-placeholder {
+.mfui-v6-search__field:focus::-moz-placeholder {
   opacity: 1;
 }
-.mfui-search__field:focus:-moz-placeholder {
+.mfui-v6-search__field:focus:-moz-placeholder {
   opacity: 1;
 }
-.mfui-search__field:focus:-ms-input-placeholder {
+.mfui-v6-search__field:focus:-ms-input-placeholder {
   opacity: 1;
 }
-.mfui-search__field:focus::-ms-input-placeholder {
+.mfui-v6-search__field:focus::-ms-input-placeholder {
   opacity: 1;
 }
-.mfui-search__field:focus::placeholder {
+.mfui-v6-search__field:focus::placeholder {
   opacity: 1;
 }
-.mfui-search__field {
+.mfui-v6-search__field {
   position: relative;
   z-index: 1;
   display: block;
@@ -143,11 +143,11 @@
   caret-color: var(--brandGreen);
 }
 @media screen and (max-width: 767px) {
-  .mfui-search__field {
+  .mfui-v6-search__field {
     width: 90%;
   }
 }
-.mfui-search__label {
+.mfui-v6-search__label {
   position: absolute;
   z-index: 1;
   display: block;
@@ -160,7 +160,7 @@
   font-size: 15px;
   line-height: 24px;
 }
-.mfui-search__list {
+.mfui-v6-search__list {
   position: absolute;
   top: calc(100% + 1px);
   right: -1px;
@@ -172,8 +172,8 @@
   -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
-.mfui-search__clear,
-.mfui-search__submit-button {
+.mfui-v6-search__clear,
+.mfui-v6-search__submit-button {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -190,14 +190,14 @@
   background-color: transparent;
   cursor: pointer;
 }
-.mfui-search__list-inner {
+.mfui-v6-search__list-inner {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   max-height: 368px;
   padding: 16px;
   overflow-y: auto;
 }
-.mfui-search__list-item {
+.mfui-v6-search__list-item {
   font-family: inherit;
   padding-top: 12px;
   padding-bottom: 12px;
@@ -205,15 +205,15 @@
   background-color: var(--base);
   cursor: pointer;
 }
-.mfui-search__list-item_paddings_large {
+.mfui-v6-search__list-item_paddings_large {
   padding-right: 32px;
   padding-left: 32px;
 }
-.mfui-search__list-item_paddings_small {
+.mfui-v6-search__list-item_paddings_small {
   padding-right: 12px;
   padding-left: 12px;
 }
-.mfui-search__popular-item {
+.mfui-v6-search__popular-item {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -228,7 +228,7 @@
   background-color: var(--base);
   cursor: pointer;
 }
-.mfui-search__popular-icon {
+.mfui-v6-search__popular-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -244,12 +244,12 @@
   height: 32px;
   margin-right: 16px;
 }
-.mfui-search__list-item_active,
-.mfui-search__popular-item_active {
+.mfui-v6-search__list-item_active,
+.mfui-v6-search__popular-item_active {
   background-color: var(--spbSky0);
 }
-.mfui-search__item-title,
-.mfui-search__popular-item-title {
+.mfui-v6-search__item-title,
+.mfui-v6-search__popular-item-title {
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -257,8 +257,8 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.mfui-search__item-title:after,
-.mfui-search__popular-item-title:after {
+.mfui-v6-search__item-title:after,
+.mfui-v6-search__popular-item-title:after {
   content: '';
   position: absolute;
   top: 0;
@@ -271,29 +271,29 @@
   mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
   mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
 }
-.mfui-search__list-item_active .mfui-search__item-title:after,
-.mfui-search__popular-item_active .mfui-search__popular-item-title:after {
+.mfui-v6-search__list-item_active .mfui-v6-search__item-title:after,
+.mfui-v6-search__popular-item_active .mfui-v6-search__popular-item-title:after {
   background: var(--spbSky0);
   -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
   -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
   mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
   mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
 }
-.mfui-search__highlighted-fragment {
+.mfui-v6-search__highlighted-fragment {
   font-weight: bold;
 }
-.mfui-search__notice {
+.mfui-v6-search__notice {
   margin-top: 4px;
   font-size: 12px;
   line-height: 16px;
 }
-.mfui-search__notice_error {
+.mfui-v6-search__notice_error {
   color: var(--fury);
 }
-.mfui-search__notice_success {
+.mfui-v6-search__notice_success {
   color: var(--brandGreen);
 }
-.mfui-search__icons {
+.mfui-v6-search__icons {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -302,27 +302,27 @@
           align-items: center;
   height: 100%;
 }
-.mfui-search__list_not-found {
+.mfui-v6-search__list_not-found {
   cursor: default;
 }
-.mfui-search__not-found-text {
+.mfui-v6-search__not-found-text {
   font-family: inherit;
   padding: 12px 32px;
   color: var(--spbSky3);
   background-color: var(--base);
 }
-.mfui-search__not-found-text_show-popular {
+.mfui-v6-search__not-found-text_show-popular {
   padding: 0 0 16px 0;
   border-bottom: 1px solid var(--spbSky2);
 }
-.mfui-search__popular-title {
+.mfui-v6-search__popular-title {
   padding-top: 16px;
   padding-bottom: 8px;
 }
-.mfui-search_open {
+.mfui-v6-search_open {
   z-index: 12;
 }
-.mfui-search_open .mfui-search__list {
+.mfui-v6-search_open .mfui-v6-search__list {
   display: block;
   -webkit-animation-name: listAppear;
           animation-name: listAppear;
@@ -331,44 +331,44 @@
   -webkit-animation-timing-function: ease-in-out;
           animation-timing-function: ease-in-out;
 }
-.mfui-search_type_textfield .mfui-search__control {
+.mfui-v6-search_type_textfield .mfui-v6-search__control {
   height: 60px;
   padding: 0 16px 0 16px;
   border-color: var(--spbSky2);
   border-radius: 12px;
   background-color: var(--base);
 }
-.mfui-search_type_textfield .mfui-search__control:hover {
+.mfui-v6-search_type_textfield .mfui-v6-search__control:hover {
   border-color: var(--content);
 }
-.mfui-search_type_textfield .mfui-search__label {
+.mfui-v6-search_type_textfield .mfui-v6-search__label {
   top: 17px;
 }
-.mfui-search_type_textfield .mfui-search__field_filled + .mfui-search__label,
-.mfui-search_type_textfield .mfui-search__field:focus + .mfui-search__label {
+.mfui-v6-search_type_textfield .mfui-v6-search__field_filled + .mfui-v6-search__label,
+.mfui-v6-search_type_textfield .mfui-v6-search__field:focus + .mfui-v6-search__label {
   -webkit-transform: scale(0.8) translate(-12.5%, -75%);
           transform: scale(0.8) translate(-12.5%, -75%);
 }
-.mfui-search_type_textfield .mfui-search__field_labeled {
+.mfui-v6-search_type_textfield .mfui-v6-search__field_labeled {
   padding-top: 22px;
 }
-.mfui-search_type_textfield .mfui-search__submit-icon {
+.mfui-v6-search_type_textfield .mfui-v6-search__submit-icon {
   width: 32px;
   height: 32px;
   fill: var(--content);
 }
-.mfui-search_type_textfield.mfui-search_disabled .mfui-search__control {
+.mfui-v6-search_type_textfield.mfui-v6-search_disabled .mfui-v6-search__control {
   border-color: var(--spbSky1);
   background-color: var(--spbSky1);
 }
-.mfui-search_type_textfield.mfui-search_disabled .mfui-search__submit-icon {
+.mfui-v6-search_type_textfield.mfui-v6-search_disabled .mfui-v6-search__submit-icon {
   opacity: 0.5;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.mfui-search_type_compact .mfui-search__control {
+.mfui-v6-search_type_compact .mfui-v6-search__control {
   height: 40px;
   padding: 0 12px;
   border-color: var(--spbSky0);
@@ -377,29 +377,29 @@
   -webkit-transition: background-color, border-color 0.3s;
   transition: background-color, border-color 0.3s;
 }
-.mfui-search_type_compact .mfui-search__control:hover {
+.mfui-v6-search_type_compact .mfui-v6-search__control:hover {
   background-color: var(--spbSky1);
 }
-.mfui-search_type_compact .mfui-search__field {
+.mfui-v6-search_type_compact .mfui-v6-search__field {
   height: 100%;
   padding: 8px 0 8px 12px;
 }
-.mfui-search_type_compact .mfui-search__label {
+.mfui-v6-search_type_compact .mfui-v6-search__label {
   top: 50%;
   left: 44px;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-.mfui-search_type_compact .mfui-search__field_filled + .mfui-search__label,
-.mfui-search_type_compact .mfui-search__field:focus + .mfui-search__label {
+.mfui-v6-search_type_compact .mfui-v6-search__field_filled + .mfui-v6-search__label,
+.mfui-v6-search_type_compact .mfui-v6-search__field:focus + .mfui-v6-search__label {
   opacity: 0;
 }
-.mfui-search_type_compact .mfui-search__submit-icon {
+.mfui-v6-search_type_compact .mfui-v6-search__submit-icon {
   width: 20px;
   height: 20px;
   fill: var(--spbSky3);
 }
-.mfui-search_type_compact .mfui-search__clear {
+.mfui-v6-search_type_compact .mfui-v6-search__clear {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -417,37 +417,37 @@
   background-color: transparent;
   cursor: pointer;
 }
-.mfui-search_type_compact .mfui-search__clear-icon {
+.mfui-v6-search_type_compact .mfui-v6-search__clear-icon {
   width: 24px;
   height: 24px;
   fill: var(--spbSky3);
 }
-.mfui-search_type_compact .mfui-search__clear-icon:hover {
+.mfui-v6-search_type_compact .mfui-v6-search__clear-icon:hover {
   fill: var(--content);
 }
-.mfui-search_type_compact .mfui-search__clear-icon:active {
+.mfui-v6-search_type_compact .mfui-v6-search__clear-icon:active {
   fill: var(--buttonDown);
 }
-.mfui-search_type_compact.mfui-search_open .mfui-search__control {
+.mfui-v6-search_type_compact.mfui-v6-search_open .mfui-v6-search__control {
   background-color: var(--spbSky1);
 }
-.mfui-search_type_compact.mfui-search_open .mfui-search__submit-icon {
+.mfui-v6-search_type_compact.mfui-v6-search_open .mfui-v6-search__submit-icon {
   fill: var(--content);
 }
-.mfui-search_disabled .mfui-search__control {
+.mfui-v6-search_disabled .mfui-v6-search__control {
   cursor: default;
   pointer-events: none;
 }
-.mfui-search_disabled .mfui-search__submit-icon {
+.mfui-v6-search_disabled .mfui-v6-search__submit-icon {
   opacity: 0.5;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.mfui-search_error .mfui-search__control {
+.mfui-v6-search_error .mfui-v6-search__control {
   border-color: var(--fury);
 }
-.mfui-search_success .mfui-search__control {
+.mfui-v6-search_success .mfui-v6-search__control {
   border-color: var(--brandGreen);
 }

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

@@ -89,6 +89,8 @@ export interface ISearchProps {
     popularItems?: PopularItem[];
     /** Заголовок перед популярными элементами */
     popularTitle?: string;
+    /** Ссылка на элемент списка с результатами */
+    listRef?: React.Ref<HTMLDivElement>;
     /** Обработчик изменения поля */
     onChange?: (value: string) => void;
     /** Обработчик нажатия на enter */

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

@@ -84,7 +84,7 @@ var SearchItemsPaddings = {
   LARGE: 'large'
 };
 exports.SearchItemsPaddings = SearchItemsPaddings;
-var cn = (0, _uiHelpers.cnCreate)('mfui-search');
+var cn = (0, _uiHelpers.cnCreate)('mfui-v6-search');
 
 var Search = function Search(_ref) {
   var dataAttrs = _ref.dataAttrs,
@@ -113,6 +113,7 @@ var Search = function Search(_ref) {
       _ref$popularItems = _ref.popularItems,
       popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
       popularTitle = _ref.popularTitle,
+      listRef = _ref.listRef,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onBlur = _ref.onBlur,
@@ -388,7 +389,8 @@ var Search = function Search(_ref) {
 
   var renderList = function renderList() {
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: cn('list')
+      className: cn('list'),
+      ref: listRef
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('list-inner')
     }, items.map(function (_ref2, i) {
@@ -550,6 +552,9 @@ Search.propTypes = {
     icon: PropTypes.element
   }).isRequired),
   popularTitle: PropTypes.string,
+  listRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,
   onBlur: PropTypes.func,