@megafon/ui-core 9.0.0-alpha.2 → 9.0.0-alpha.20

package/dist/lib/components/Row/Row.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-9-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-9-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-9-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-9-row__icon-container svg{fill:var(--content)}.mfui-9-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:12px}.mfui-9-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-9-row__icon,.mfui-9-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-9-row__icon,.mfui-9-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-9-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-9-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-9-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-9-row__sub-title:not(.mfui-9-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-9-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-9-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-9-row__arrow{margin-left:12px}}.mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-9-row__children{font-size:20px;line-height:28px}}.mfui-9-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-row_view_gray{background-color:var(--spbSky0)}.mfui-9-row_view_gray .mfui-9-row__icon-container{background-color:var(--base);border-radius:12px}.mfui-9-row_view_white{background-color:var(--base)}.mfui-9-row_pointer{cursor:pointer}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_pointer.mfui-9-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-9-row_pointer.mfui-9-row_view_gray:hover{background-color:var(--spbSky1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-9-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-9-row_has-arrow{padding-right:20px}.mfui-9-row_has-arrow.mfui-9-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-9-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-9-row_size_small{padding:20px 24px}.mfui-9-row_size_small .mfui-9-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:40px;width:40px}.mfui-9-row_size_small .mfui-9-row__arrow{margin-right:-4px}}.mfui-9-row_size_small .mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-9-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-row:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-row:focus{outline:none}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-9-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-9-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-9-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-9-row__icon-container svg{fill:var(--content)}.mfui-9-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:12px}.mfui-9-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-9-row__icon,.mfui-9-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-9-row__icon,.mfui-9-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-9-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-9-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-9-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-9-row__sub-title:not(.mfui-9-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-9-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-9-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-9-row__arrow{margin-left:12px}}.mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-9-row__children{font-size:20px;line-height:28px}}.mfui-9-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-row_view_gray{background-color:var(--spbSky0)}.mfui-9-row_view_gray .mfui-9-row__icon-container{background-color:var(--base);border-radius:12px}.mfui-9-row_view_white{background-color:var(--base)}.mfui-9-row_pointer{cursor:pointer}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_pointer.mfui-9-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-9-row_pointer.mfui-9-row_view_gray:hover{background-color:var(--spbSky1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-9-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-9-row_has-arrow{padding-right:20px}.mfui-9-row_has-arrow.mfui-9-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-9-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-9-row_size_small{padding:20px 24px}.mfui-9-row_size_small .mfui-9-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:40px;width:40px}.mfui-9-row_size_small .mfui-9-row__arrow{margin-right:-4px}}.mfui-9-row_size_small .mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-9-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}

package/dist/lib/components/Row/Row.js

@@ -17,7 +17,7 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+    d: "M16.326 9.118a1.25 1.25 0 011.768-.004l5.618 5.592a1.825 1.825 0 010 2.588l-5.618 5.592a1.25 1.25 0 01-1.764-1.772l3.871-3.853H9a1.25 1.25 0 010-2.5h11.223l-3.893-3.875a1.25 1.25 0 01-.004-1.768z"
   }));
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-row');
@@ -65,6 +65,8 @@ var Row = function Row(_ref) {
     target: href ? target : undefined,
     rel: rel,
     onClick: handleClick
+  }, !!onClick && {
+    tabIndex: 0
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!icon && /*#__PURE__*/React.createElement("div", {
@@ -79,9 +81,9 @@ var Row = function Row(_ref) {
     className: cn('title', [classes.title]),
     as: isSmallSize ? 'h5' : 'h3',
     space: isSmallSize ? 'tight' : 'wide'
-  }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!subTitle && /*#__PURE__*/React.createElement("div", {
     className: cn('sub-title', [classes.subtitle])
-  }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.convert)(subTitle, _uiHelpers.textConvertConfig))), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: cn('children')
   }, children), showArrow && /*#__PURE__*/React.createElement(ArrowRight, (0, _extends2["default"])({
     className: cn('arrow')

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

@@ -32,6 +32,8 @@ export interface IScrollBarProps {
     getScrollBar?: (node: HTMLElement) => void;
     /** Ref обработчик для Scrollable element */
     getScrollable?: (node: HTMLElement) => void;
+    /** Событие скролла */
+    onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
     children?: React.ReactNode;
 }
 declare const ScrollBar: React.FC<IScrollBarProps>;

package/dist/lib/components/ScrollBar/ScrollBar.js

@@ -26,6 +26,7 @@ var ScrollBar = function ScrollBar(_ref) {
     showAlways = _ref.showAlways,
     getScrollBar = _ref.getScrollBar,
     getScrollable = _ref.getScrollable,
+    onScroll = _ref.onScroll,
     children = _ref.children;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -59,6 +60,9 @@ var ScrollBar = function ScrollBar(_ref) {
     var scrollContentOffsetHeight = scrollContentNode.offsetHeight;
     setIsInitialHide(scrollContentOffsetHeight <= maxHeight);
   }, [maxHeight]);
+  var handleScroll = function handleScroll(event) {
+    onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
+  };
   React.useEffect(function () {
     if (!scrollBarInitNode.current || !maxHeight) {
       return undefined;
@@ -96,7 +100,8 @@ var ScrollBar = function ScrollBar(_ref) {
     forceVisible: "y",
     ref: handleGetScrollBarRef,
     scrollableNodeProps: {
-      ref: handleGetScrollableRef
+      ref: handleGetScrollableRef,
+      onScroll: handleScroll
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('children-wrap', [classes === null || classes === void 0 ? void 0 : classes.childrenWrap])

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

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

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

@@ -50,6 +50,8 @@ export interface ISearchProps {
     value?: string;
     /** Вид отображения */
     type?: 'textfield' | 'compact';
+    /** Цветовая тема для типа compact */
+    compactTheme?: 'default' | 'white';
     /** Включить режим textarea */
     textarea?: boolean;
     /** Заголовок поля */
@@ -103,8 +105,6 @@ export interface ISearchProps {
     popularItems?: PopularItem[];
     /** Заголовок перед популярными элементами */
     popularTitle?: string;
-    /** Ссылка на элемент списка с результатами */
-    listRef?: React.Ref<HTMLDivElement>;
     /** Минимальная высота textarea, px */
     minTextareaHeight?: MinTextareaHeightType;
     /** Показать хендлер для ресайза текстового поля */

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

@@ -10,21 +10,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.slice.js");
 require("core-js/modules/es.parse-float.js");
-require("core-js/modules/es.regexp.constructor.js");
 require("core-js/modules/es.regexp.exec.js");
-require("core-js/modules/es.regexp.sticky.js");
-require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.string.replace.js");
-require("core-js/modules/es.string.split.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+var _Dropdown = _interopRequireWildcard(require("../Dropdown/Dropdown"));
 var _Header = _interopRequireDefault(require("../Header/Header"));
 var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
-var _ScrollBar = _interopRequireDefault(require("../ScrollBar/ScrollBar"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -32,28 +28,32 @@ var SearchIcon16 = function SearchIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M17 9a7 7 0 10-3.32 6l2.49 3 .77-.64-2.47-3A7 7 0 0017 9zM4 9a6 6 0 116 6 6 6 0 01-6-6z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.055 2.305a6.5 6.5 0 014.698 10.989l2.657 2.657a.5.5 0 01-.707.707l-2.695-2.695A6.5 6.5 0 119.055 2.305zm0 1a5.5 5.5 0 000 11 5.476 5.476 0 003.587-1.334.5.5 0 01.136-.12 5.5 5.5 0 00-3.723-9.547z"
   }));
 };
 var SearchIcon = function SearchIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 24a9.94 9.94 0 005.7-1.8l4.83 5.8L28 26.72l-4.78-5.82A10 10 0 1016 24zm0-18a8 8 0 11-8 8 8 8 0 018-8z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.336 3.68c5.668 0 10.262 4.595 10.263 10.263 0 2.79-1.115 5.317-2.921 7.167l4.166 4.208a.801.801 0 01-1.137 1.126l-4.232-4.275a10.216 10.216 0 01-6.14 2.038c-5.667 0-10.263-4.596-10.263-10.264 0-5.668 4.596-10.262 10.264-10.262zm0 1.6a8.664 8.664 0 000 17.327 8.626 8.626 0 005.601-2.058.832.832 0 01.15-.128 8.664 8.664 0 00-5.751-15.14z"
   }));
 };
 var ClearIcon = function ClearIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    className: "ClearIcon__st0",
-    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"
+    d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
   }));
 };
 var ResizeIcon = function ResizeIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     width: 12,
-    height: 12
+    height: 12,
+    viewBox: "0 0 12 12"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M1 11L11 1M7 11l4-4"
   }));
@@ -63,7 +63,6 @@ var MAX_ROW_COUNT = 6;
 var TEXTAREA_ROW_HEIGHT = 24;
 var TEXTAREA_MAX_HEIGHT = TEXTAREA_ROW_HEIGHT * MAX_ROW_COUNT;
 var DEFAULT_LABEL_TOP_POSITION = 16;
-var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
 var MAX_POPULAR_ITEMS_LENGTH = 5;
 var MinTextareaHeight = exports.MinTextareaHeight = {
   ONE_ROW: TEXTAREA_ROW_HEIGHT,
@@ -96,12 +95,11 @@ var Search = function Search(_ref) {
     required = _ref.required,
     noticeText = _ref.noticeText,
     maxLength = _ref.maxLength,
-    _ref$maxHeightScrollB = _ref.maxHeightScrollBar,
-    maxHeightScrollBar = _ref$maxHeightScrollB === void 0 ? 350 : _ref$maxHeightScrollB,
     className = _ref.className,
     classes = _ref.classes,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'textfield' : _ref$type,
+    compactTheme = _ref.compactTheme,
     textarea = _ref.textarea,
     showLoader = _ref.showLoader,
     showNotFound = _ref.showNotFound,
@@ -109,7 +107,6 @@ var Search = function Search(_ref) {
     _ref$popularItems = _ref.popularItems,
     popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
     popularTitle = _ref.popularTitle,
-    listRef = _ref.listRef,
     _ref$minTextareaHeigh = _ref.minTextareaHeight,
     minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
     showResizer = _ref.showResizer,
@@ -147,6 +144,10 @@ var Search = function Search(_ref) {
     _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
     isTextareaResized = _React$useState14[0],
     setIsTextareaResized = _React$useState14[1];
+  var _React$useState15 = React.useState(false),
+    _React$useState16 = (0, _slicedToArray2["default"])(_React$useState15, 2),
+    isOpenDropdown = _React$useState16[0],
+    setIsOpenDropdown = _React$useState16[1];
   var debouncedOnChange = React.useRef((0, _lodash["default"])(function (inputValue) {
     return onChange && onChange(inputValue);
   }, changeDelay));
@@ -201,11 +202,6 @@ var Search = function Search(_ref) {
     }
     textareaResize();
   }, [changeDelay, onChange, textareaResize]);
-  var handleHoverItem = React.useCallback(function (index) {
-    return function () {
-      setActiveIndex(index);
-    };
-  }, []);
   var handlePopularItemHover = React.useCallback(function (index) {
     return function () {
       setPopularActiveIndex(index);
@@ -227,16 +223,27 @@ var Search = function Search(_ref) {
   var handleSelectSubmit = React.useCallback(function (index) {
     return function () {
       handleItemSubmit(index);
+      setIsOpenDropdown(false);
+      setFocus(false);
     };
   }, [handleItemSubmit]);
   var handleFocus = React.useCallback(function (e) {
     setFocus(true);
+    setIsOpenDropdown(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   }, [onFocus]);
-  var handleBlur = React.useCallback(function (e) {
-    setFocus(false);
+  var handleInputBlur = React.useCallback(function (e) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   }, [onBlur]);
+  var handleContainerBlur = function handleContainerBlur(e) {
+    var _a;
+    var relatedTarget = e.relatedTarget;
+    if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) {
+      return;
+    }
+    setIsOpenDropdown(false);
+    setFocus(false);
+  };
   var handleClick = React.useCallback(function () {
     if (activeIndex >= 0) {
       setActiveIndex(-1);
@@ -317,6 +324,9 @@ var Search = function Search(_ref) {
     }
     return handleKeyDownItems(e);
   }, [handleKeyDownItems, handleKeyDownPopularItems, showNotFound, showPopularItems]);
+  var handleDropdownClose = React.useCallback(function () {
+    setIsOpenDropdown(false);
+  }, []);
   var handleClearClick = function handleClearClick() {
     var _a;
     !!debouncedOnChange.current && debouncedOnChange.current.cancel();
@@ -399,19 +409,6 @@ var Search = function Search(_ref) {
       });
     }
   }, [activeIndex, items]);
-  var highlightString = function highlightString(title) {
-    var query = searchQuery.replace(SEARCH_QUERY_REGEX, function (w) {
-      return "\\".concat(w);
-    });
-    var stringFragments = title.split(RegExp("(".concat(query, ")"), 'ig'));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, stringFragments.map(function (fragment, i) {
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: i
-      }, fragment.toLowerCase() === searchQuery.toLowerCase() ? /*#__PURE__*/React.createElement("span", {
-        className: cn('highlighted-fragment')
-      }, fragment) : fragment);
-    }));
-  };
   var renderSubmitButton = function renderSubmitButton() {
     var Icon = isCompact ? SearchIcon16 : SearchIcon;
     return /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
@@ -431,40 +428,44 @@ var Search = function Search(_ref) {
       className: cn('clear-icon')
     }));
   };
+  var dropdownItems = React.useMemo(function () {
+    return items.map(function (item) {
+      return {
+        title: item.value,
+        value: item.value,
+        view: item.searchView,
+        paddings: item.paddings === SearchItemsPaddings.SMALL ? _Dropdown.DropdownItemsPaddings.SMALL : _Dropdown.DropdownItemsPaddings.LARGE,
+        data: {
+          href: item.href
+        }
+      };
+    });
+  }, [items]);
   var renderList = function renderList() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list]),
-      ref: listRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('list-inner', [classes === null || classes === void 0 ? void 0 : classes.listInner])
-    }, /*#__PURE__*/React.createElement(_ScrollBar["default"], {
-      maxHeight: maxHeightScrollBar
-    }, items.map(function (_ref2, i) {
-      var itemValue = _ref2.value,
-        searchView = _ref2.searchView,
-        _ref2$paddings = _ref2.paddings,
-        paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
-      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
-        ref: activeIndex === i ? highlightedItem : null,
-        className: cn('list-item', {
-          active: activeIndex === i,
-          paddings: paddings
-        }),
-        onMouseDown: handleSelectSubmit(i),
-        onMouseEnter: handleHoverItem(i),
-        key: i
-      }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1), {
-        className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
-      }), searchView || highlightString(itemValue)));
-    }))));
+    return /*#__PURE__*/React.createElement(_Dropdown["default"], {
+      isOpen: isOpenDropdown,
+      targetRef: containerRef,
+      items: dropdownItems,
+      value: searchQuery,
+      hoveredIndex: activeIndex,
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.listInner,
+        list: classes === null || classes === void 0 ? void 0 : classes.list
+      },
+      dataAttrs: {
+        item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item
+      },
+      onItemClick: handleSelectSubmit,
+      onClose: handleDropdownClose
+    });
   };
   var renderPopularItems = function renderPopularItems() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('popular-list')
-    }, correctPopularItems.map(function (_ref3, i) {
-      var title = _ref3.title,
-        href = _ref3.href,
-        icon = _ref3.icon;
+    }, correctPopularItems.map(function (_ref2, i) {
+      var title = _ref2.title,
+        href = _ref2.href,
+        icon = _ref2.icon;
       var Elem = href ? 'a' : 'div';
       return /*#__PURE__*/React.createElement(Elem, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popularItem, i + 1), {
         className: cn('popular-item', {
@@ -521,7 +522,7 @@ var Search = function Search(_ref) {
     maxLength: maxLength,
     onChange: handleChange,
     onFocus: handleFocus,
-    onBlur: handleBlur,
+    onBlur: handleInputBlur,
     onKeyDown: handleKeyDown,
     onClick: handleClick,
     disabled: disabled,
@@ -548,7 +549,7 @@ var Search = function Search(_ref) {
     maxLength: maxLength,
     onChange: handleChange,
     onFocus: handleFocus,
-    onBlur: handleBlur,
+    onBlur: handleInputBlur,
     onKeyDown: handleKeyDown,
     onClick: handleClick,
     onScroll: handleTextareaScroll,
@@ -556,19 +557,22 @@ var Search = function Search(_ref) {
     ref: getFieldRef
   })), label && renderLabel));
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn({
+    className: cn((0, _extends2["default"])({
       open: isFocused,
       disabled: disabled,
       type: type,
       textarea: isTextarea,
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
-    }, [className])
+    }, isCompact && {
+      'compact-theme': compactTheme
+    }), [className])
   }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
     className: cn('control', {
       focused: isTextareaResizing
     }, [classes === null || classes === void 0 ? void 0 : classes.control]),
-    ref: containerRef
+    ref: containerRef,
+    onBlur: handleContainerBlur
   }), isCompact && renderSubmitButton(), isTextarea ? renderTextarea : renderInput, showAdditionalElement && /*#__PURE__*/React.createElement("div", {
     className: cn('icons')
   }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/React.createElement(_Preloader["default"], {

package/dist/lib/components/Select/Select.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;font-weight:400;line-height:24px;min-height:40px;z-index:1}.mfui-9-select,.mfui-9-select__inner{position:relative}.mfui-9-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:pointer;height:60px;overflow:hidden;-webkit-transition:border-color .3s;transition:border-color .3s}.mfui-9-select__combobox,.mfui-9-select__control{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;width:100%}.mfui-9-select__combobox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;font-size:15px;font-weight:400;height:100%;line-height:24px;opacity:1;overflow:auto;padding:0 45px 0 16px;position:relative;z-index:1}.mfui-9-select_no-touch .mfui-9-select__control:focus-within,.mfui-9-select_no-touch .mfui-9-select__control:hover{border-color:var(--content)}.mfui-9-select__title{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;outline:none;width:100%}.mfui-9-select__title:after{border:5px solid transparent;border-bottom:none;border-top:6px solid;color:var(--brandGreen);content:"";cursor:pointer;display:block;position:absolute;right:27px;top:50%;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;z-index:1}.mfui-9-select__title-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3)}.mfui-9-select__title-inner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden;padding:0 45px 0 16px;white-space:nowrap}.mfui-9-select__title-inner:after{background:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));background:linear-gradient(to right,hsla(0,0%,100%,0),var(--base));bottom:0;content:"";position:absolute;right:40px;top:0;width:40px}.mfui-9-select__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-9-select__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 1px 16px rgba(0,0,0,.2);box-shadow:0 1px 16px rgba(0,0,0,.2);display:none;left:0;position:absolute;right:0;top:100%;z-index:11}.mfui-9-select__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-select__list-inner_short{max-height:235px}.mfui-9-select__list-inner::-webkit-scrollbar{width:16px}.mfui-9-select__list-inner::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-9-select__list-inner::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-9-select__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-9-select__list-item_hovered{background-color:var(--spbSky0)}.mfui-9-select__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-9-select__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-9-select__item-title{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-select__item-title_active{font-weight:600}.mfui-9-select__list-item_hovered .mfui-9-select__item-title:after{background:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));background:linear-gradient(to right,hsla(0,0%,100%,0),var(--spbSky0))}.mfui-9-select__not-found{opacity:.5;padding:8px 32px}.mfui-9-select__text{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:8px}.mfui-9-select__highlighted-fragment{font-weight:700}.mfui-9-select__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:17px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-select__combobox+.mfui-9-select__label{left:16px}.mfui-9-select__combobox::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__title-inner:not(.mfui-9-select__title-inner_hide-value) .mfui-9-select__label,.mfui-9-select_open .mfui-9-select__label{-webkit-transform:scale(.8) translate(-12%,-75%);transform:scale(.8) translate(-12%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__combobox:not(.mfui-9-select__combobox_hide-value)+.mfui-9-select__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__control_labeled .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__control_labeled .mfui-9-select__combobox,.mfui-9-select__control_labeled .mfui-9-select__title-inner{padding-top:22px}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-webkit-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus:-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-moz-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::placeholder{opacity:1}.mfui-9-select_open{z-index:12}.mfui-9-select_open .mfui-9-select__title:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-select_open .mfui-9-select__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-9-select_open .mfui-9-select__control{border-color:var(--content)}.mfui-9-select_open .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{opacity:1}.mfui-9-select_valid .mfui-9-select__control{border-color:var(--brandGreen)!important}.mfui-9-select_error .mfui-9-select__control{border-color:var(--fury)!important}.mfui-9-select_error .mfui-9-select__text{color:var(--fury)}.mfui-9-select_disabled .mfui-9-select__control{background-color:var(--spbSky1);border-color:var(--spbSky1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-select_disabled .mfui-9-select__title-inner:after{display:none}.mfui-9-select_disabled .mfui-9-select__title:after{color:var(--content);opacity:.5}
+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-9-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;font-weight:400;line-height:24px;min-height:40px;z-index:1}.mfui-9-select,.mfui-9-select__inner{position:relative}.mfui-9-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:60px;outline:none;overflow:hidden;-webkit-transition:border-color .3s;transition:border-color .3s;width:100%}.mfui-9-select__control:focus-within:has(.mfui-9-select__title:focus-visible){-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-select__combobox{-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;color:var(--content);cursor:text;font-size:15px;font-weight:400;height:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0 45px 0 16px;position:relative;width:100%;z-index:1}.mfui-9-select_no-touch .mfui-9-select__control:focus-within,.mfui-9-select_no-touch .mfui-9-select__control:hover{border-color:var(--content)}.mfui-9-select__title{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;outline:none;width:100%}.mfui-9-select__title:after{border:5px solid transparent;border-bottom:none;border-top:6px solid;color:var(--content);content:"";cursor:pointer;display:block;position:absolute;right:27px;top:50%;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;z-index:1}.mfui-9-select__title-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;width:100%}.mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3)}.mfui-9-select__title-inner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden;padding:0 45px 0 16px;white-space:nowrap}.mfui-9-select__title-inner:after{background:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));background:linear-gradient(to right,hsla(0,0%,100%,0),var(--base));bottom:0;content:"";position:absolute;right:40px;top:0;width:40px}.mfui-9-select__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-9-select__not-found{opacity:.5;padding:8px 32px}.mfui-9-select__text{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:8px}.mfui-9-select__highlighted-fragment{font-weight:700}.mfui-9-select__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:17px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-9-select__combobox+.mfui-9-select__label{left:16px}.mfui-9-select__combobox::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__combobox::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__title-inner:not(.mfui-9-select__title-inner_hide-value) .mfui-9-select__label,.mfui-9-select_open .mfui-9-select__label{-webkit-transform:scale(.8) translate(-12%,-75%);transform:scale(.8) translate(-12%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__combobox:not(.mfui-9-select__combobox_hide-value)+.mfui-9-select__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-9-select__control_labeled .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-select__control_labeled .mfui-9-select__combobox,.mfui-9-select__control_labeled .mfui-9-select__title-inner{padding-top:22px}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-webkit-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus:-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-moz-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::-ms-input-placeholder{opacity:1}.mfui-9-select__control_labeled .mfui-9-select__combobox:focus::placeholder{opacity:1}.mfui-9-select_open{z-index:12}.mfui-9-select_open .mfui-9-select__title:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-select_open .mfui-9-select__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-9-select_open .mfui-9-select__control{border-color:var(--content)}.mfui-9-select_open .mfui-9-select__title-inner_hide-value .mfui-9-select__title-value{opacity:1}.mfui-9-select_valid .mfui-9-select__control{border-color:var(--brandGreen)!important}.mfui-9-select_error .mfui-9-select__control{border-color:var(--fury)!important}.mfui-9-select_error .mfui-9-select__text{color:var(--fury)}.mfui-9-select_disabled .mfui-9-select__control{background-color:var(--spbSky0);border-color:var(--spbSky2);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-9-select_disabled .mfui-9-select__title-inner:after{display:none}.mfui-9-select_disabled .mfui-9-select__title:after{color:var(--spbSky2)}

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

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import './Select.scss';
-export declare const SelectItemsPaddings: {
-    readonly SMALL: "small";
-    readonly LARGE: "large";
-};
+import { type DropdownItemType } from '../Dropdown/Dropdown';
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -15,21 +12,8 @@ export declare const SelectTypes: {
 };
 type SelectTypesType = (typeof SelectTypes)[keyof typeof SelectTypes];
 export type SelectItemValueType = number | string | undefined;
-type ViewCallbackArguments = {
-    filterValue: string;
-    isItemActive: boolean;
-};
-export interface ISelectItem<T extends SelectItemValueType> {
-    /** Заголовок элемента в выпадающем списке  */
-    title: string;
-    /** Значение value элемента */
-    value: T;
-    /** Настраиваемое отображение элементов в выпадающем списке  */
-    view?: React.ReactNode | ((data: ViewCallbackArguments) => React.ReactNode);
-    /** Настраиваемое отображение выбранного элемента в поле селекта  */
+export interface ISelectItem<T extends SelectItemValueType> extends DropdownItemType<T> {
     selectedView?: JSX.Element | Element | React.ReactElement;
-    /** Размер горизонтальных отступов элемента */
-    paddings?: (typeof SelectItemsPaddings)[keyof typeof SelectItemsPaddings];
 }
 export interface ISelectProps<T extends SelectItemValueType> {
     /** Тип компонента */
@@ -87,11 +71,18 @@ export interface ISelectProps<T extends SelectItemValueType> {
     /** Ref обработчик */
     inputRef?: (node: HTMLDivElement) => void;
     /** Обработчик выбора элемента селекта */
-    onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
+    onSelect?: (e: React.MouseEvent | React.KeyboardEvent | null, dataItem?: ISelectItem<T>) => void;
     /** Обработчик при открытом селекте */
     onOpened?: () => void;
     /** Обработчик при закрытом селекте */
     onClosed?: () => void;
+    /** Функция рендера контента в шапке выпадающего списка */
+    renderHeaderContent?: (props: {
+        items: Array<ISelectItem<T>>;
+        selectedValue?: T;
+        searchValue?: string;
+        onClose: () => void;
+    }) => React.ReactNode;
 }
-declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
+declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, renderHeaderContent, }: ISelectProps<T>) => JSX.Element;
 export default Select;