@megafon/ui-core 3.7.0 → 3.10.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.10.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.9.0...@megafon/ui-core@3.10.0) (2022-05-30)
+
+
+### Features
+
+* **banner:** add new prop 'pauseOnHover' ([ac654c3](https://github.com/MegafonWebLab/megafon-ui/commit/ac654c3c23821a5d29ffd5cd91ff7337b3d087c1))
+
+
+
+
+
+# [3.9.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.8.0...@megafon/ui-core@3.9.0) (2022-05-27)
+
+
+### Bug Fixes
+
+* **select:** fix selected item color when value is zero ([9847095](https://github.com/MegafonWebLab/megafon-ui/commit/98470955ef813504d4bfa4cd4d3aba77b5458446))
+
+
+### Features
+
+* **switcher:** add data-attribute for inner element ([793a022](https://github.com/MegafonWebLab/megafon-ui/commit/793a0224ab957b938e67dd1b4d16c2389a9fb6f8))
+* **tooltip:** add portal selector props ([6188832](https://github.com/MegafonWebLab/megafon-ui/commit/6188832e9ba212e7a8182333aba06d77c3e979d6))
+
+
+
+
+
+# [3.8.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.7.0...@megafon/ui-core@3.8.0) (2022-05-17)
+
+
+### Features
+
+* **notification:** add props classes to notification component ([608a424](https://github.com/MegafonWebLab/megafon-ui/commit/608a4246eb99af354fb7cf8ab98c2ed513d87b66))
+
+
+
+
+
 # [3.7.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.6.0...@megafon/ui-core@3.7.0) (2022-05-05)
 
 

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

@@ -32,6 +32,8 @@ export interface IBannerProps {
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */
     autoPlayDelay?: number;
+    /** Пауза автоматической прокрутки при наведении курсора на компонент */
+    pauseOnHover?: boolean;
     /** Цветовая тема навигации */
     navTheme?: NavThemeType;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

package/dist/es/components/Banner/Banner.js

@@ -49,7 +49,9 @@ var Banner = function Banner(_ref) {
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
       onChange = _ref.onChange,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      _ref$pauseOnHover = _ref.pauseOnHover,
+      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -69,29 +71,42 @@ var Banner = function Banner(_ref) {
   var _React$useState7 = React.useState(autoPlay),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       isAutoPlaying = _React$useState8[0],
-      setAutoPlayning = _React$useState8[1];
+      setAutoPlaying = _React$useState8[1];
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       activeIndex = _React$useState10[0],
       setActiveIndex = _React$useState10[1];
 
+  var _React$useState11 = React.useState(autoPlayDelay),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      delay = _React$useState12[0],
+      setDelay = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      isIncreasedDelay = _React$useState14[0],
+      setIsIncreasedDelay = _React$useState14[1];
+
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
-  var dotTimerDelay = autoPlayDelay / 1000;
+  var dotTimerDelay = delay / 1000;
   var navArrowTheme = navTheme === NavTheme.DARK ? ArrowTheme.DARK : ArrowTheme.PURPLE;
+  var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
-    if (_typeof(params.autoplay) !== 'object' || !autoplay.running) {
+    if (_typeof(params.autoplay) !== 'object' || !autoPlay) {
       return;
     }
 
     autoplay.stop(); // eslint-disable-next-line no-param-reassign
 
     params.autoplay.delay = autoPlayDelay * 3;
+    setDelay(autoPlayDelay * 3);
+    setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlayDelay]);
+  }, [autoPlay, autoPlayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -99,8 +114,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onPrevClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -108,8 +123,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onNextClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleDotClick = React.useCallback(function (index) {
     if (!swiperInstance) {
       return;
@@ -122,11 +137,8 @@ var Banner = function Banner(_ref) {
     }
 
     onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
-  var handleSwiper = React.useCallback(function (swiper) {
-    setSwiperInstance(swiper);
-  }, []);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleReachBeginning = React.useCallback(function () {
     setBeginning(true);
   }, []);
@@ -149,23 +161,42 @@ var Banner = function Banner(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
   }, [onChange]);
   var handleAutoplayStop = React.useCallback(function () {
-    setAutoPlayning(false);
+    setAutoPlaying(false);
   }, []);
+  var handleAutoPlayStart = React.useCallback(function () {
+    setAutoPlaying(true);
+  }, []);
+  React.useEffect(function () {
+    var rootElement = rootRef.current;
+
+    if (!pauseOnHover || !autoPlay) {
+      return;
+    }
+
+    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+    });
+    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseleave', function () {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+    });
+  }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme
-    }, className)
+    }, className),
+    ref: rootRef
   }), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
     watchSlidesVisibility: true,
-    onSwiper: handleSwiper,
+    onSwiper: setSwiperInstance,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
     onSlideChange: handleSlideChange,
     onAutoplayStop: handleAutoplayStop,
+    onAutoplayStart: handleAutoPlayStart,
     onTouchEnd: increaseAutoplayDelay
   }), React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
@@ -232,6 +263,7 @@ Banner.propTypes = {
   }),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
+  pauseOnHover: PropTypes.bool,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,

package/dist/es/components/Calendar/components/Month/Month.js

@@ -10,9 +10,9 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 6v8l-5-4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 6v8l-5-4z"
+    clipRule: "evenodd"
   }));
 };
 
@@ -20,9 +20,9 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 14V6l5 4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 14V6l5 4z"
+    clipRule: "evenodd"
   }));
 };
 

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

@@ -17,6 +17,12 @@ declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        content?: string;
+    };
     /** Тип отображения */
     type?: NotificationType;
     /** Уровень тени */

package/dist/es/components/Notification/Notification.js

@@ -77,6 +77,11 @@ var cn = cnCreate('mfui-notification');
 
 var Notification = function Notification(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClass = _ref$classes.root,
+      containerClass = _ref$classes.container,
+      contentClass = _ref$classes.content,
       children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'info' : _ref$type,
@@ -143,13 +148,13 @@ var Notification = function Notification(_ref) {
     className: cn({
       type: type,
       colored: isColored
-    }, className)
+    }, [className, rootClass])
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('container')
+    className: cn('container', [containerClass])
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
-    className: cn('content')
+    className: cn('content', [contentClass])
   }, title && /*#__PURE__*/React.createElement(Header, {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
@@ -174,6 +179,11 @@ var Notification = function Notification(_ref) {
 Notification.propTypes = {
   type: PropTypes.oneOf(Object.values(NotificationTypes)),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    container: PropTypes.string,
+    content: PropTypes.string
+  }),
   shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
   isColored: PropTypes.bool,
   hasCloseButton: PropTypes.bool,

package/dist/es/components/Select/Select.js

@@ -337,7 +337,7 @@ var Select = function Select(_ref) {
 
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
       className: cn('title', {
-        placeholder: !!placeholder && !currentValue
+        placeholder: !!placeholder && currentValue === undefined
       }, [classes === null || classes === void 0 ? void 0 : classes.title]),
       role: "button",
       tabIndex: 0,

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

@@ -5,6 +5,7 @@ export interface ISwitcherProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        input?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/Switcher/Switcher.js

@@ -40,7 +40,7 @@ var Switcher = function Switcher(_ref) {
       size: textSize,
       left: true
     })
-  }, children), /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', {
       checked: checked,
       disabled: disabled,
@@ -50,7 +50,7 @@ var Switcher = function Switcher(_ref) {
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
     className: cn('loader')
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
@@ -63,7 +63,8 @@ var Switcher = function Switcher(_ref) {
 
 Switcher.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),

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

@@ -39,6 +39,8 @@ export interface ITooltipProps {
     isOpened?: boolean;
     /** Отрендерить компонент в корневой элементе страницы body */
     isPortal?: boolean;
+    /** Рендеринг компонента в указанном селекторе */
+    portalSelector?: string;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/es/components/Tooltip/Tooltip.js

@@ -48,6 +48,7 @@ var Tooltip = function Tooltip(_ref) {
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$isPortal = _ref.isPortal,
       isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
+      portalSelector = _ref.portalSelector,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -222,12 +223,14 @@ var Tooltip = function Tooltip(_ref) {
   useEffect(function () {
     return function () {
       if (portalElem.current) {
-        document.body.removeChild(portalElem.current);
+        var parent = portalSelector ? document.querySelector(portalSelector) : document.body;
+        parent === null || parent === void 0 ? void 0 : parent.removeChild(portalElem.current);
       }
 
       portalElem.current = null;
     };
-  }, []);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
   var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
@@ -255,7 +258,8 @@ var Tooltip = function Tooltip(_ref) {
 
   if (isPortal && !portalElem.current && typeof window !== 'undefined') {
     portalElem.current = document.createElement('div');
-    document.body.appendChild(portalElem.current);
+    var parent = portalSelector ? document.querySelector(portalSelector) : document.body;
+    parent === null || parent === void 0 ? void 0 : parent.appendChild(portalElem.current);
   }
 
   if (isPortal && portalElem.current) {
@@ -294,6 +298,7 @@ Tooltip.propTypes = {
   }), PropTypes.any])]),
   isOpened: PropTypes.bool,
   isPortal: PropTypes.bool,
+  portalSelector: PropTypes.string,
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,

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

@@ -32,6 +32,8 @@ export interface IBannerProps {
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */
     autoPlayDelay?: number;
+    /** Пауза автоматической прокрутки при наведении курсора на компонент */
+    pauseOnHover?: boolean;
     /** Цветовая тема навигации */
     navTheme?: NavThemeType;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

package/dist/lib/components/Banner/Banner.js

@@ -77,7 +77,9 @@ var Banner = function Banner(_ref) {
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
       onChange = _ref.onChange,
-      dataAttrs = _ref.dataAttrs;
+      dataAttrs = _ref.dataAttrs,
+      _ref$pauseOnHover = _ref.pauseOnHover,
+      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover;
 
   var _React$useState = React.useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -97,29 +99,42 @@ var Banner = function Banner(_ref) {
   var _React$useState7 = React.useState(autoPlay),
       _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
       isAutoPlaying = _React$useState8[0],
-      setAutoPlayning = _React$useState8[1];
+      setAutoPlaying = _React$useState8[1];
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
       activeIndex = _React$useState10[0],
       setActiveIndex = _React$useState10[1];
 
+  var _React$useState11 = React.useState(autoPlayDelay),
+      _React$useState12 = (0, _slicedToArray2["default"])(_React$useState11, 2),
+      delay = _React$useState12[0],
+      setDelay = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
+      _React$useState14 = (0, _slicedToArray2["default"])(_React$useState13, 2),
+      isIncreasedDelay = _React$useState14[0],
+      setIsIncreasedDelay = _React$useState14[1];
+
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
-  var dotTimerDelay = autoPlayDelay / 1000;
+  var dotTimerDelay = delay / 1000;
   var navArrowTheme = navTheme === NavTheme.DARK ? _NavArrow.Theme.DARK : _NavArrow.Theme.PURPLE;
+  var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
-    if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !autoplay.running) {
+    if ((0, _typeof2["default"])(params.autoplay) !== 'object' || !autoPlay) {
       return;
     }
 
     autoplay.stop(); // eslint-disable-next-line no-param-reassign
 
     params.autoplay.delay = autoPlayDelay * 3;
+    setDelay(autoPlayDelay * 3);
+    setIsIncreasedDelay(true);
     autoplay.start();
-  }, [autoPlayDelay]);
+  }, [autoPlay, autoPlayDelay]);
   var handlePrevClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -127,8 +142,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onPrevClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
@@ -136,8 +151,8 @@ var Banner = function Banner(_ref) {
 
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, onNextClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleDotClick = React.useCallback(function (index) {
     if (!swiperInstance) {
       return;
@@ -150,11 +165,8 @@ var Banner = function Banner(_ref) {
     }
 
     onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
-    increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
-  var handleSwiper = React.useCallback(function (swiper) {
-    setSwiperInstance(swiper);
-  }, []);
+    !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
+  }, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
   var handleReachBeginning = React.useCallback(function () {
     setBeginning(true);
   }, []);
@@ -177,23 +189,42 @@ var Banner = function Banner(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
   }, [onChange]);
   var handleAutoplayStop = React.useCallback(function () {
-    setAutoPlayning(false);
+    setAutoPlaying(false);
   }, []);
+  var handleAutoPlayStart = React.useCallback(function () {
+    setAutoPlaying(true);
+  }, []);
+  React.useEffect(function () {
+    var rootElement = rootRef.current;
+
+    if (!pauseOnHover || !autoPlay) {
+      return;
+    }
+
+    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
+    });
+    rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseleave', function () {
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
+    });
+  }, [autoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme
-    }, className)
+    }, className),
+    ref: rootRef
   }), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
     watchSlidesVisibility: true,
-    onSwiper: handleSwiper,
+    onSwiper: setSwiperInstance,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
     onSlideChange: handleSlideChange,
     onAutoplayStop: handleAutoplayStop,
+    onAutoplayStart: handleAutoPlayStart,
     onTouchEnd: increaseAutoplayDelay
   }), React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
@@ -260,6 +291,7 @@ Banner.propTypes = {
   }),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
+  pauseOnHover: PropTypes.bool,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,

package/dist/lib/components/Calendar/components/Month/Month.js

@@ -23,9 +23,9 @@ var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M12 6v8l-5-4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 6v8l-5-4z"
+    clipRule: "evenodd"
   }));
 };
 
@@ -33,9 +33,9 @@ var ArrowRight = function ArrowRight(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M8 14V6l5 4z",
     fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 14V6l5 4z"
+    clipRule: "evenodd"
   }));
 };
 

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

@@ -17,6 +17,12 @@ declare type ShadowType = typeof ShadowTypes[keyof typeof ShadowTypes];
 export interface INotificationProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        content?: string;
+    };
     /** Тип отображения */
     type?: NotificationType;
     /** Уровень тени */

package/dist/lib/components/Notification/Notification.js

@@ -101,6 +101,11 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-notification');
 
 var Notification = function Notification(_ref) {
   var className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClass = _ref$classes.root,
+      containerClass = _ref$classes.container,
+      contentClass = _ref$classes.content,
       children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'info' : _ref$type,
@@ -167,13 +172,13 @@ var Notification = function Notification(_ref) {
     className: cn({
       type: type,
       colored: isColored
-    }, className)
+    }, [className, rootClass])
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('container')
+    className: cn('container', [containerClass])
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('content')
+    className: cn('content', [contentClass])
   }, title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
@@ -198,6 +203,11 @@ var Notification = function Notification(_ref) {
 Notification.propTypes = {
   type: PropTypes.oneOf(Object.values(NotificationTypes)),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    container: PropTypes.string,
+    content: PropTypes.string
+  }),
   shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
   isColored: PropTypes.bool,
   hasCloseButton: PropTypes.bool,

package/dist/lib/components/Select/Select.js

@@ -372,7 +372,7 @@ var Select = function Select(_ref) {
 
     return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
       className: cn('title', {
-        placeholder: !!placeholder && !currentValue
+        placeholder: !!placeholder && currentValue === undefined
       }, [classes === null || classes === void 0 ? void 0 : classes.title]),
       role: "button",
       tabIndex: 0,

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

@@ -5,6 +5,7 @@ export interface ISwitcherProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        input?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/lib/components/Switcher/Switcher.js

@@ -58,7 +58,7 @@ var Switcher = function Switcher(_ref) {
       size: textSize,
       left: true
     })
-  }, children), /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', {
       checked: checked,
       disabled: disabled,
@@ -68,7 +68,7 @@ var Switcher = function Switcher(_ref) {
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
     className: cn('loader')
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
@@ -81,7 +81,8 @@ var Switcher = function Switcher(_ref) {
 
 Switcher.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),

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

@@ -39,6 +39,8 @@ export interface ITooltipProps {
     isOpened?: boolean;
     /** Отрендерить компонент в корневой элементе страницы body */
     isPortal?: boolean;
+    /** Рендеринг компонента в указанном селекторе */
+    portalSelector?: string;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/lib/components/Tooltip/Tooltip.js

@@ -76,6 +76,7 @@ var Tooltip = function Tooltip(_ref) {
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$isPortal = _ref.isPortal,
       isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal,
+      portalSelector = _ref.portalSelector,
       children = _ref.children,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -251,12 +252,14 @@ var Tooltip = function Tooltip(_ref) {
   (0, _react.useEffect)(function () {
     return function () {
       if (portalElem.current) {
-        document.body.removeChild(portalElem.current);
+        var parent = portalSelector ? document.querySelector(portalSelector) : document.body;
+        parent === null || parent === void 0 ? void 0 : parent.removeChild(portalElem.current);
       }
 
       portalElem.current = null;
     };
-  }, []);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
 
   var template = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
@@ -286,7 +289,8 @@ var Tooltip = function Tooltip(_ref) {
 
   if (isPortal && !portalElem.current && typeof window !== 'undefined') {
     portalElem.current = document.createElement('div');
-    document.body.appendChild(portalElem.current);
+    var parent = portalSelector ? document.querySelector(portalSelector) : document.body;
+    parent === null || parent === void 0 ? void 0 : parent.appendChild(portalElem.current);
   }
 
   if (isPortal && portalElem.current) {
@@ -325,6 +329,7 @@ Tooltip.propTypes = {
   }), _propTypes["default"].any])]),
   isOpened: _propTypes["default"].bool,
   isPortal: _propTypes["default"].bool,
+  portalSelector: _propTypes["default"].string,
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.7.0",
+  "version": "3.10.0",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.2.1",
+    "@megafon/ui-icons": "^1.2.2",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "be6065a442b0c2f8f1a82ea4fd45dd36679cbfaf"
+  "gitHead": "eca7dfc6c6f0f7317f404b989bb8d7bd5ec429ed"
 }