@megafon/ui-core 2.5.0 → 3.0.0-beta.11

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-day {
   position: relative;
   -webkit-box-sizing: content-box;
@@ -13,7 +6,7 @@ h5 {
   height: 32px;
   padding: 0 10px 8px 0;
   border: none;
-  color: #333333;
+  color: var(--content);
   line-height: 24px;
   text-decoration: none;
   background-color: rgba(0, 0, 0, 0);
@@ -44,16 +37,16 @@ h5 {
   width: 32px;
   height: 32px;
   border-radius: 50% !important;
-  color: #333333;
-  background-color: #F6F6F6;
+  color: var(--content);
+  background-color: var(--spbSky0);
 }
 .mfui-day:not(:disabled):not(.mfui-day_active):hover:after {
-  color: #333333;
-  background-color: #F6F6F6;
+  color: var(--content);
+  background-color: var(--spbSky0);
 }
 .mfui-day:not(:disabled):not(.mfui-day_active):focus:after,
 .mfui-day_active:after {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-day_disabled {
   cursor: default;
@@ -62,7 +55,7 @@ h5 {
 }
 .mfui-day_active,
 .mfui-day:not(:disabled):not(.mfui-day_active):focus {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-day_active + .mfui-day_active:before,
 .mfui-day_between:hover + .mfui-day:not(.mfui-day_monday).mfui-day_active:before {
@@ -74,7 +67,7 @@ h5 {
   display: block;
   width: 32px;
   height: 32px;
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-day_between {
   position: relative;
@@ -89,7 +82,7 @@ h5 {
   display: block;
   height: 32px;
   padding: 0 20px;
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-day_between:after {
   content: '';
@@ -100,7 +93,7 @@ h5 {
   display: block;
   width: 40px;
   height: 32px;
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-day_sunday,
 .mfui-day_last {

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

@@ -79,7 +79,7 @@ var Day = function Day(_a) {
   };
 
   var handleMouseLeave = function handleMouseLeave() {
-    onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+    onMouseLeave && onMouseLeave();
   };
 
   return /*#__PURE__*/_react["default"].createElement("button", {

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-month {
   position: relative;
   z-index: 1;
@@ -42,7 +35,7 @@ h5 {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-month__title {
   font-size: 15px;
@@ -56,7 +49,7 @@ h5 {
   grid-template-columns: repeat(7, 1fr);
   width: 272px;
   padding-bottom: 13px;
-  border-bottom: 1px solid #EDEDED;
+  border-bottom: 1px solid var(--spbSky1);
   -webkit-column-gap: 22px;
      -moz-column-gap: 22px;
           column-gap: 22px;
@@ -66,7 +59,7 @@ h5 {
   line-height: 16px;
   width: 20px;
   height: 16px;
-  color: #333333;
+  color: var(--content);
   font-weight: 600;
   line-height: 24px;
   text-align: center;

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

@@ -51,12 +51,22 @@ var Month = function Month(_ref) {
       goToNextMonth = _ref.goToNextMonth,
       children = _ref.children;
 
-  var handleArrowLeftClick = function handleArrowLeftClick() {
-    !isPrevMonthDisabled && goToPreviousMonth();
+  var handleArrowLeftClick = function handleArrowLeftClick(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      !isPrevMonthDisabled && goToPreviousMonth();
+    }
   };
 
-  var handleArrowRightClick = function handleArrowRightClick() {
-    !isNextMonthDisabled && goToNextMonth();
+  var handleArrowRightClick = function handleArrowRightClick(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
+      !isNextMonthDisabled && goToNextMonth();
+    }
+  };
+
+  var getTabIndex = function getTabIndex(hasFocus) {
+    var tabIndexWithFocus = 0;
+    var tabIndexWithoutFocus = -1;
+    return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -64,16 +74,22 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('header')
   }, /*#__PURE__*/_react["default"].createElement(ArrowLeft, {
+    role: "button",
+    tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
       disabled: isPrevMonthDisabled
     }),
+    onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('title')
   }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/_react["default"].createElement(ArrowRight, {
+    role: "button",
+    tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
       disabled: isNextMonthDisabled
     }),
+    onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('weekday-labels')

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

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-carousel {
   position: relative;
   display: -webkit-box;
@@ -158,10 +151,10 @@ h5 {
   margin-right: 8px;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
-  background-color: #FFFFFF80;
+  background-color: var(--stcWhite50);
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet:before {
-  background-color: rgba(51, 51, 51, 0.25);
+  background-color: var(--spbSky2);
 }
 .mfui-carousel .swiper-pagination-bullet-active {
   padding: 0;
@@ -172,12 +165,12 @@ h5 {
   cursor: default;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }

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

@@ -1,5 +1,4 @@
 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';
@@ -24,7 +23,7 @@ export declare type SlidesSettingsType = {
         spaceBetween: number;
     };
 };
-export interface ICarouselProps extends IFilterDataAttrs {
+export interface ICarouselProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные классы для корневого элемента */
@@ -39,6 +38,14 @@ export interface ICarouselProps extends IFilterDataAttrs {
         next?: string;
         slide?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        slider?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+        slide?: Record<string, string>;
+    };
     /** Настройки слайдов */
     slidesSettings?: SlidesSettingsType;
     /** Смена слайдов с зацикливанием */

package/dist/lib/components/Carousel/Carousel.js

@@ -154,8 +154,7 @@ var Carousel = function Carousel(_ref) {
       return;
     }
 
-    autoplay.stop(); // eslint-disable-next-line no-param-reassign
-
+    autoplay.stop();
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
@@ -165,7 +164,7 @@ var Carousel = function Carousel(_ref) {
     }
 
     swiperInstance.slidePrev();
-    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
+    onPrevClick && onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
@@ -174,14 +173,14 @@ var Carousel = function Carousel(_ref) {
     }
 
     swiperInstance.slideNext();
-    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
+    onNextClick && onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
   var handleSwiper = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
     setLocked(swiper.isBeginning && swiper.isEnd);
-    getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
-  }, [getSwiper]);
+    getSwiper && getSwiper(swiper);
+  }, []);
   var handleReachBeginnig = React.useCallback(function () {
     setBeginning(true);
   }, []);
@@ -202,7 +201,7 @@ var Carousel = function Carousel(_ref) {
     var realIndex = _ref4.realIndex,
         previousIndex = _ref4.previousIndex,
         params = _ref4.params;
-    onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
+    onChange && onChange(realIndex, previousIndex, params.slidesPerView);
   }, [onChange]);
 
   var handleRootClick = function handleRootClick(e) {
@@ -215,15 +214,13 @@ var Carousel = function Carousel(_ref) {
   }; // https://github.com/nolimits4web/Swiper/issues/2346
 
 
-  var handleSwiperResize = React.useCallback(function () {
-    (0, _lodash["default"])(function (swiper) {
-      setBeginning(swiper.isBeginning);
-      setEnd(swiper.isEnd);
-      setLocked(swiper.isBeginning && swiper.isEnd);
+  var handleSwiperResize = React.useCallback((0, _lodash["default"])(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+    setLocked(swiper.isBeginning && swiper.isEnd);
 
-      if (swiper.params.slidesPerView === SlidesPerView.AUTO) {}
-    }, _throttleTime["default"].resize);
-  }, []);
+    if (swiper.params.slidesPerView === SlidesPerView.AUTO) {}
+  }, _throttleTime["default"].resize), []);
 
   var handleSlideFocus = function handleSlideFocus(index) {
     return function (e) {
@@ -248,7 +245,7 @@ var Carousel = function Carousel(_ref) {
     e.nativeEvent.preventDefault();
   };
 
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       'nav-theme': navTheme
@@ -256,7 +253,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleRootClick
   }), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, containerModifier ? {
     containerModifierClass: containerModifier
-  } : {}, {
+  } : {}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     className: cn('swiper', {
       'default-inner-indents': !innerIndentsClass
     }, [innerIndentsClass, containerClass]),
@@ -286,13 +283,13 @@ var Carousel = function Carousel(_ref) {
     onTouchEnd: increaseAutoplayDelay,
     onResize: handleSwiperResize
   }), React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
+    return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
       key: i,
       className: cn('slide', slideClass),
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
-    }, child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    }), child);
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
     className: cn('arrow', {
       prev: true,
       locked: isLocked
@@ -300,7 +297,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: _NavArrow.Theme.PURPLE
-  }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
     className: cn('arrow', {
       next: true,
       locked: isLocked
@@ -309,7 +306,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: _NavArrow.Theme.PURPLE
-  }));
+  })));
 };
 
 Carousel.propTypes = {
@@ -326,7 +323,13 @@ Carousel.propTypes = {
     next: PropTypes.string,
     slide: PropTypes.string
   }),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  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((0, _checkBreakpointsPropTypes["default"])({
     slidesPerView: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(Object.values(SlidesPerView))]).isRequired,
     spaceBetween: PropTypes.number.isRequired,

package/dist/lib/components/Checkbox/Checkbox.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-checkbox {
   margin: 0 5px 12px 5px;
 }
@@ -89,32 +82,32 @@ h5 {
   top: 0;
 }
 .mfui-checkbox_color_dark .mfui-checkbox__custom-input {
-  border-color: #D8D8D8;
+  border-color: var(--spbSky2);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  border-color: #10E272;
+  border-color: var(--buttonHoverGreen);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: #404D46 !important;
-  background-color: #404D46;
+  border-color: var(--buttonDown) !important;
+  background-color: var(--buttonDown);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__icon {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
-  border-color: #00B956;
-  color: #FFFFFF;
-  background-color: #00B956;
+  border-color: var(--brandGreen);
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  background-color: #10E272;
+  background-color: var(--buttonHoverGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: #404D46 !important;
+  background-color: var(--buttonDown) !important;
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
 .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
   cursor: default;
@@ -122,17 +115,17 @@ h5 {
 }
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: #D8D8D8 !important;
-  background-color: #EDEDED;
+  border-color: var(--spbSky2) !important;
+  background-color: var(--spbSky1);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-checkbox_color_light {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-checkbox_color_light .mfui-checkbox__custom-input {
-  border-color: #FFFFFF;
-  color: #00B956;
-  background-color: #FFFFFF;
+  border-color: var(--stcWhite);
+  color: var(--brandGreen);
+  background-color: var(--stcWhite);
 }

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

@@ -1,8 +1,6 @@
-import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
+import React from 'react';
 import './Checkbox.less';
-export interface ICheckboxProps extends IFilterDataAttrs {
+export interface ICheckboxProps {
     /** Цвет чекбокса */
     color?: 'dark' | 'light';
     /** Дополнительный класс корневого элемента */
@@ -12,6 +10,13 @@ export interface ICheckboxProps extends IFilterDataAttrs {
         inner?: string;
         icon?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+        extraContent?: Record<string, string>;
+    };
     /** Размер текста */
     fontSize?: 'regular' | 'small';
     /** Имя компонента в DOM */
@@ -28,28 +33,7 @@ export interface ICheckboxProps extends IFilterDataAttrs {
     extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string;
     children: JSX.Element[] | Element[] | JSX.Element | Element | string;
     /** Обработчик изменения значения */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare class Checkbox extends React.Component<ICheckboxProps> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        fontSize: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        checked: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
-        extraContent: PropTypes.Requireable<string | PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: Partial<ICheckboxProps>;
-    isTouch: boolean;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    onChange?: (checked: boolean) => void;
 }
+declare const Checkbox: React.FC<ICheckboxProps>;
 export default Checkbox;