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

package/dist/es/components/Button/Button.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-button {
   font-family: inherit;
   font-size: 15px;
@@ -15,7 +8,7 @@ h5 {
   padding: 0 32px;
   border: none;
   border-radius: 30px;
-  color: #FFFFFF;
+  color: var(--stcWhite);
   font-weight: 500;
   text-align: center;
   text-decoration: none;
@@ -207,119 +200,135 @@ h5 {
   display: none;
 }
 .mfui-button_type_primary.mfui-button_theme_green {
-  color: #FFFFFF;
-  background-color: #00B956;
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
 .mfui-button_type_primary.mfui-button_theme_green svg {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):hover {
-  background-color: #10E272;
-  -webkit-box-shadow: inset 0 0 0 1px #10E272;
-          box-shadow: inset 0 0 0 1px #10E272;
+  background-color: var(--buttonHoverGreen);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
+          box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_green:not(.mfui-button_loading):active {
-  background-color: #404D46;
-  -webkit-box-shadow: inset 0 0 0 1px #404D46;
-          box-shadow: inset 0 0 0 1px #404D46;
+  background-color: var(--buttonDown);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
+          box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_primary.mfui-button_theme_purple {
-  color: #FFFFFF;
-  background-color: #731982;
+  color: var(--stcWhite);
+  background-color: var(--brandPurple);
 }
 .mfui-button_type_primary.mfui-button_theme_purple svg {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover {
-  background-color: #534455;
-  -webkit-box-shadow: inset 0 0 0 1px #534455;
-          box-shadow: inset 0 0 0 1px #534455;
+  background-color: var(--buttonhoverPurple);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonhoverPurple);
+          box-shadow: inset 0 0 0 1px var(--buttonhoverPurple);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active {
-  background-color: #404D46;
-  -webkit-box-shadow: inset 0 0 0 1px #404D46;
-          box-shadow: inset 0 0 0 1px #404D46;
+  background-color: var(--buttonDown);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
+          box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_primary.mfui-button_theme_white {
-  color: #333333;
-  background-color: #FFFFFF;
+  color: var(--stcBlack);
+  background-color: var(--stcWhite);
 }
 .mfui-button_type_primary.mfui-button_theme_white svg {
-  fill: #333333;
+  fill: var(--stcBlack);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover {
-  color: #FFFFFF;
-  background-color: #10E272;
-  -webkit-box-shadow: inset 0 0 0 1px #10E272;
-          box-shadow: inset 0 0 0 1px #10E272;
+  color: var(--stcBlack);
+  background-color: var(--buttonHoverGreen);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
+          box-shadow: inset 0 0 0 1px var(--buttonHoverGreen);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):hover svg {
-  fill: #FFFFFF;
+  fill: var(--stcBlack);
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_white:not(.mfui-button_loading):active {
-  background-color: #404D46;
-  -webkit-box-shadow: inset 0 0 0 1px #404D46;
-          box-shadow: inset 0 0 0 1px #404D46;
+  background-color: var(--buttonDown);
+  -webkit-box-shadow: inset 0 0 0 1px var(--buttonDown);
+          box-shadow: inset 0 0 0 1px var(--buttonDown);
 }
 .mfui-button_type_outline.mfui-button_theme_green {
-  color: #00B956;
+  color: var(--brandGreen);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #00B956;
-          box-shadow: inset 0 0 0 1px #00B956;
+  -webkit-box-shadow: inset 0 0 0 1px var(--brandGreen);
+          box-shadow: inset 0 0 0 1px var(--brandGreen);
 }
 .mfui-button_type_outline.mfui-button_theme_green svg {
-  fill: #00B956;
+  fill: var(--brandGreen);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green {
+  --brandGreen7: rgba(0, 185, 86, 0.07);
+  --brandGreen14: rgba(0, 185, 86, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):hover {
-  background-color: rgba(0, 185, 86, 0.07);
+  background-color: var(--brandGreen7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_green:not(.mfui-button_loading):active {
-  background-color: rgba(0, 185, 86, 0.14);
+  background-color: var(--brandGreen14);
 }
 .mfui-button_type_outline.mfui-button_theme_purple {
-  color: #731982;
+  color: var(--brandPurple);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #731982;
-          box-shadow: inset 0 0 0 1px #731982;
+  -webkit-box-shadow: inset 0 0 0 1px var(--brandPurple);
+          box-shadow: inset 0 0 0 1px var(--brandPurple);
 }
 .mfui-button_type_outline.mfui-button_theme_purple svg {
-  fill: #731982;
+  fill: var(--brandPurple);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple {
+  --brandPurple7: rgba(115, 25, 130, 0.07);
+  --brandPurple14: rgba(115, 25, 130, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):hover {
-  background-color: rgba(115, 25, 130, 0.07);
+  background-color: var(--brandPurple7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_purple:not(.mfui-button_loading):active {
-  background-color: rgba(115, 25, 130, 0.14);
+  background-color: var(--brandPurple14);
 }
 .mfui-button_type_outline.mfui-button_theme_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #FFFFFF;
-          box-shadow: inset 0 0 0 1px #FFFFFF;
+  -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite);
+          box-shadow: inset 0 0 0 1px var(--stcWhite);
 }
 .mfui-button_type_outline.mfui-button_theme_white svg {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white {
+  --base7: rgba(255, 255, 255, 0.07);
+  --base14: rgba(255, 255, 255, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):hover {
-  background-color: rgba(255, 255, 255, 0.07);
+  background-color: var(--base7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):active {
-  background-color: rgba(255, 255, 255, 0.14);
+  background-color: var(--base14);
 }
 .mfui-button_type_outline.mfui-button_theme_black {
-  color: #333333;
+  color: var(--stcBlack);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #333333;
-          box-shadow: inset 0 0 0 1px #333333;
+  -webkit-box-shadow: inset 0 0 0 1px var(--stcBlack);
+          box-shadow: inset 0 0 0 1px var(--stcBlack);
 }
 .mfui-button_type_outline.mfui-button_theme_black svg {
-  fill: #333333;
+  fill: var(--stcBlack);
+}
+.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black {
+  --content7: rgba(51, 51, 51, 0.07);
+  --content14: rgba(51, 51, 51, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):hover {
-  background-color: rgba(51, 51, 51, 0.07);
+  background-color: var(--content7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):active {
-  background-color: rgba(51, 51, 51, 0.14);
+  background-color: var(--content14);
 }
 .mfui-button_full-width {
   display: block;
@@ -332,44 +341,44 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active {
-  color: #33333380;
-  background-color: #EDEDED;
-  -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
-          box-shadow: inset 0 0 0 1px #D8D8D8;
+  color: var(--spbSky3);
+  background-color: var(--spbSky1);
+  -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
+          box-shadow: inset 0 0 0 1px var(--spbSky3);
 }
 .mfui-button.mfui-button_type_primary.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active svg {
-  fill: #33333380;
+  fill: var(--spbSky3);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active {
-  color: #FFFFFF80;
+  color: var(--stcWhite50);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #FFFFFF80;
-          box-shadow: inset 0 0 0 1px #FFFFFF80;
+  -webkit-box-shadow: inset 0 0 0 1px var(--stcWhite50);
+          box-shadow: inset 0 0 0 1px var(--stcWhite50);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active svg {
-  fill: #FFFFFF80;
+  fill: var(--stcWhite50);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active {
-  color: #33333380;
+  color: var(--spbSky3);
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
-          box-shadow: inset 0 0 0 1px #D8D8D8;
+  -webkit-box-shadow: inset 0 0 0 1px var(--spbSky3);
+          box-shadow: inset 0 0 0 1px var(--spbSky3);
 }
 .mfui-button.mfui-button_type_outline.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg {
-  fill: #33333380;
+  fill: var(--spbSky3);
 }

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

@@ -1,5 +1,4 @@
 import React, { Ref } from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Button.less';
 export declare const ButtonTypes: {
     readonly PRIMARY: "primary";
@@ -19,7 +18,7 @@ export declare const ButtonSizes: {
     readonly LARGE: "large";
 };
 declare type ButtonSizesType = typeof ButtonSizes[keyof typeof ButtonSizes];
-export interface IButtonProps extends IFilterDataAttrs {
+export interface IButtonProps {
     /** Дополнительный класс корневого элемента */
     className?: string | string[];
     /** Дополнительные классы для внутренних элементов */
@@ -31,6 +30,13 @@ export interface IButtonProps extends IFilterDataAttrs {
         /** Inner container class */
         inner?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        content?: Record<string, string>;
+        inner?: Record<string, string>;
+        loader?: Record<string, string>;
+    };
     /** Тема компонента */
     theme?: ButtonThemesType;
     /** Тип компонента */

package/dist/es/components/Button/Button.js

@@ -96,7 +96,7 @@ var Button = function Button(_ref) {
       return;
     }
 
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    onClick && onClick(e);
   }, [disabled, onClick]);
   var currentTheme = React.useMemo(function () {
     return type === ButtonTypes.PRIMARY && theme === ButtonThemes.BLACK ? ButtonThemes.GREEN : theme;
@@ -121,9 +121,9 @@ var Button = function Button(_ref) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
       className: cn('content', contentClassName)
-    }, icon && /*#__PURE__*/React.createElement("div", {
+    }), icon && /*#__PURE__*/React.createElement("div", {
       className: cn('icon')
     }, icon), children && /*#__PURE__*/React.createElement("span", {
       className: cn('text')
@@ -145,6 +145,9 @@ var Button = function Button(_ref) {
   }, [icon, children]);
   var renderedLoader = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(Preloader, {
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader)
+      },
       color: loaderColor,
       sizeAll: getLoaderSize(sizeAll),
       sizeWide: sizeWide && getLoaderSize(sizeWide),
@@ -152,7 +155,7 @@ var Button = function Button(_ref) {
       sizeTablet: sizeTablet && getLoaderSize(sizeTablet),
       sizeMobile: sizeMobile && getLoaderSize(sizeMobile)
     });
-  }, [sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile, loaderColor]);
+  }, [sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile]);
 
   var setRelAttribute = function setRelAttribute() {
     if (ElementType !== 'a') {
@@ -174,7 +177,7 @@ var Button = function Button(_ref) {
   React.useEffect(function () {
     setTouch(detectTouch());
   }, []);
-  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       type: type,
       theme: currentTheme,
@@ -197,9 +200,9 @@ var Button = function Button(_ref) {
     onClick: handleClick,
     disabled: !href && disabled,
     ref: buttonRef
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: cn('inner', innerClassName)
-  }, !showLoader ? renderedContent : renderedLoader));
+  }), !showLoader ? renderedContent : renderedLoader));
 };
 
 Button.propTypes = {
@@ -208,6 +211,12 @@ Button.propTypes = {
     content: PropTypes.string,
     inner: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    content: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired),
+    loader: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   theme: PropTypes.oneOf(Object.values(ButtonThemes)),
   type: PropTypes.oneOf(Object.values(ButtonTypes)),
   href: PropTypes.string,
@@ -225,7 +234,6 @@ Button.propTypes = {
   showArrow: PropTypes.bool,
   icon: PropTypes.element,
   disabled: PropTypes.bool,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),

package/dist/es/components/Calendar/Calendar.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-calendar {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;

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

@@ -113,7 +113,7 @@ var Calendar = function Calendar(_ref) {
   useEffect(function () {
     var propsStartDate = calendarStateFromProps.startDate;
     setCalendarState(calendarStateFromProps);
-    propsStartDate && goToDate(propsStartDate); // eslint-disable-next-line react-hooks/exhaustive-deps
+    propsStartDate && goToDate(propsStartDate);
   }, [calendarStateFromProps]);
 
   var getCalendarState = function getCalendarState(date) {
@@ -178,7 +178,7 @@ var Calendar = function Calendar(_ref) {
     var nextStartDate = nextState.startDate,
         nextEndDate = nextState.endDate;
     setCalendarState(nextState);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextStartDate, nextEndDate);
+    onChange && onChange(nextStartDate, nextEndDate);
   };
 
   var handleDateHover = function handleDateHover(date) {
@@ -224,7 +224,6 @@ var Calendar = function Calendar(_ref) {
       var month = _ref2.month,
           year = _ref2.year;
 
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       var _useMonth = useMonth({
         year: year,
         month: month,

package/dist/es/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/es/components/Calendar/components/Day/Day.js

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

package/dist/es/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/es/components/Calendar/components/Month/Month.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate } from '@megafon/ui-helpers';
 import "./Month.css";
 import PropTypes from 'prop-types';
 
@@ -38,12 +38,22 @@ var Month = function Month(_ref) {
       goToNextMonth = _ref.goToNextMonth,
       children = _ref.children;
 
-  var handleArrowLeftClick = function handleArrowLeftClick() {
-    !isPrevMonthDisabled && goToPreviousMonth();
+  var handleArrowLeftClick = function handleArrowLeftClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isPrevMonthDisabled && goToPreviousMonth();
+    }
   };
 
-  var handleArrowRightClick = function handleArrowRightClick() {
-    !isNextMonthDisabled && goToNextMonth();
+  var handleArrowRightClick = function handleArrowRightClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isNextMonthDisabled && goToNextMonth();
+    }
+  };
+
+  var getTabIndex = function getTabIndex(hasFocus) {
+    var tabIndexWithFocus = 0;
+    var tabIndexWithoutFocus = -1;
+    return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -51,16 +61,22 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(ArrowLeft, {
+    role: "button",
+    tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
       disabled: isPrevMonthDisabled
     }),
+    onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('title')
   }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, {
+    role: "button",
+    tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
       disabled: isNextMonthDisabled
     }),
+    onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('weekday-labels')

package/dist/es/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/es/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;
     /** Смена слайдов с зацикливанием */