@megafon/ui-core 2.0.0-beta.96 → 2.0.0

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

@@ -5,10 +5,9 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-month {
+.mfui-month {
   position: relative;
-  padding: 28px 0;
-  width: 284px;
+  z-index: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -19,70 +18,71 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  z-index: 1;
+  width: 284px;
+  padding: 28px 0;
 }
-.mfui-beta-month__header {
+.mfui-month__header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 282px;
   margin-bottom: 20px;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
   text-transform: capitalize;
 }
-.mfui-beta-month__header svg {
+.mfui-month__header svg {
   height: 24.5px;
-  fill: #333333;
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  fill: #333333;
 }
-.mfui-beta-month__title {
+.mfui-month__title {
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
   width: 224px;
   text-align: center;
 }
-.mfui-beta-month__weekday-labels {
+.mfui-month__weekday-labels {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  -webkit-column-gap: 22px;
-     -moz-column-gap: 22px;
-          column-gap: 22px;
   width: 272px;
   padding-bottom: 13px;
   border-bottom: 1px solid #EDEDED;
+  -webkit-column-gap: 22px;
+     -moz-column-gap: 22px;
+          column-gap: 22px;
 }
-.mfui-beta-month__weekday {
+.mfui-month__weekday {
   font-size: 12px;
   line-height: 16px;
-  color: #333333;
-  font-weight: 600;
-  text-transform: capitalize;
-  text-align: center;
   width: 20px;
   height: 16px;
+  color: #333333;
+  font-weight: 600;
   line-height: 24px;
+  text-align: center;
+  text-transform: capitalize;
 }
-.mfui-beta-month__days {
+.mfui-month__days {
   display: grid;
+  grid-template-columns: repeat(7, 1fr);
   width: 284px;
   margin-top: 8px;
-  grid-template-columns: repeat(7, 1fr);
-  -webkit-column-gap: 10px;
-     -moz-column-gap: 10px;
-          column-gap: 10px;
-  row-gap: 8px;
+  -webkit-column-gap: 0;
+     -moz-column-gap: 0;
+          column-gap: 0;
+  row-gap: 0;
 }
-svg.mfui-beta-month__arrow_disabled {
+svg.mfui-month__arrow_disabled {
   cursor: default;
   opacity: 0.5;
 }

package/dist/lib/components/Calendar/components/Month/Month.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import './Month.less';
 import { FirstDayOfWeek, MonthType } from '@datepicker-react/hooks';
+import './Month.less';
 export interface IMonthPickerProps {
     firstDayOfWeek: FirstDayOfWeek;
     activeMonths: MonthType[];

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

@@ -1,9 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.array.concat");
-
-require("core-js/modules/es.array.map");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,9 +13,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _uiHelpers = require("@megafon/ui-helpers");
 
-var _cnCreate = _interopRequireDefault(require("../../../../utils/cnCreate"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -43,7 +39,7 @@ var ArrowRight = function ArrowRight(props) {
   }));
 };
 
-var cn = (0, _cnCreate["default"])('mfui-beta-month');
+var cn = (0, _uiHelpers.cnCreate)('mfui-month');
 
 var Month = function Month(_ref) {
   var isPrevMonthDisabled = _ref.isPrevMonthDisabled,

package/dist/lib/components/Carousel/Carousel.css

@@ -5,126 +5,131 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-carousel {
+.mfui-carousel {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-beta-carousel__swiper {
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+.mfui-carousel__swiper {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  position: relative;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin: -20px 0 -25px;
+  padding: 20px 0 25px;
   overflow: hidden;
-  padding-top: 20px;
-  margin-top: -20px;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-carousel__swiper {
-    padding-left: 20px !important;
-    padding-right: 20px !important;
-    margin-left: -20px !important;
+  .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-beta-carousel__swiper_default-inner-indents {
-    padding-left: 48px;
-    padding-right: 48px;
-    margin-left: -48px;
+  .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-beta-carousel__swiper_default-inner-indents {
-    padding-left: 32px;
-    padding-right: 32px;
+  .mfui-carousel__swiper_default-inner-indents {
     margin-right: -16px;
     margin-left: -16px;
+    padding-right: 32px;
+    padding-left: 16px;
   }
 }
-.mfui-beta-carousel .swiper-wrapper {
+.mfui-carousel .swiper-wrapper {
+  z-index: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  z-index: 1;
-  padding-bottom: 40px;
 }
-.mfui-beta-carousel__slide {
+.mfui-carousel__slide {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-carousel__slide {
+  .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-beta-carousel .swiper-slide-visible {
+  .mfui-carousel .swiper-slide-visible {
     opacity: 1;
     -webkit-transition: opacity 0.4s;
     transition: opacity 0.4s;
   }
 }
-.mfui-beta-carousel__arrow {
+.mfui-carousel__arrow {
   position: absolute;
   top: 50%;
+  z-index: 2;
   -webkit-transform: translateY(calc(-50% - 40px / 2));
           transform: translateY(calc(-50% - 40px / 2));
 }
 @media screen and (max-width: 1023px) {
-  .mfui-beta-carousel__arrow {
+  .mfui-carousel__arrow {
     display: none;
   }
 }
-.mfui-beta-carousel__arrow_prev {
+.mfui-carousel__arrow_prev {
   right: calc(100% + 12px);
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-carousel__arrow_prev {
+  .mfui-carousel__arrow_prev {
     right: calc(100% + 20px);
   }
 }
-.mfui-beta-carousel__arrow_next {
+.mfui-carousel__arrow_next {
   left: calc(100% + 12px);
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-carousel__arrow_next {
+  .mfui-carousel__arrow_next {
     left: calc(100% + 20px);
   }
 }
-.mfui-beta-carousel__arrow_locked {
+.mfui-carousel__arrow_locked {
   display: none;
 }
-.mfui-beta-carousel .swiper-pagination {
-  z-index: 2;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+.mfui-carousel .swiper-pagination {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -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-beta-carousel .swiper-pagination.swiper-pagination-lock {
+.mfui-carousel .swiper-pagination.swiper-pagination-lock {
   display: none;
 }
-.mfui-beta-carousel .swiper-pagination-bullet {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-carousel .swiper-pagination-bullet {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -134,43 +139,45 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   width: 8px;
   height: 8px;
   padding: 1px;
   border-radius: 50%;
   cursor: pointer;
 }
-.mfui-beta-carousel .swiper-pagination-bullet:before {
+.mfui-carousel .swiper-pagination-bullet:before {
   content: '';
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
   border-radius: 50%;
 }
-.mfui-beta-carousel .swiper-pagination-bullet:not(:last-child) {
+.mfui-carousel .swiper-pagination-bullet:not(:last-child) {
   margin-right: 8px;
 }
-.mfui-beta-carousel_nav-theme_green .swiper-pagination-bullet:before {
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
   background-color: rgba(255, 255, 255, 0.5);
 }
-.mfui-beta-carousel_nav-theme_light .swiper-pagination-bullet:before {
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet:before {
   background-color: rgba(51, 51, 51, 0.25);
 }
-.mfui-beta-carousel .swiper-pagination-bullet-active {
+.mfui-carousel .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-carousel_nav-theme_green .swiper-pagination-bullet-active {
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
   background-color: #FFFFFF;
 }
-.mfui-beta-carousel_nav-theme_light .swiper-pagination-bullet-active {
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
   background-color: #731982;
 }

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

@@ -1,27 +1,43 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
+import SwiperCore from 'swiper';
+import { PaginationOptions } from 'swiper/types/components/pagination';
 import './Carousel.less';
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly GREEN: "green";
 };
+export declare const EffectTheme: {
+    readonly SLIDE: "slide";
+    readonly FADE: "fade";
+};
 declare const SlidesPerView: {
     readonly AUTO: "auto";
 };
 declare type SlidesPerViewType = typeof SlidesPerView[keyof typeof SlidesPerView];
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+declare type EffectThemeType = typeof EffectTheme[keyof typeof EffectTheme];
 export declare type SlidesSettingsType = {
     [key: number]: {
         slidesPerView: number | SlidesPerViewType;
+        slidesPerGroup?: number;
         spaceBetween: number;
     };
 };
-export interface ICarouselProps {
+export interface ICarouselProps extends IFilterDataAttrs {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные классы для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         root?: string;
         innerIndents?: string;
+        container?: string;
+        containerModifier?: string;
+        prev?: string;
+        next?: string;
+        slide?: string;
     };
     /** Настройки слайдов */
     slidesSettings?: SlidesSettingsType;
@@ -29,18 +45,34 @@ export interface ICarouselProps {
     loop?: boolean;
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
+    /** Настройки пагинации */
+    pagination?: PaginationOptions;
     /** Задержка для авто прокрутки */
     autoPlayDelay?: number;
+    /** Скорость смены слайдов */
+    transitionSpeed?: number;
+    /** Пороговое значение свайпа при котором выполняется сдвиг слайдов в карусели */
+    threshold?: number;
+    /** Порядковый номер первого видимого слайда */
+    initialSlide?: number;
+    /** Отключение смены слайда свайпами */
+    disableTouchMove?: boolean;
+    /** Активный слайд по центру экрана */
+    centeredSlides?: boolean;
     /** Тема навигации */
     navTheme?: NavThemeType;
+    /** Эффект анимации */
+    effectTheme?: EffectThemeType;
     /** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
     noSwipingSelector?: string;
+    /** Ref на swiper */
+    getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке вперед (должен быть обернут в useCallback) */
     onNextClick?: (index: number) => void;
     /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */
     onPrevClick?: (index: number) => void;
     /** Обработчик смены слайда (должен быть обернут в useCallback) */
-    onChange?: (index: number) => void;
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
 }
 declare const Carousel: React.FC<ICarouselProps>;
 export default Carousel;