@megafon/ui-core 6.0.0-beta.4 → 6.0.1

package/dist/es/components/Carousel/Carousel.css

@@ -1 +1,215 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-carousel,.mfui-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}@media screen and (max-width:1023px){.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{display:none}}.mfui-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(transparent),to(var(--gradientColor)));background:linear-gradient(270deg,transparent 0,var(--gradientColor) 100%);left:0}.mfui-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(transparent));background:linear-gradient(270deg,var(--gradientColor) 0,transparent 100%);right:0}.mfui-carousel__swiper_gradient-color_default{--gradientColor:var(--base)}.mfui-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen)}.mfui-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack)}.mfui-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0)}.mfui-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1)}.mfui-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2)}.mfui-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-carousel__arrow{position:absolute;top:50%;-webkit-transform:translateY(calc(-50% - 20px));transform:translateY(calc(-50% - 20px));z-index:6}@media screen and (max-width:1023px){.mfui-carousel__arrow{display:none}}.mfui-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-carousel__arrow_locked{display:none}.mfui-carousel .swiper-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;border-radius:12px;order:2;padding-top:32px;width:100%}.mfui-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-carousel .swiper-pagination-bullet{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;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;justify-content:center;-webkit-transition:width .5s,background-color .3s;transition:width .5s,background-color .3s;width:8px}.mfui-carousel .swiper-pagination-bullet:before{border-radius:50%;content:"";display:block;height:100%;-webkit-transition:border-radius .5s;transition:border-radius .5s;width:100%}.mfui-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-carousel .swiper-pagination-bullet-active{cursor:default;width:20px}.mfui-carousel .swiper-pagination-bullet-active:before{border-radius:4px}.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}
+.mfui-carousel {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-carousel__swiper {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin: -20px 0 -25px;
+  padding: 20px 0 25px;
+  overflow: hidden;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-carousel__swiper {
+    margin-right: -20px !important;
+    margin-left: -20px !important;
+    padding-right: 20px !important;
+    padding-left: 20px !important;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-carousel__swiper_default-inner-indents {
+    margin-right: -48px;
+    margin-left: -48px;
+    padding-right: 48px;
+    padding-left: 48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-carousel__swiper_default-inner-indents {
+    margin-right: -16px;
+    margin-left: -16px;
+    padding-right: 32px;
+    padding-left: 16px;
+  }
+}
+.mfui-carousel__swiper_gradient:before,
+.mfui-carousel__swiper_gradient:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 5;
+  width: var(--gap);
+}
+@media screen and (max-width: 1023px) {
+  .mfui-carousel__swiper_gradient:before,
+  .mfui-carousel__swiper_gradient:after {
+    display: none;
+  }
+}
+.mfui-carousel__swiper_gradient:before {
+  left: 0;
+  background: -webkit-gradient(linear, right top, left top, from(transparent), to(var(--gradientColor)));
+  background: linear-gradient(270deg, transparent 0%, var(--gradientColor) 100%);
+}
+.mfui-carousel__swiper_gradient:after {
+  right: 0;
+  background: -webkit-gradient(linear, right top, left top, from(var(--gradientColor)), to(transparent));
+  background: linear-gradient(270deg, var(--gradientColor) 0%, transparent 100%);
+}
+.mfui-carousel__swiper_gradient-color_default {
+  --gradientColor: var(--base);
+}
+.mfui-carousel__swiper_gradient-color_green {
+  --gradientColor: var(--brandGreen);
+}
+.mfui-carousel__swiper_gradient-color_black {
+  --gradientColor: var(--stcBlack);
+}
+.mfui-carousel__swiper_gradient-color_spbSky0 {
+  --gradientColor: var(--spbSky0);
+}
+.mfui-carousel__swiper_gradient-color_spbSky1 {
+  --gradientColor: var(--spbSky1);
+}
+.mfui-carousel__swiper_gradient-color_spbSky2 {
+  --gradientColor: var(--spbSky2);
+}
+.mfui-carousel .swiper-wrapper {
+  z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-carousel__slide {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-carousel__slide {
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+    opacity: 0;
+    -webkit-transition: opacity 0.2s;
+    transition: opacity 0.2s;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-carousel .swiper-slide-visible {
+    opacity: 1;
+    -webkit-transition: opacity 0.4s;
+    transition: opacity 0.4s;
+  }
+}
+.mfui-carousel__arrow {
+  position: absolute;
+  top: 50%;
+  z-index: 6;
+  -webkit-transform: translateY(calc(-50% - 40px / 2));
+          transform: translateY(calc(-50% - 40px / 2));
+}
+@media screen and (max-width: 1023px) {
+  .mfui-carousel__arrow {
+    display: none;
+  }
+}
+.mfui-carousel__arrow_prev {
+  right: calc(100% + 12px);
+}
+@media screen and (min-width: 1280px) {
+  .mfui-carousel__arrow_prev {
+    right: calc(100% + 20px);
+  }
+}
+.mfui-carousel__arrow_next {
+  left: calc(100% + 12px);
+}
+@media screen and (min-width: 1280px) {
+  .mfui-carousel__arrow_next {
+    left: calc(100% + 20px);
+  }
+}
+.mfui-carousel__arrow_locked {
+  display: none;
+}
+.mfui-carousel .swiper-pagination {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  justify-self: center;
+  -webkit-box-ordinal-group: 3;
+      -ms-flex-order: 2;
+          order: 2;
+  width: 100%;
+  padding-top: 32px;
+  border-radius: 12px;
+}
+.mfui-carousel .swiper-pagination.swiper-pagination-lock {
+  display: none;
+}
+.mfui-carousel .swiper-pagination-bullet {
+  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;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  cursor: pointer;
+  -webkit-transition: width 0.5s, background-color 0.3s;
+  transition: width 0.5s, background-color 0.3s;
+}
+.mfui-carousel .swiper-pagination-bullet:before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  -webkit-transition: border-radius 0.5s;
+  transition: border-radius 0.5s;
+}
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
+  background-color: var(--stcWhite50);
+}
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet:before {
+  background-color: var(--spbSky2);
+}
+.mfui-carousel .swiper-pagination-bullet-active {
+  width: 20px;
+  cursor: default;
+}
+.mfui-carousel .swiper-pagination-bullet-active:before {
+  border-radius: 4px;
+}
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
+  background-color: var(--base);
+}
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
+  background-color: var(--brandGreen);
+}

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { SwiperClass } from 'swiper/react';
-import { PaginationOptions } from 'swiper/types';
-import './Carousel.scss';
+import React from 'react';
+import SwiperCore from 'swiper';
+import { PaginationOptions } from 'swiper/types/components/pagination';
+import './Carousel.less';
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly GREEN: "green";
@@ -21,11 +21,11 @@ declare const GradientTheme: {
     readonly SPB_SKY_1: "spbSky1";
     readonly SPB_SKY_2: "spbSky2";
 };
-type SlidesPerViewType = (typeof SlidesPerView)[keyof typeof SlidesPerView];
-type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
-type EffectThemeType = (typeof EffectTheme)[keyof typeof EffectTheme];
-type GradientThemeType = (typeof GradientTheme)[keyof typeof GradientTheme];
-export type SlidesSettingsType = {
+declare type SlidesPerViewType = typeof SlidesPerView[keyof typeof SlidesPerView];
+declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+declare type EffectThemeType = typeof EffectTheme[keyof typeof EffectTheme];
+declare type GradientThemeType = typeof GradientTheme[keyof typeof GradientTheme];
+export declare type SlidesSettingsType = {
     [key: number]: {
         slidesPerView: number | SlidesPerViewType;
         slidesPerGroup?: number;
@@ -84,7 +84,7 @@ export interface ICarouselProps {
     /** Свайп к слайду, по которому произведен клик */
     slideToClickedSlide?: boolean;
     /** Ref на swiper */
-    getSwiper?: (instance: SwiperClass) => void;
+    getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке вперед (должен быть обернут в useCallback) */
     onNextClick?: (index: number) => void;
     /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */
@@ -95,7 +95,6 @@ export interface ICarouselProps {
     gradient?: boolean;
     /** Цвет градиента */
     gradientColor?: GradientThemeType;
-    children?: React.ReactNode;
 }
 declare const Carousel: React.FC<ICarouselProps>;
 export default Carousel;

package/dist/es/components/Carousel/Carousel.js

@@ -2,36 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import "core-js/modules/es.array.index-of.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.symbol.iterator.js";
-import "core-js/modules/es.array.from.js";
+
+var _defaultSlidesSetting;
+
 import "core-js/modules/es.array.is-array.js";
-import "core-js/modules/es.array.iterator.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.date.to-string.js";
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.regexp.test.js";
-import "core-js/modules/es.regexp.to-string.js";
-import "core-js/modules/es.string.iterator.js";
-import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.array.map.js";
-import * as React from 'react';
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
-import { Autoplay, Pagination, EffectFade } from 'swiper/modules';
+import * as PropTypes from 'prop-types';
+import SwiperCore, { Autoplay, Pagination, EffectFade } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
 import usePrevious from "../../hooks/usePrevious";
-import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
+import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
 import useGradient from "./useGradient";
 import "./Carousel.css";
+SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
   LIGHT: 'light',
   GREEN: 'green'
@@ -51,6 +41,7 @@ var GradientTheme = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2'
 };
+
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -59,80 +50,87 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
     stopOnLastSlide: true
   };
 };
-var defaultSlidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+
+var defaultSlidesSettings = (_defaultSlidesSetting = {}, _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 1,
   spaceBetween: 16
-}), breakpoints.MOBILE_BIG_START, {
+}), _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_BIG_START, {
   slidesPerView: 3,
   spaceBetween: 20
-}), breakpoints.DESKTOP_MIDDLE_START, {
+}), _defineProperty(_defaultSlidesSetting, breakpoints.DESKTOP_MIDDLE_START, {
   slidesPerView: 4,
   spaceBetween: 20
-});
+}), _defaultSlidesSetting);
 var cn = cnCreate('mfui-carousel');
+
 var Carousel = function Carousel(_ref) {
   var rootRef = _ref.rootRef,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
-    rootClass = _ref$classes2.root,
-    innerIndentsClass = _ref$classes2.innerIndents,
-    prevClass = _ref$classes2.prev,
-    nextClass = _ref$classes2.next,
-    containerClass = _ref$classes2.container,
-    containerModifier = _ref$classes2.containerModifier,
-    slideClass = _ref$classes2.slide,
-    dataAttrs = _ref.dataAttrs,
-    _ref$slidesSettings = _ref.slidesSettings,
-    slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
-    _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$transitionSpeed = _ref.transitionSpeed,
-    transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
-    threshold = _ref.threshold,
-    _ref$initialSlide = _ref.initialSlide,
-    initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
-    _ref$disableTouchMove = _ref.disableTouchMove,
-    disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
-    _ref$centeredSlides = _ref.centeredSlides,
-    centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
-    _ref$navTheme = _ref.navTheme,
-    navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
-    _ref$effectTheme = _ref.effectTheme,
-    effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
-    noSwipingSelector = _ref.noSwipingSelector,
-    children = _ref.children,
-    pagination = _ref.pagination,
-    getSwiper = _ref.getSwiper,
-    onNextClick = _ref.onNextClick,
-    onPrevClick = _ref.onPrevClick,
-    onChange = _ref.onChange,
-    _ref$slideToClickedSl = _ref.slideToClickedSlide,
-    slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
-    _ref$gradient = _ref.gradient,
-    gradient = _ref$gradient === void 0 ? false : _ref$gradient,
-    _ref$gradientColor = _ref.gradientColor,
-    gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
+      className = _ref.className,
+      _ref$classes = _ref.classes;
+  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var rootClass = _ref$classes.root,
+      innerIndentsClass = _ref$classes.innerIndents,
+      prevClass = _ref$classes.prev,
+      nextClass = _ref$classes.next,
+      containerClass = _ref$classes.container,
+      containerModifier = _ref$classes.containerModifier,
+      slideClass = _ref$classes.slide,
+      dataAttrs = _ref.dataAttrs,
+      _ref$slidesSettings = _ref.slidesSettings,
+      slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
+      _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$transitionSpeed = _ref.transitionSpeed,
+      transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
+      threshold = _ref.threshold,
+      _ref$initialSlide = _ref.initialSlide,
+      initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
+      _ref$disableTouchMove = _ref.disableTouchMove,
+      disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
+      _ref$centeredSlides = _ref.centeredSlides,
+      centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
+      _ref$navTheme = _ref.navTheme,
+      navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
+      _ref$effectTheme = _ref.effectTheme,
+      effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
+      noSwipingSelector = _ref.noSwipingSelector,
+      children = _ref.children,
+      pagination = _ref.pagination,
+      getSwiper = _ref.getSwiper,
+      onNextClick = _ref.onNextClick,
+      onPrevClick = _ref.onPrevClick,
+      onChange = _ref.onChange,
+      _ref$slideToClickedSl = _ref.slideToClickedSlide,
+      slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
+      _ref$gradient = _ref.gradient,
+      gradient = _ref$gradient === void 0 ? false : _ref$gradient,
+      _ref$gradientColor = _ref.gradientColor,
+      gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
+
   var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    swiperInstance = _React$useState2[0],
-    setSwiperInstance = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      swiperInstance = _React$useState2[0],
+      setSwiperInstance = _React$useState2[1];
+
   var _React$useState3 = React.useState(true),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isBeginning = _React$useState4[0],
-    setBeginning = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isBeginning = _React$useState4[0],
+      setBeginning = _React$useState4[1];
+
   var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isEnd = _React$useState6[0],
-    setEnd = _React$useState6[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isEnd = _React$useState6[0],
+      setEnd = _React$useState6[1];
+
   var _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    isLocked = _React$useState8[0],
-    setLocked = _React$useState8[1];
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isLocked = _React$useState8[0],
+      setLocked = _React$useState8[1];
+
   var childrenLen = Array.isArray(children) ? children.length : 0;
   var prevChildrenLen = usePrevious(childrenLen) || 0;
   var isChildrenLenDiff = childrenLen !== prevChildrenLen;
@@ -143,12 +141,14 @@ var Carousel = function Carousel(_ref) {
   });
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
-      autoplay = _ref2.autoplay;
+        autoplay = _ref2.autoplay;
+
     if (_typeof(params.autoplay) !== 'object' || !autoplay.running) {
       return;
     }
-    autoplay.stop();
-    // eslint-disable-next-line no-param-reassign
+
+    autoplay.stop(); // eslint-disable-next-line no-param-reassign
+
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
@@ -156,6 +156,7 @@ var Carousel = function Carousel(_ref) {
     if (!swiperInstance) {
       return;
     }
+
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
@@ -164,6 +165,7 @@ var Carousel = function Carousel(_ref) {
     if (!swiperInstance) {
       return;
     }
+
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
@@ -178,8 +180,9 @@ var Carousel = function Carousel(_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();
     }
@@ -190,45 +193,41 @@ var Carousel = function Carousel(_ref) {
   }, []);
   var handleSlideChange = React.useCallback(function (_ref4) {
     var realIndex = _ref4.realIndex,
-      previousIndex = _ref4.previousIndex,
-      params = _ref4.params;
+        previousIndex = _ref4.previousIndex,
+        params = _ref4.params;
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
   }, [onChange]);
+
   var handleRootClick = function handleRootClick(e) {
     var elem = e.target;
     var isBullet = elem.classList.contains('swiper-pagination-bullet');
+
     if (isBullet && swiperInstance) {
       increaseAutoplayDelay(swiperInstance);
     }
   };
+
   var handleNavDisplay = function handleNavDisplay(swiper) {
     setBeginning(swiper.isBeginning);
     setEnd(swiper.isEnd);
     setLocked(swiper.isBeginning && swiper.isEnd);
-  };
-  // https://github.com/nolimits4web/Swiper/issues/2346
+  }; // https://github.com/nolimits4web/Swiper/issues/2346
+
+
   var handleSwiperResize = React.useCallback(function () {
     throttle(function (swiper) {
       handleNavDisplay(swiper);
+
       if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
-        var _iterator = _createForOfIteratorHelper(swiper.slides),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var slide = _step.value;
-            slide.style.width = '';
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
+        swiper.slides.css('width', '');
       }
     }, throttleTime.resize);
   }, []);
+
   var handleSlideFocus = function handleSlideFocus(index) {
     return function (e) {
       var _a;
+
       if (loop) {
         // for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
         // because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
@@ -239,21 +238,26 @@ var Carousel = function Carousel(_ref) {
         swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(realIndex);
         return;
       }
+
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
     };
   };
+
   var disableFocusOnSlideClick = function disableFocusOnSlideClick(e) {
     if (e.nativeEvent.target.closest(".".concat(cn()))) {
       e.nativeEvent.preventDefault();
     }
   };
+
   React.useEffect(function () {
     if (!swiperInstance) {
       return undefined;
     }
+
     var windowResizeHandler = function windowResizeHandler() {
       return handleNavDisplay(swiperInstance);
     };
+
     var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
     window.addEventListener('resize', windowResizeHandlerThrottled);
     return function () {
@@ -282,9 +286,8 @@ var Carousel = function Carousel(_ref) {
       'gradient-color': gradient && gradientColor
     }, [innerIndentsClass, containerClass]),
     breakpoints: slidesSettings,
-    watchSlidesProgress: true,
+    watchSlidesVisibility: true,
     watchOverflow: true,
-    modules: [Autoplay, Pagination, EffectFade],
     loop: loop,
     pagination: _extends({
       clickable: true
@@ -341,4 +344,58 @@ var Carousel = function Carousel(_ref) {
     theme: ArrowTheme.PURPLE
   }));
 };
+
+Carousel.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    innerIndents: PropTypes.string,
+    container: PropTypes.string,
+    containerModifier: PropTypes.string,
+    prev: PropTypes.string,
+    next: PropTypes.string,
+    slide: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    slider: PropTypes.objectOf(PropTypes.string.isRequired),
+    prev: PropTypes.objectOf(PropTypes.string.isRequired),
+    next: PropTypes.objectOf(PropTypes.string.isRequired),
+    slide: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  slidesSettings: PropTypes.objectOf(checkBreakpointsPropTypes({
+    slidesPerView: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(Object.values(SlidesPerView))]).isRequired,
+    spaceBetween: PropTypes.number.isRequired,
+    slidesPerGroup: PropTypes.number
+  })),
+  pagination: PropTypes.shape({
+    el: PropTypes.string,
+    bulletElement: PropTypes.string,
+    dynamicBullets: PropTypes.string,
+    clickable: PropTypes.bool,
+    renderBullet: PropTypes.func,
+    bulletClass: PropTypes.string,
+    bulletActiveClass: PropTypes.string,
+    modifierClass: PropTypes.string
+  }),
+  loop: PropTypes.bool,
+  threshold: PropTypes.number,
+  autoPlay: PropTypes.bool,
+  autoPlayDelay: PropTypes.number,
+  disableTouchMove: PropTypes.bool,
+  centeredSlides: PropTypes.bool,
+  transitionSpeed: PropTypes.number,
+  navTheme: PropTypes.oneOf(Object.values(NavTheme)),
+  effectTheme: PropTypes.oneOf(Object.values(EffectTheme)),
+  noSwipingSelector: PropTypes.string,
+  getSwiper: PropTypes.func,
+  onNextClick: PropTypes.func,
+  onPrevClick: PropTypes.func,
+  onChange: PropTypes.func,
+  gradient: PropTypes.oneOfType([PropTypes.bool]),
+  gradientColor: PropTypes.oneOf(Object.values(GradientTheme))
+};
 export default Carousel;

package/dist/es/components/Carousel/checkBreakpointsPropTypes.d.ts

@@ -1,4 +1,4 @@
-type ObjectType = {
+declare type ObjectType = {
     [key: string]: unknown;
 };
 declare const checkBreakpointsPropTypes: (settingsPropTypes: ObjectType) => (object: ObjectType, key: string, componentName: string) => Error | null;