@megafon/ui-core 3.0.2 → 3.3.0

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.2.0...@megafon/ui-core@3.3.0) (2022-03-14)
+
+
+### Bug Fixes
+
+* **accordion:** remove outline for safari ([787b572](https://github.com/MegafonWebLab/megafon-ui/commit/787b5725ef962637401a0a3a1a8ae7ba0cece031))
+
+
+### Features
+
+* **badges:** add new component PriceBadge ([9214baa](https://github.com/MegafonWebLab/megafon-ui/commit/9214baab003f958b916b728cf07e6f9db15173dd))
+* **badges:** add new component PromoBadge ([6e550a0](https://github.com/MegafonWebLab/megafon-ui/commit/6e550a06fd2d0fb7b3dba488702f4a34f4f6d101))
+
+
+
+
+
+# [3.2.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.1.0...@megafon/ui-core@3.2.0) (2022-02-28)
+
+
+### Bug Fixes
+
+* **checkbox:** delete outline focus effect ([ecd98e7](https://github.com/MegafonWebLab/megafon-ui/commit/ecd98e7129ddd305ce6e21c1c98cdacc3670ff92))
+* **tile:** delete unnecessary symbol ([1f0ed90](https://github.com/MegafonWebLab/megafon-ui/commit/1f0ed9009ef2cb9e5562f257640a623eceae225e))
+
+
+### Features
+
+* **carousel:** fix data-attribute passing for NavArrow ([af0d26e](https://github.com/MegafonWebLab/megafon-ui/commit/af0d26ef85a19cdb4fd863a45b2c2b2365d9c086))
+* **tile:** add target props for link ([e49d040](https://github.com/MegafonWebLab/megafon-ui/commit/e49d0402725e88b9fd7d80fd418acd81bea321ba))
+
+
+
+
+
+# [3.1.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.2...@megafon/ui-core@3.1.0) (2022-02-22)
+
+
+### Bug Fixes
+
+* **carousel:** add resize listener to nav display ([12abd93](https://github.com/MegafonWebLab/megafon-ui/commit/12abd93d226676d2c4f78968c9d5de032783ec8d))
+* **colors:** fix colors usage ([f2f59a8](https://github.com/MegafonWebLab/megafon-ui/commit/f2f59a81644c157394817af1531dabb1c0b67b19))
+* **components:** better view of default props values ([1817ed5](https://github.com/MegafonWebLab/megafon-ui/commit/1817ed5cd17fd78a0911a89020138f05d7af9833))
+* **contentarea:** add 'black' color prop value; deprecate 'default' color prop value; more examples ([e0b0c72](https://github.com/MegafonWebLab/megafon-ui/commit/e0b0c723a37f0e42ccb1c0d30df8ae36e9c82920))
+
+
+### Features
+
+* **banner:** add opacity for slides ([bb403a1](https://github.com/MegafonWebLab/megafon-ui/commit/bb403a1d38fd0c1efd3e1df3ed72ea4e5c772c40))
+* **collapse:** changed collapse animation via setTimeout to requestAnimationFrame ([06d7b4f](https://github.com/MegafonWebLab/megafon-ui/commit/06d7b4ff0f3cdf3cc22fb1d45e8401e259636cf5))
+* **ui-core:** add dataAttrs prop for interactive elements of components that did not have ([f495833](https://github.com/MegafonWebLab/megafon-ui/commit/f495833b33ac7823ae5992a3f7eb8b7cef82c036))
+
+
+
+
+
 ## [3.0.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.1...@megafon/ui-core@3.0.2) (2022-02-15)
 
 
@@ -76,7 +132,7 @@ remove depreacted value 'freshAsphalt'
 * **contentarea**, **paragraph**, **storebanner** and **breadcrumbs** components from no don't have
 'freshAsphalt' and 'clearWhite' as values for colorizing props
 * **paragraph:** remove from color prop values: 'spbSky0', 'spbSky1', 'spbSky2'
-* **paragraph**: prop color change values from 'base' to 'white' and from 'contend' to 'default';
+* **paragraph**: prop color change values from 'base' to 'white' and from 'content' to 'default';
 remove deprecared values 'freshAsphalt' and 'clearWhite'
 * **storebanner**: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
 * **tooltip:** change onOpen, onClose types; AccessibilityEventTypeNative from @megafon/ui-helpers

package/dist/es/components/Accordion/Accordion.css

@@ -32,6 +32,7 @@
   right: 20px;
   width: 32px;
   height: 32px;
+  outline: none;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   opacity: 1;

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.css

@@ -0,0 +1,70 @@
+.mfui-price-badge {
+  font-size: 12px;
+  line-height: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 4px;
+  padding-right: 8px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: 24px;
+  border-radius: 8px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-price-badge_adaptive {
+    font-size: 15px;
+    line-height: 24px;
+    padding: 4px 8px;
+    height: 32px;
+    border-radius: 12px;
+  }
+}
+.mfui-price-badge_theme_grey {
+  background-color: var(--spbSky0);
+}
+.mfui-price-badge_theme_grey .mfui-price-badge__text {
+  color: var(--spbSky3);
+}
+.mfui-price-badge_theme_grey .mfui-price-badge__icon {
+  fill: var(--spbSky3);
+}
+.mfui-price-badge_theme_orange {
+  background-color: var(--137C20);
+}
+.mfui-price-badge_theme_orange .mfui-price-badge__text {
+  color: var(--137C);
+}
+.mfui-price-badge_theme_orange .mfui-price-badge__icon {
+  fill: var(--137C);
+}
+.mfui-price-badge_theme_green {
+  background-color: var(--brandGreen20);
+}
+.mfui-price-badge_theme_green .mfui-price-badge__text {
+  color: var(--brandGreen);
+}
+.mfui-price-badge_theme_green .mfui-price-badge__icon {
+  fill: var(--brandGreen);
+}
+.mfui-price-badge_theme_red {
+  background-color: var(--fury20);
+}
+.mfui-price-badge_theme_red .mfui-price-badge__text {
+  color: var(--fury);
+}
+.mfui-price-badge_theme_red .mfui-price-badge__icon {
+  fill: var(--fury);
+}
+.mfui-price-badge__text {
+  font-family: inherit;
+  margin-left: 4px;
+}
+.mfui-price-badge__icon {
+  height: 20px;
+  width: 20px;
+}

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import './PriceBadge.less';
+export declare const PriceBadgeTheme: {
+    readonly RED: "red";
+    readonly GREY: "grey";
+    readonly GREEN: "green";
+    readonly ORANGE: "orange";
+};
+export declare const PriceBadgeIcon: {
+    readonly TIMER: "timer";
+    readonly PRICE: "price";
+    readonly CHECK: "check";
+    readonly ATTENTION: "attention";
+};
+declare type PriceBadgeThemeType = typeof PriceBadgeTheme[keyof typeof PriceBadgeTheme];
+declare type PriceBadgeIconType = typeof PriceBadgeIcon[keyof typeof PriceBadgeIcon];
+export interface IPriceBadgeProps {
+    /** Адаптивный режим */
+    isAdaptive?: boolean;
+    /** Тип иконки */
+    iconType?: PriceBadgeIconType;
+    /** Цветовая тема */
+    theme?: PriceBadgeThemeType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+}
+declare const PriceBadge: React.FC<IPriceBadgeProps>;
+export default PriceBadge;

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.js

@@ -0,0 +1,113 @@
+import "core-js/modules/es.object.values";
+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 "./PriceBadge.css";
+
+var AttentionIcon = function AttentionIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
+  }));
+};
+
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.295 9.467l1.77 1.77 3.66-5.22 1.31.918-4.745 6.79-3.126-3.127 1.131-1.13z"
+  }));
+};
+
+var PriceIcon = function PriceIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.75 5.75H11a2.75 2.75 0 010 5.5H9.25V12h3v1.5h-3v1.75h-1.5V13.5h-1V12h1v-.75h-1v-1.5h1v-4zM11 7.25H9.25v2.5H11a1.25 1.25 0 000-2.5z"
+  }));
+};
+
+var TimerIcon = function TimerIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+  }));
+};
+
+export var PriceBadgeTheme = {
+  RED: 'red',
+  GREY: 'grey',
+  GREEN: 'green',
+  ORANGE: 'orange'
+};
+export var PriceBadgeIcon = {
+  TIMER: 'timer',
+  PRICE: 'price',
+  CHECK: 'check',
+  ATTENTION: 'attention'
+};
+
+var getPriceBadgeIcon = function getPriceBadgeIcon(iconType) {
+  switch (iconType) {
+    case PriceBadgeIcon.TIMER:
+      return TimerIcon;
+
+    case PriceBadgeIcon.PRICE:
+      return PriceIcon;
+
+    case PriceBadgeIcon.CHECK:
+      return CheckIcon;
+
+    case PriceBadgeIcon.ATTENTION:
+      return AttentionIcon;
+
+    default:
+      return TimerIcon;
+  }
+};
+
+var cn = cnCreate('mfui-price-badge');
+
+var PriceBadge = function PriceBadge(_ref) {
+  var _ref$iconType = _ref.iconType,
+      iconType = _ref$iconType === void 0 ? 'timer' : _ref$iconType,
+      _ref$isAdaptive = _ref.isAdaptive,
+      isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'grey' : _ref$theme,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  var Icon = getPriceBadgeIcon(iconType);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      adaptive: isAdaptive
+    }, className)
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: cn('icon')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+PriceBadge.propTypes = {
+  isAdaptive: PropTypes.bool,
+  iconType: PropTypes.oneOf(Object.values(PriceBadgeIcon)),
+  theme: PropTypes.oneOf(Object.values(PriceBadgeTheme)),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired).isRequired
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired
+};
+export default PriceBadge;

package/dist/es/components/Badges/components/PromoBadge/PromoBadge.css

@@ -0,0 +1,32 @@
+.mfui-promo-badge {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 4px 12px;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-radius: 8px;
+  color: var(--base);
+}
+.mfui-promo-badge_type_hit {
+  background-color: var(--warmRedC);
+}
+.mfui-promo-badge_type_new {
+  background-color: var(--systemBlue);
+}
+.mfui-promo-badge_type_popular {
+  background-color: var(--137C);
+}
+.mfui-promo-badge_type_user-choice {
+  background-color: var(--reflexBlue);
+}
+.mfui-promo-badge__text {
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+}

package/dist/es/components/Badges/components/PromoBadge/PromoBadge.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './PromoBadge.less';
+export declare const PromoBadgeTypes: {
+    readonly HIT: "hit";
+    readonly NEW: "new";
+    readonly POPULAR: "popular";
+    readonly USER_CHOICE: "user-choice";
+};
+declare type PromoBadgeTypesType = typeof PromoBadgeTypes[keyof typeof PromoBadgeTypes];
+export interface IPromoBadgeProps {
+    /** Тип промо-бэйджа */
+    type?: PromoBadgeTypesType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+}
+declare const PromoBadge: React.FC<IPromoBadgeProps>;
+export default PromoBadge;

package/dist/es/components/Badges/components/PromoBadge/PromoBadge.js

@@ -0,0 +1,38 @@
+import "core-js/modules/es.object.values";
+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 "./PromoBadge.css";
+export var PromoBadgeTypes = {
+  HIT: 'hit',
+  NEW: 'new',
+  POPULAR: 'popular',
+  USER_CHOICE: 'user-choice'
+};
+var cn = cnCreate('mfui-promo-badge');
+
+var PromoBadge = function PromoBadge(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? '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({
+      type: type
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+PromoBadge.propTypes = {
+  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/Banner/Banner.css

@@ -17,6 +17,15 @@
     height: 540px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-banner__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) and (max-width: 1279px) {
   .mfui-banner__slide {
     height: 420px;
@@ -27,6 +36,13 @@
     height: 400px;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-banner .swiper-slide-visible {
+    opacity: 1;
+    -webkit-transition: opacity 0.4s;
+    transition: opacity 0.4s;
+  }
+}
 .mfui-banner__arrow {
   position: absolute;
   top: 50%;

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

@@ -159,6 +159,7 @@ var Banner = function Banner(_ref) {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesVisibility: true,
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
@@ -171,14 +172,20 @@ var Banner = function Banner(_ref) {
       key: i,
       className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
     }), child);
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev), {
+  })), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
+    },
     className: cn('arrow', {
       prev: true
     }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext), {
+  }), /*#__PURE__*/React.createElement(NavArrow, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
+    },
     className: cn('arrow', {
       next: true
     }, [classes.arrow]),
@@ -186,7 +193,7 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
       theme: navTheme,
       'bottom-offset': withPaginationBottomOffset

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

@@ -302,14 +302,14 @@
   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);
+  --stcWhite7: rgba(255, 255, 255, 0.07);
+  --stcWhite14: 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: var(--base7);
+  background-color: var(--stcWhite7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):active {
-  background-color: var(--base14);
+  background-color: var(--stcWhite14);
 }
 .mfui-button_type_outline.mfui-button_theme_black {
   color: var(--stcBlack);
@@ -321,14 +321,14 @@
   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);
+  --stcBlack7: rgba(51, 51, 51, 0.07);
+  --stcBlack14: 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: var(--content7);
+  background-color: var(--stcBlack7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):active {
-  background-color: var(--content14);
+  background-color: var(--stcBlack14);
 }
 .mfui-button_full-width {
   display: block;

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

@@ -1,6 +1,14 @@
 import React from 'react';
 import './Calendar.less';
 export interface ICalendarProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        day?: Record<string, string>;
+        month?: Record<string, string>;
+        arrowLeft?: Record<string, string>;
+        arrowRight?: Record<string, string>;
+    };
     /** Переключение календаря в режим выбора одной даты вместо периода */
     isSingleDate?: boolean;
     /** Классы для модификации компонента */

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

@@ -22,7 +22,7 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React, { useState, useEffect, useMemo } from 'react';
 import { START_DATE, END_DATE, useDatepicker, useMonth } from '@datepicker-react/hooks';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import differenceInDays from 'date-fns/differenceInDays';
 import format from 'date-fns/format';
 import isAfter from 'date-fns/isAfter';
@@ -57,7 +57,8 @@ var monthLabelFormat = function monthLabelFormat(date) {
 var cn = cnCreate('mfui-calendar');
 
 var Calendar = function Calendar(_ref) {
-  var _ref$isSingleDate = _ref.isSingleDate,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$isSingleDate = _ref.isSingleDate,
       isSingleDate = _ref$isSingleDate === void 0 ? false : _ref$isSingleDate,
       _ref$startDate = _ref.startDate,
       startDate = _ref$startDate === void 0 ? null : _ref$startDate,
@@ -202,6 +203,9 @@ var Calendar = function Calendar(_ref) {
         }
 
         return /*#__PURE__*/React.createElement(Day, _extends({
+          dataAttrs: {
+            root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1))
+          },
           date: date,
           key: formatDate(date, 'dd-MM-yyyy'),
           dayLabel: dayLabel
@@ -240,6 +244,11 @@ var Calendar = function Calendar(_ref) {
       var isPrevMonthDisabled = !!minBookingDate && isSameMonth(new Date(year, month, 1), minBookingDate);
       var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
       return /*#__PURE__*/React.createElement(Month, {
+        dataAttrs: {
+          root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.month,
+          arrowLeft: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft,
+          arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
+        },
         key: "".concat(year, "-").concat(month),
         year: year,
         weekdayLabels: weekdayLabels,
@@ -252,12 +261,19 @@ var Calendar = function Calendar(_ref) {
     });
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
-  }, renderMonths());
+  }), renderMonths());
 };
 
 Calendar.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    day: PropTypes.objectOf(PropTypes.string.isRequired),
+    month: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowLeft: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowRight: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   isSingleDate: PropTypes.bool,
   className: PropTypes.string,
   startDate: PropTypes.instanceOf(Date),

package/dist/es/components/Calendar/components/Day/Day.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import './Day.less';
 export interface IDayPickerProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     isDateSelected: (date: Date) => boolean;
     isDateHovered: (date: Date) => boolean;
     isFirstOrLastSelectedDate: (date: Date) => boolean;

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

@@ -18,7 +18,7 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React from 'react';
 import { useDay } from '@datepicker-react/hooks';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import isFirstDayOfMonth from 'date-fns/isFirstDayOfMonth';
 import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
 import isMonday from 'date-fns/isMonday';
@@ -28,12 +28,13 @@ import "./Day.css";
 var cn = cnCreate('mfui-day');
 
 var Day = function Day(_a) {
-  var _a$isBetween = _a.isBetween,
+  var dataAttrs = _a.dataAttrs,
+      _a$isBetween = _a.isBetween,
       isBetween = _a$isBetween === void 0 ? false : _a$isBetween,
       dayLabel = _a.dayLabel,
       date = _a.date,
       onMouseLeave = _a.onMouseLeave,
-      pickerProps = __rest(_a, ["isBetween", "dayLabel", "date", "onMouseLeave"]);
+      pickerProps = __rest(_a, ["dataAttrs", "isBetween", "dayLabel", "date", "onMouseLeave"]);
 
   var dayRef = React.useRef(null);
 
@@ -63,7 +64,7 @@ var Day = function Day(_a) {
     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
   };
 
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onMouseEnter: onMouseEnter,
@@ -72,12 +73,15 @@ var Day = function Day(_a) {
     type: "button",
     ref: dayRef,
     className: cn(modClasses)
-  }, /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: cn('label')
   }, dayLabel));
 };
 
 Day.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   dayLabel: PropTypes.string,
   date: PropTypes.instanceOf(Date).isRequired,
   focusedDate: PropTypes.instanceOf(Date),

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

@@ -8,6 +8,11 @@ export interface IMonthPickerProps {
     goToNextMonths: () => void;
 }
 export interface IMonthProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+        arrowLeft?: Record<string, string>;
+        arrowRight?: Record<string, string>;
+    };
     isPrevMonthDisabled: boolean;
     isNextMonthDisabled: boolean;
     year: number;