@megafon/ui-core 5.18.1 → 6.0.0-beta.2

package/dist/es/components/Badges/{components/PromoBadge → PromoBadge}/PromoBadge.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./PromoBadge.css";
 export var PromoBadgeColors = {
   '137C': '137c',
@@ -12,8 +10,8 @@ export var PromoBadgeColors = {
   SYSTEM_BLUE: 'system-blue',
   WARM_RED: 'warm-red',
   GRADIENT_PURPLE: 'gradient-purple'
-}; // DEPRECATED
-
+};
+// DEPRECATED
 export var PromoBadgeTypes = {
   HIT: 'hit',
   NEW: 'new',
@@ -23,14 +21,13 @@ export var PromoBadgeTypes = {
   INTERESTS: 'interests'
 };
 var cn = cnCreate('mfui-promo-badge');
-
 var PromoBadge = function PromoBadge(_ref) {
   var color = _ref.color,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
-      className = _ref.className,
-      children = _ref.children,
-      dataAttrs = _ref.dataAttrs;
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
+    className = _ref.className,
+    children = _ref.children,
+    dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
@@ -40,15 +37,4 @@ var PromoBadge = function PromoBadge(_ref) {
     className: cn('text')
   }, children));
 };
-
-PromoBadge.propTypes = {
-  color: PropTypes.oneOf(Object.values(PromoBadgeColors)),
-  // DEPRECATED
-  type: PropTypes.oneOf(Object.values(PromoBadgeTypes)),
-  className: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired
-};
 export default PromoBadge;

package/dist/es/components/Badges/{components/TimerBadge → TimerBadge}/TimerBadge.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import './TimerBadge.less';
+import * as React from 'react';
+import './TimerBadge.scss';
 export declare const TIMEOUT = 1000;
 export interface ITimerBadgeProps {
     /** Дата окончания таймера */

package/dist/es/components/Badges/{components/TimerBadge → TimerBadge}/TimerBadge.js

@@ -3,12 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.date.now.js";
 import "core-js/modules/es.date.to-string.js";
 import "core-js/modules/web.timers.js";
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
-import Timer from "./Timer/Timer";
+import Timer from "./components/Timer/Timer";
 import "./TimerBadge.css";
-
 var TimerIcon = function TimerIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -18,7 +16,6 @@ var TimerIcon = function TimerIcon(props) {
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
   }));
 };
-
 var SECONDS_IN_HOUR = 3600;
 var MS_IN_SECOND = 1000;
 export var TIMEOUT = 1000;
@@ -27,43 +24,38 @@ var TimerBadgeTheme = {
   GREY: 'grey'
 };
 var cn = cnCreate('mfui-timer-badge');
-
 var TimerBadge = function TimerBadge(_ref) {
   var expirationDate = _ref.expirationDate,
-      _ref$countdownStart = _ref.countdownStart,
-      countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
-      _ref$hasPrefix = _ref.hasPrefix,
-      hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
-      _ref$countdownText = _ref.countdownText,
-      countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
-      _ref$expirationDateTe = _ref.expirationDateText,
-      expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
-      className = _ref.className,
-      dataAttrs = _ref.dataAttrs;
+    _ref$countdownStart = _ref.countdownStart,
+    countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
+    _ref$hasPrefix = _ref.hasPrefix,
+    hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
+    _ref$countdownText = _ref.countdownText,
+    countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
+    _ref$expirationDateTe = _ref.expirationDateText,
+    expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
   var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
-
-  var _useState = useState(remainingTime),
-      _useState2 = _slicedToArray(_useState, 2),
-      actualRemainingTime = _useState2[0],
-      setActualRemainingTime = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showCountdown = _useState4[0],
-      setShowCountdown = _useState4[1];
-
+  var _React$useState = React.useState(remainingTime),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    actualRemainingTime = _React$useState2[0],
+    setActualRemainingTime = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    showCountdown = _React$useState4[0],
+    setShowCountdown = _React$useState4[1];
   var isLastHour = actualRemainingTime < SECONDS_IN_HOUR;
   var isTimeExpired = actualRemainingTime < 1;
   var theme = showCountdown ? TimerBadgeTheme.RED : TimerBadgeTheme.GREY;
   var additionalText = showCountdown ? countdownText : expirationDateText;
-  useEffect(function () {
+  React.useEffect(function () {
     setShowCountdown(actualRemainingTime < countdownStart);
   }, [actualRemainingTime, countdownStart]);
-  useEffect(function () {
+  React.useEffect(function () {
     if (isTimeExpired) {
       return undefined;
     }
-
     var timeoutId = window.setTimeout(function () {
       return setActualRemainingTime(actualRemainingTime - 1);
     }, TIMEOUT);
@@ -93,19 +85,4 @@ var TimerBadge = function TimerBadge(_ref) {
     }
   })));
 };
-
-TimerBadge.propTypes = {
-  expirationDate: PropTypes.instanceOf(Date).isRequired,
-  countdownStart: PropTypes.number,
-  hasPrefix: PropTypes.bool,
-  countdownText: PropTypes.string,
-  expirationDateText: PropTypes.string,
-  className: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    text: PropTypes.objectOf(PropTypes.string.isRequired),
-    timer: PropTypes.objectOf(PropTypes.string.isRequired),
-    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
-};
 export default TimerBadge;

package/dist/es/components/Badges/{components/TimerBadge → TimerBadge/components}/Timer/Timer.js

@@ -1,70 +1,54 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.math.trunc.js";
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.math.trunc.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import format from 'date-fns/format';
 import ruLocale from 'date-fns/locale/ru';
-import * as PropTypes from 'prop-types';
 var SECONDS_IN_DAY = 86400;
 var SECONDS_IN_HOUR = 3600;
 var SECONDS_IN_MINUTE = 60;
-
 var formatDate = function formatDate(date, pattern) {
   return format(date, pattern, {
     locale: ruLocale
   });
 };
-
 export var getCountdownText = function getCountdownText() {
   var remainingTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var isMoreHourAndLessDay = remainingTime >= SECONDS_IN_HOUR && remainingTime < SECONDS_IN_DAY;
-
   var truncTime = function truncTime() {
     var divider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     return Math.trunc(remainingTime / divider);
   };
-
   switch (true) {
     case remainingTime <= 0:
       {
         return '';
       }
-
     case remainingTime < SECONDS_IN_MINUTE:
       {
         var seconds = truncTime();
         return "".concat(seconds, " \u0441\u0435\u043A");
       }
-
     case remainingTime < SECONDS_IN_HOUR:
       {
         var minutes = truncTime(SECONDS_IN_MINUTE);
         return "".concat(minutes, " \u043C\u0438\u043D");
       }
-
     case isMoreHourAndLessDay:
       {
         var hours = truncTime(SECONDS_IN_HOUR);
         var secondsLeft = remainingTime - hours * SECONDS_IN_HOUR;
-
         var _minutes = Math.trunc(secondsLeft / SECONDS_IN_MINUTE);
-
         return _minutes ? "".concat(hours, " \u0447 ").concat(_minutes, " \u043C\u0438\u043D") : "".concat(hours, " \u0447");
       }
-
     case remainingTime >= SECONDS_IN_DAY:
       {
         var days = truncTime(SECONDS_IN_DAY);
-
         var _secondsLeft = remainingTime - days * SECONDS_IN_DAY;
-
         var _hours = Math.trunc(_secondsLeft / SECONDS_IN_HOUR);
-
         return _hours ? "".concat(days, " \u0434\u043D ").concat(_hours, " \u0447") : "".concat(days, " \u0434\u043D");
       }
-
     default:
       {
         return '';
@@ -72,25 +56,14 @@ export var getCountdownText = function getCountdownText() {
   }
 };
 var cn = cnCreate('mfui-timer');
-
 var Timer = function Timer(_ref) {
   var actualRemainingTime = _ref.actualRemainingTime,
-      expirationDate = _ref.expirationDate,
-      showCountdown = _ref.showCountdown,
-      additionalText = _ref.additionalText,
-      dataAttrs = _ref.dataAttrs;
+    expirationDate = _ref.expirationDate,
+    showCountdown = _ref.showCountdown,
+    additionalText = _ref.additionalText,
+    dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn()
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), additionalText && /*#__PURE__*/React.createElement("span", null, additionalText, " "), /*#__PURE__*/React.createElement("span", null, showCountdown ? getCountdownText(actualRemainingTime) : formatDate(expirationDate, 'dd MMMM yyyy')));
 };
-
-Timer.propTypes = {
-  expirationDate: PropTypes.instanceOf(Date).isRequired,
-  actualRemainingTime: PropTypes.number.isRequired,
-  showCountdown: PropTypes.bool.isRequired,
-  additionalText: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
-};
 export default Timer;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import SwiperCore from 'swiper';
 import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
-import './Banner.less';
+import './Banner.scss';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
@@ -10,17 +10,17 @@ export declare const BackgroundColor: {
     readonly GRADIENT: "gradient";
     readonly LIGHT: "light";
 };
-declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
+type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
 export declare const Radius: {
     readonly CORNERS: "corners";
     readonly ROUNDED: "rounded";
 };
-export declare type RadiusType = typeof Radius[keyof typeof Radius];
+export type RadiusType = (typeof Radius)[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
@@ -69,6 +69,7 @@ export interface IBannerProps {
     noIncreaseAutoplayDelay?: boolean;
     /** Показать часть следующего слайда */
     showNextSlide?: boolean;
+    children?: React.ReactNode;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */

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

@@ -2,17 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
-import SwiperCore, { Autoplay } from 'swiper';
+import { Autoplay } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import BannerDot from "./BannerDot";
 import SLIDES_SETTINGS from "./slidesSettings";
 import "./Banner.css";
-SwiperCore.use([Autoplay]);
 export var BackgroundColor = {
   TRANSPARENT: 'transparent',
   GREEN: 'green',
@@ -29,7 +26,6 @@ export var NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
-
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -38,97 +34,84 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
     stopOnLastSlide: true
   };
 };
-
 var cn = cnCreate('mfui-banner');
-
 var Banner = function Banner(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      dataAttrs = _ref.dataAttrs,
-      _ref$withPaginationBo = _ref.withPaginationBottomOffset,
-      withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
-      _ref$autoPlay = _ref.autoPlay,
-      autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
-      _ref$autoPlayDelay = _ref.autoPlayDelay,
-      autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
-      _ref$loop = _ref.loop,
-      loop = _ref$loop === void 0 ? false : _ref$loop,
-      _ref$pauseOnHover = _ref.pauseOnHover,
-      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
-      _ref$radius = _ref.radius,
-      radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
-      _ref$arrowTheme = _ref.arrowTheme,
-      arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.DARK : _ref$arrowTheme,
-      _ref$autoHeight = _ref.autoHeight,
-      autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
-      noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
-      showNextSlide = _ref.showNextSlide,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? [] : _ref$children,
-      getSwiper = _ref.getSwiper,
-      onNextClick = _ref.onNextClick,
-      onPrevClick = _ref.onPrevClick,
-      onDotClick = _ref.onDotClick,
-      onChange = _ref.onChange;
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    _ref$withPaginationBo = _ref.withPaginationBottomOffset,
+    withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
+    _ref$autoPlayDelay = _ref.autoPlayDelay,
+    autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? false : _ref$loop,
+    _ref$pauseOnHover = _ref.pauseOnHover,
+    pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
+    _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
+    _ref$arrowTheme = _ref.arrowTheme,
+    arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.DARK : _ref$arrowTheme,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
+    noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
+    showNextSlide = _ref.showNextSlide,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    getSwiper = _ref.getSwiper,
+    onNextClick = _ref.onNextClick,
+    onPrevClick = _ref.onPrevClick,
+    onDotClick = _ref.onDotClick,
+    onChange = _ref.onChange;
   var isSingleSlide = React.Children.count(children) === 1;
   var canAutoPlay = autoPlay && !isSingleSlide;
-
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isTouch = _React$useState2[0],
-      setTouch = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isTouch = _React$useState2[0],
+    setTouch = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      swiperInstance = _React$useState4[0],
-      setSwiperInstance = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    swiperInstance = _React$useState4[0],
+    setSwiperInstance = _React$useState4[1];
   var _React$useState5 = React.useState(true),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isBeginning = _React$useState6[0],
-      setBeginning = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isBeginning = _React$useState6[0],
+    setBeginning = _React$useState6[1];
   var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isEnd = _React$useState8[0],
-      setEnd = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isEnd = _React$useState8[0],
+    setEnd = _React$useState8[1];
   var _React$useState9 = React.useState(canAutoPlay),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      isAutoPlaying = _React$useState10[0],
-      setAutoPlaying = _React$useState10[1];
-
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    isAutoPlaying = _React$useState10[0],
+    setAutoPlaying = _React$useState10[1];
   var _React$useState11 = React.useState(0),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      activeIndex = _React$useState12[0],
-      setActiveIndex = _React$useState12[1];
-
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    activeIndex = _React$useState12[0],
+    setActiveIndex = _React$useState12[1];
   var _React$useState13 = React.useState(autoPlayDelay),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      delay = _React$useState14[0],
-      setDelay = _React$useState14[1];
-
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    delay = _React$useState14[0],
+    setDelay = _React$useState14[1];
   var _React$useState15 = React.useState(false),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      isIncreasedDelay = _React$useState16[0],
-      setIsIncreasedDelay = _React$useState16[1];
-
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    isIncreasedDelay = _React$useState16[0],
+    setIsIncreasedDelay = _React$useState16[1];
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
   var dotTimerDelay = delay / 1000;
   var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
-        autoplay = _ref2.autoplay;
-
+      autoplay = _ref2.autoplay;
     if (_typeof(params.autoplay) !== 'object' || !canAutoPlay || noIncreaseAutoplayDelay) {
       return;
     }
-
-    autoplay.stop(); // eslint-disable-next-line no-param-reassign
-
+    autoplay.stop();
+    // eslint-disable-next-line no-param-reassign
     params.autoplay.delay = autoPlayDelay * 3;
     setDelay(autoPlayDelay * 3);
     setIsIncreasedDelay(true);
@@ -138,7 +121,6 @@ var Banner = function Banner(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
@@ -147,7 +129,6 @@ var Banner = function Banner(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
@@ -156,13 +137,11 @@ var Banner = function Banner(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     if (loop) {
       swiperInstance.slideToLoop(index);
     } else {
       swiperInstance.slideTo(index);
     }
-
     onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
     !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
@@ -171,9 +150,8 @@ var Banner = function Banner(_ref) {
   }, []);
   var handleReachEnd = React.useCallback(function (_ref3) {
     var params = _ref3.params,
-        autoplay = _ref3.autoplay;
+      autoplay = _ref3.autoplay;
     setEnd(true);
-
     if (!params.loop && autoplay.running) {
       autoplay.stop();
     }
@@ -196,11 +174,9 @@ var Banner = function Banner(_ref) {
   }, []);
   React.useEffect(function () {
     var rootElement = rootRef.current;
-
     if (!pauseOnHover || !canAutoPlay) {
       return;
     }
-
     rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
       setAutoPlaying(false);
@@ -212,12 +188,10 @@ var Banner = function Banner(_ref) {
   }, [canAutoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   React.useEffect(function () {
     setAutoPlaying(canAutoPlay);
-
     if (canAutoPlay) {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
       return;
     }
-
     swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
   }, [canAutoPlay, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   var renderNavArrows = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
@@ -277,7 +251,7 @@ var Banner = function Banner(_ref) {
     className: cn('swiper', [classes.swiper]),
     loop: loop,
     autoplay: canAutoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
-    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
     noSwipingClass: classes.noSwiping,
     breakpoints: showNextSlide ? SLIDES_SETTINGS : undefined,
     onSwiper: handleSwiper,
@@ -285,7 +259,8 @@ var Banner = function Banner(_ref) {
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
     onSlideChange: handleSlideChange,
-    onTouchEnd: increaseAutoplayDelay
+    onTouchEnd: increaseAutoplayDelay,
+    modules: [Autoplay]
   }), 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), {
       className: cn('slide', [classes.slide]),
@@ -295,44 +270,4 @@ var Banner = function Banner(_ref) {
     }));
   })), !isSingleSlide && renderNavArrows), !isSingleSlide && renderPagination);
 };
-
-Banner.propTypes = {
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    swiper: PropTypes.string,
-    slide: PropTypes.string,
-    arrow: PropTypes.string,
-    arrowPrev: PropTypes.string,
-    arrowNext: PropTypes.string,
-    pagination: PropTypes.string,
-    dot: PropTypes.string,
-    noSwiping: PropTypes.string
-  }),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    swiper: PropTypes.objectOf(PropTypes.string.isRequired),
-    slide: PropTypes.objectOf(PropTypes.string.isRequired),
-    arrowPrev: PropTypes.objectOf(PropTypes.string.isRequired),
-    arrowNext: PropTypes.objectOf(PropTypes.string.isRequired),
-    pagination: PropTypes.objectOf(PropTypes.string.isRequired),
-    dot: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  withPaginationBottomOffset: PropTypes.bool,
-  autoPlay: PropTypes.bool,
-  autoPlayDelay: PropTypes.number,
-  loop: PropTypes.bool,
-  pauseOnHover: PropTypes.bool,
-  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
-  radius: PropTypes.oneOf(Object.values(Radius)),
-  navTheme: PropTypes.oneOf(Object.values(NavTheme)),
-  arrowTheme: PropTypes.oneOf(Object.values(ArrowTheme)),
-  autoHeight: PropTypes.bool,
-  noIncreaseAutoplayDelay: PropTypes.bool,
-  showNextSlide: PropTypes.bool,
-  getSwiper: PropTypes.func,
-  onNextClick: PropTypes.func,
-  onPrevClick: PropTypes.func,
-  onDotClick: PropTypes.func,
-  onChange: PropTypes.func
-};
 export default Banner;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './BannerDot.less';
+import './BannerDot.scss';
 export interface IBannerDotProps {
     className?: string;
     index: number;

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

@@ -1,18 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./BannerDot.css";
 var cn = cnCreate('mfui-banner-dot');
-
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,
-      dataAttrs = _ref.dataAttrs,
-      index = _ref.index,
-      isActive = _ref.isActive,
-      showTimer = _ref.showTimer,
-      timerDelay = _ref.timerDelay,
-      onClick = _ref.onClick;
+    dataAttrs = _ref.dataAttrs,
+    index = _ref.index,
+    isActive = _ref.isActive,
+    showTimer = _ref.showTimer,
+    timerDelay = _ref.timerDelay,
+    onClick = _ref.onClick;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
   }, [onClick, index]);
@@ -38,18 +36,4 @@ var BannerDot = function BannerDot(_ref) {
     ry: "50"
   }))));
 };
-
-BannerDot.propTypes = {
-  className: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    svg: PropTypes.objectOf(PropTypes.string.isRequired),
-    inner: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  index: PropTypes.number.isRequired,
-  isActive: PropTypes.bool.isRequired,
-  showTimer: PropTypes.bool.isRequired,
-  timerDelay: PropTypes.number.isRequired,
-  onClick: PropTypes.func.isRequired
-};
 export default BannerDot;