@megafon/ui-core 3.0.0-beta.6 → 3.0.0

package/CHANGELOG.md

@@ -3,21 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [3.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.5...@megafon/ui-core@3.0.0-beta.6) (2022-02-02)
+# [3.0.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.5.0...@megafon/ui-core@3.0.0) (2022-02-09)
 
 
 ### Bug Fixes
 
-* color props values changes ([b279f2b](https://github.com/MegafonWebLab/megafon-ui/commit/b279f2b5af0edae92fe9825bbfa90a207cb8009a))
-* remove deprecated props values ([add76f3](https://github.com/MegafonWebLab/megafon-ui/commit/add76f38a9ebad8b5b6504dfe6aae862746f0dfc))
-* **colors:** rename green and purple to brandGreen and brandPurple ([2266734](https://github.com/MegafonWebLab/megafon-ui/commit/2266734336be1a0faa5f1736fdf39070442837b3))
-* **core:** fix build ui-core ([458c824](https://github.com/MegafonWebLab/megafon-ui/commit/458c824aab639e4802db261d0416b3cee58ac274))
-* **core:** separated colors.css file ([f0a4d72](https://github.com/MegafonWebLab/megafon-ui/commit/f0a4d728e0b30c5caeae5c8d9607e624fb4ea288))
-* **textlink:** fix color prop type ([6edcea0](https://github.com/MegafonWebLab/megafon-ui/commit/6edcea06ce26d137611aaf022d3ee6f7da295366))
+* **accordion:** add focus on arrow after tab press, add open/close accordion after enter press ([5c49447](https://github.com/MegafonWebLab/megafon-ui/commit/5c494474dc319593283b339c63936fd2b862a33f))
+* **accordion:** change type of onClickAccordion prop ([b74e196](https://github.com/MegafonWebLab/megafon-ui/commit/b74e1963587a140bb25b8e50e64490a1337dda78))
+* **calendar/month:** add focus on month arrows, add enter press handlers ([caad017](https://github.com/MegafonWebLab/megafon-ui/commit/caad0176a9d272b19da11ddfac1830d863d090ae))
+* **checkbox:** add focus on custom checkbox, add enter press handler ([136872c](https://github.com/MegafonWebLab/megafon-ui/commit/136872c84c058502a46d5b6db5088bebd71ebdb8))
+* **checkbox:** add isChecked state, change type of onChange prop ([be62e30](https://github.com/MegafonWebLab/megafon-ui/commit/be62e30f43dcee4c43cab5425c4ddc0c6954f3f7))
+* **colors:** fix colors component ([a45d223](https://github.com/MegafonWebLab/megafon-ui/commit/a45d223e8af199df87c7b0a1fb8278093ecd54b9))
+* **colors:** remove unused classname modifiers ([2536f98](https://github.com/MegafonWebLab/megafon-ui/commit/2536f9878456979e1ea56615ca99eaa19b6ab7a3))
+* **colors:** remove unused method ([50ee358](https://github.com/MegafonWebLab/megafon-ui/commit/50ee358233787dd3f855abea071ea11aa9df9785))
+* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([089dd42](https://github.com/MegafonWebLab/megafon-ui/commit/089dd42cd18db7fc83e690da45d09b88c636a6f7))
+* **colors:** rename green and purple to brandGreen and brandPurple ([e8ec148](https://github.com/MegafonWebLab/megafon-ui/commit/e8ec1488a249748ca6468bfa53eed56e9fcbb5e4))
+* **colors:** update color values on colors page when user switches theme ([8eb66de](https://github.com/MegafonWebLab/megafon-ui/commit/8eb66dec2ef9de5615ad8c921c422b6a9f00893a))
+* **components:** change tests for dataAttrs prop ([eae8ecb](https://github.com/MegafonWebLab/megafon-ui/commit/eae8ecb5104c050ec0e67357ed5edecdfb042838))
+* **core:** fix build ui-core ([fa9522a](https://github.com/MegafonWebLab/megafon-ui/commit/fa9522ac0931edb7ec772ad040557997db080687))
+* **core:** separated colors.css file ([3a0af6b](https://github.com/MegafonWebLab/megafon-ui/commit/3a0af6b31d711016faa92bc7402ce02c6d8710ae))
+* **less:** import base.less file through reference ([20bd43d](https://github.com/MegafonWebLab/megafon-ui/commit/20bd43d60f9cfac102c55ccdf183578702d2eb96))
+* **paragraph:** remove spbSky... values from color prop ([3a74e2b](https://github.com/MegafonWebLab/megafon-ui/commit/3a74e2ba23b41a1982f72cb1a869e0253c903180))
+* **switcher:** fix switcher design ([642d679](https://github.com/MegafonWebLab/megafon-ui/commit/642d679d6c48c4a96093220415a68c9444d8cb53))
+* color props values changes ([9e3dd31](https://github.com/MegafonWebLab/megafon-ui/commit/9e3dd31a8fd57012482c68c1173aae74028aa3a9))
+* remove deprecated props values ([d09c460](https://github.com/MegafonWebLab/megafon-ui/commit/d09c4606ce6e41f7144e18c2216d039d859288e2))
+* **textlink:** fix color prop type ([4e93cce](https://github.com/MegafonWebLab/megafon-ui/commit/4e93ccef6bcbb1a5e670089dfafe308c23fcbe1e))
+* **tooltip:** add check event function from ui-helpers ([18ef333](https://github.com/MegafonWebLab/megafon-ui/commit/18ef333ba78f7804731da2116b124cdc44a8dfcb))
+
+
+### Features
+
+* **accordion:** remove prop hasVerticalPaddings ([c1f0139](https://github.com/MegafonWebLab/megafon-ui/commit/c1f01398154497ed69fb2bb725077e3cc3b5c47e))
+* **colors:** css custom properties and color themes support ([16df5b7](https://github.com/MegafonWebLab/megafon-ui/commit/16df5b7b2644e15bb6c6e49e7347c0f8e4839e58))
+* **components:** add dataAttrs props in new format ([e9cf812](https://github.com/MegafonWebLab/megafon-ui/commit/e9cf8122ac47f83a8e744e0695351d60aa711dbd))
+* **header:** made header as a functional component ([b983934](https://github.com/MegafonWebLab/megafon-ui/commit/b983934ced137ede35f64ce2dfe0c953c1690db0))
+* **radiobutton:** made radiobutton as a functional component ([b225e1d](https://github.com/MegafonWebLab/megafon-ui/commit/b225e1d5e1964fd1e7010a9051586fb627cc90c3))
+* **select:** made select as a functional component ([fc9cfc2](https://github.com/MegafonWebLab/megafon-ui/commit/fc9cfc25505952080bf90095ab183367915d27e6))
+* **styles:** export css version for base.less ([acdea73](https://github.com/MegafonWebLab/megafon-ui/commit/acdea73462713156dee077fde4c223879e356b4d))
 
 
 ### BREAKING CHANGES
 
+* **paragraph:** remove from color prop values: spbSky0, spbSky1, spbSky2
+* **accordion:** remove prop hasVerticalPaddings
 * ContentArea: prop color change values from 'base' to 'white' and from 'content' to 'default';
 remove depreacted value 'freshAsphalt'
 Paragraph: prop color change values from 'base' to 'white' and from 'contend' to 'default';
@@ -25,100 +53,56 @@ remove deprecared values 'freshAsphalt' and 'clearWhite'
 StoreBanner: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
 * ContentArea, Paragraph, StoreBanner and Breadcrumbs components from no don't have
 freshAsphalt and clearWhite as values for colorize props
-
-
-
-
-
-# [3.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.4...@megafon/ui-core@3.0.0-beta.5) (2022-01-28)
-
-
-### Features
-
-* **header:** made header as a functional component ([81701ad](https://github.com/MegafonWebLab/megafon-ui/commit/81701ad87b6e9df2fe630bf4e183383264c0bb01))
-* **radiobutton:** made radiobutton as a functional component ([65406af](https://github.com/MegafonWebLab/megafon-ui/commit/65406afc90fd82f7eb0fdcbbe78569fc98164e78))
-
-
-
-
-
-# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.3...@megafon/ui-core@3.0.0-beta.4) (2022-01-27)
-
-**Note:** Version bump only for package @megafon/ui-core
-
-
-
-
-
-# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.2...@megafon/ui-core@3.0.0-beta.3) (2022-01-24)
-
-
-### Bug Fixes
-
-* **accordion:** add focus on arrow after tab press, add open/close accordion after enter press ([9bfa0ac](https://github.com/MegafonWebLab/megafon-ui/commit/9bfa0ac5348ac25c0e37a4df51e26e2dabde02ba))
-* **accordion:** change type of onClickAccordion prop ([9a150c5](https://github.com/MegafonWebLab/megafon-ui/commit/9a150c5de309547763a714b0eb630dfb386a8107))
-* **calendar/month:** add focus on month arrows, add enter press handlers ([63f1e47](https://github.com/MegafonWebLab/megafon-ui/commit/63f1e4761e57ed6d56464b632dce9fd5e77655e1))
-* **checkbox:** add focus on custom checkbox, add enter press handler ([83d111d](https://github.com/MegafonWebLab/megafon-ui/commit/83d111d0e4b41d3915bdd079bed4a7f9715ce7a5))
-* **checkbox:** add isChecked state, change type of onChange prop ([f535caf](https://github.com/MegafonWebLab/megafon-ui/commit/f535caf39a02ab6793d3c63b654a1f1f3e9b2b93))
-* **tooltip:** add check event function from ui-helpers ([a784ab4](https://github.com/MegafonWebLab/megafon-ui/commit/a784ab4f288124eb941fe8f52e46b2efc9aa2f82))
-
-
-### BREAKING CHANGES
-
 * **checkbox:** change type of onChange prop on (checked: boolean) => void
 * **accordion:** remove parameter 'title' in onClickAccordion prop
 * **tooltip:** change onOpen, onClose types; AccessibilityEventTypeNative from @megafon/ui-helpers
+* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
+prefix (e.g. brandGreen)
+* **colors:** read commit description
 
 
 
 
 
-# [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.1...@megafon/ui-core@3.0.0-beta.2) (2022-01-21)
+# [2.5.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.4.0...@megafon/ui-core@2.5.0) (2022-02-07)
 
-**Note:** Version bump only for package @megafon/ui-core
+
+### Features
+
+* **tabs:** add prop outerObserveContainer for observing sticky mode from outside ([bc20c76](https://github.com/MegafonWebLab/megafon-ui/commit/bc20c76f497d88da19ea03cfc66a0c38a7559698))
 
 
 
 
 
-# [3.0.0-beta.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.0...@megafon/ui-core@3.0.0-beta.1) (2022-01-20)
+# [2.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.3.0...@megafon/ui-core@2.4.0) (2022-01-31)
 
 
 ### Bug Fixes
 
-* **colors:** fix colors component ([3061f7c](https://github.com/MegafonWebLab/megafon-ui/commit/3061f7c7b56d5baa32f109d7ce941bcc7e70c5b9))
-* **colors:** remove unused classname modifiers ([d919cdc](https://github.com/MegafonWebLab/megafon-ui/commit/d919cdcf1fa79d60230fc85811518ded1c0537ad))
-* **colors:** remove unused method ([2970295](https://github.com/MegafonWebLab/megafon-ui/commit/2970295df9053a4f54ed19d3d46deb07994844e0))
-* **colors:** renabe green and purple to brandGreen and brandPurple to avoid postcss-colormin bug ([563d97c](https://github.com/MegafonWebLab/megafon-ui/commit/563d97c42900099415a6872f57b500b87aeed647))
-* **colors:** update color values on colors page when user switches theme ([8552ff6](https://github.com/MegafonWebLab/megafon-ui/commit/8552ff69a66153ef890437ffc4dd2e50c31d6f2e))
-* **less:** import base.less file through reference ([5a13aae](https://github.com/MegafonWebLab/megafon-ui/commit/5a13aaedec3a7fd09f77dcddfe437fda604f60a5))
+* **link:** new prop dataAttrs ([bde2253](https://github.com/MegafonWebLab/megafon-ui/commit/bde22539ff0db11777be9193adceb6de0f984234))
 
 
 ### Features
 
-* **styles:** export css version for base.less ([14aff17](https://github.com/MegafonWebLab/megafon-ui/commit/14aff17f8d3f77ec7beb2e3cb5c8a489ecd77e74))
+* **banner:** add props withPaginationBottomOffset ([c1485a0](https://github.com/MegafonWebLab/megafon-ui/commit/c1485a083d63b886419109b03bb31230c5fed890))
 
 
-### BREAKING CHANGES
 
-* **colors:** green, green20, green80, purple, purple20 and purple80 colors now have 'brand'
-prefix (e.g. brandGreen)
 
 
+# [2.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.2.0...@megafon/ui-core@2.3.0) (2022-01-24)
 
 
+### Bug Fixes
 
-# [3.0.0-beta.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.2.0...@megafon/ui-core@3.0.0-beta.0) (2022-01-19)
+* **search:** prevents default action when a menu item is selected and the enter button is pressed ([054cbcf](https://github.com/MegafonWebLab/megafon-ui/commit/054cbcf3457ff779443a82b5ae6383fda57f9cc7))
 
 
 ### Features
 
-* **colors:** css custom properties and color themes support ([b19a9a5](https://github.com/MegafonWebLab/megafon-ui/commit/b19a9a5112ebc7427d60f6514d606dd9d71ca444))
-
-
-### BREAKING CHANGES
-
-* **colors:** read commit description
+* **accordion:** props hasVerticalPaddings marked as deprecated ([4d6d4cc](https://github.com/MegafonWebLab/megafon-ui/commit/4d6d4cca2cf45a86441827f0bef625a88a2c44f8))
+* **textfield:** add autocomplete prop ([f2cff94](https://github.com/MegafonWebLab/megafon-ui/commit/f2cff9403503de174b785ea02365ce470811369e))
 
 
 

package/dist/es/colors/Colors.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import './Colors.less';
-declare const Colors: () => JSX.Element;
+declare const Colors: React.FC;
 export default Colors;

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

@@ -40,25 +40,11 @@
 .mfui-accordion__content-inner {
   padding: 24px 16px;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
+@media screen and (min-width: 768px) {
   .mfui-accordion__content-inner {
     padding: 24px;
   }
 }
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-accordion__content-inner {
-    padding: 24px 48px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .mfui-accordion__content-inner {
-    padding: 24px 40px;
-  }
-}
-.mfui-accordion__content-inner_v-padding {
-  padding-top: 24px;
-  padding-bottom: 24px;
-}
 .mfui-accordion__icon {
   fill: var(--content);
 }

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

@@ -1,24 +1,30 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Accordion.less';
-export interface IAccordionProps extends IFilterDataAttrs {
+export interface IAccordionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
     /** Состояние открытости */
     isOpened?: boolean;
-    /** Вертикальные отступы */
-    hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
-        openedClass?: string;
         root?: string;
+        openedClass?: string;
         collapse?: string;
         titleWrap?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        header?: Record<string, string>;
+        collapse?: Record<string, string>;
+        titleWrap?: Record<string, string>;
+        arrowUp?: Record<string, string>;
+        arrowDown?: Record<string, string>;
+    };
     /** Обработчик клика */
     onClickAccordion?: (isOpened: boolean) => void;
 }

package/dist/es/components/Accordion/Accordion.js

@@ -30,8 +30,6 @@ var Accordion = function Accordion(_ref) {
       title = _ref.title,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
-      _ref$hasVerticalPaddi = _ref.hasVerticalPaddings,
-      hasVerticalPaddings = _ref$hasVerticalPaddi === void 0 ? false : _ref$hasVerticalPaddi,
       className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
@@ -54,36 +52,34 @@ var Accordion = function Accordion(_ref) {
 
   var handleClickTitle = function handleClickTitle(e) {
     if (checkEventIsClickOrEnterPress(e)) {
-      onClickAccordion && onClickAccordion(!isOpenedState);
+      onClickAccordion === null || onClickAccordion === void 0 ? void 0 : onClickAccordion(!isOpenedState);
       setIsOpenedState(!isOpenedState);
     }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       open: isOpenedState
     }, [className, rootPropsClasses, openedClassName])
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleWrap), {
     className: cn('title-wrap', [titleWrapPropsClasses]),
     onClick: handleClickTitle,
     onKeyDown: handleClickTitle
-  }, /*#__PURE__*/React.createElement(Header, {
+  }), /*#__PURE__*/React.createElement(Header, _extends({
     as: "h5"
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
     tabIndex: 0,
     role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })
-  }, isOpenedState ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null))), /*#__PURE__*/React.createElement(Collapse, {
+  }, isOpenedState ? /*#__PURE__*/React.createElement(ArrowUp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowUp)) : /*#__PURE__*/React.createElement(ArrowDown, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowDown)))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
     className: cn('content', collapsePropsClasses),
-    classNameContainer: cn('content-inner', {
-      'v-padding': hasVerticalPaddings
-    }),
+    classNameContainer: cn('content-inner'),
     isOpened: isOpenedState
-  }, children));
+  }), children));
 };
 
 Accordion.propTypes = {
@@ -92,7 +88,6 @@ Accordion.propTypes = {
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
   isOpened: PropTypes.bool,
-  hasVerticalPaddings: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,
@@ -100,7 +95,14 @@ Accordion.propTypes = {
     collapse: PropTypes.string,
     titleWrap: PropTypes.string
   }),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.objectOf(PropTypes.string.isRequired),
+    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClickAccordion: PropTypes.func
 };
 export default Accordion;

package/dist/es/components/Banner/Banner.css

@@ -34,6 +34,11 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+@media screen and (max-width: 767px) {
+  .mfui-banner__arrow {
+    display: none;
+  }
+}
 .mfui-banner__arrow_prev {
   left: 12px;
 }
@@ -98,6 +103,29 @@
 .mfui-banner__pagination_theme_dark {
   background-color: var(--stcBlack20);
 }
+.mfui-banner__pagination_bottom-offset {
+  bottom: 60px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 89px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 90px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 65px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 72px;
+  }
+}
 .mfui-banner__dot {
   width: 12px;
   height: 12px;

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

@@ -16,6 +16,18 @@ export interface IBannerProps {
         slide?: string;
         arrow?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        swiper?: Record<string, string>;
+        slide?: Record<string, string>;
+        arrowPrev?: Record<string, string>;
+        arrowNext?: Record<string, string>;
+        pagination?: Record<string, string>;
+        dot?: Record<string, string>;
+    };
+    /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
+    withPaginationBottomOffset?: boolean;
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
     /** Задержка автоматической прокрутки */

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

@@ -1,9 +1,10 @@
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import SwiperCore, { Autoplay } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -32,6 +33,8 @@ var Banner = function Banner(_ref) {
   var className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
+      _ref$withPaginationBo = _ref.withPaginationBottomOffset,
+      withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
       _ref$autoPlay = _ref.autoPlay,
       autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
       _ref$autoPlayDelay = _ref.autoPlayDelay,
@@ -45,7 +48,8 @@ var Banner = function Banner(_ref) {
       onNextClick = _ref.onNextClick,
       onPrevClick = _ref.onPrevClick,
       onDotClick = _ref.onDotClick,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      dataAttrs = _ref.dataAttrs;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -83,7 +87,8 @@ var Banner = function Banner(_ref) {
       return;
     }
 
-    autoplay.stop();
+    autoplay.stop(); // eslint-disable-next-line no-param-reassign
+
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
@@ -93,18 +98,18 @@ var Banner = function Banner(_ref) {
     }
 
     swiperInstance.slidePrev();
-    onPrevClick && onPrevClick(swiperInstance.realIndex);
+    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onPrevClick]);
+  }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
     if (!swiperInstance) {
       return;
     }
 
     swiperInstance.slideNext();
-    onNextClick && onNextClick(swiperInstance.realIndex);
+    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, onNextClick]);
+  }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
   var handleDotClick = React.useCallback(function (index) {
     if (!swiperInstance) {
       return;
@@ -116,9 +121,9 @@ var Banner = function Banner(_ref) {
       swiperInstance.slideTo(index);
     }
 
-    onDotClick && onDotClick(swiperInstance.realIndex);
+    onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
-  }, [swiperInstance, loop, onDotClick]);
+  }, [swiperInstance, loop, onDotClick, increaseAutoplayDelay]);
   var handleSwiper = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
   }, []);
@@ -141,16 +146,16 @@ var Banner = function Banner(_ref) {
   var handleSlideChange = React.useCallback(function (_ref4) {
     var realIndex = _ref4.realIndex;
     setActiveIndex(realIndex);
-    onChange && onChange(realIndex);
-  }, []);
+    onChange === null || onChange === void 0 ? void 0 : onChange(realIndex);
+  }, [onChange]);
   var handleAutoplayStop = React.useCallback(function () {
     setAutoPlayning(false);
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme
     }, className)
-  }, /*#__PURE__*/React.createElement(Swiper, {
+  }), /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
@@ -161,19 +166,19 @@ var Banner = function Banner(_ref) {
     onSlideChange: handleSlideChange,
     onAutoplayStop: handleAutoplayStop,
     onTouchEnd: increaseAutoplayDelay
-  }, React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(SwiperSlide, {
+  }), React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
       key: i,
       className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
-    }, child);
-  })), /*#__PURE__*/React.createElement(NavArrow, {
+    }), child);
+  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(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, {
+  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext), {
     className: cn('arrow', {
       next: true
     }, [classes.arrow]),
@@ -181,12 +186,16 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: navArrowTheme
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
-      theme: navTheme
+      theme: navTheme,
+      'bottom-offset': withPaginationBottomOffset
     })
-  }, React.Children.map(children, function (_, i) {
+  }), React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(BannerDot, {
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
+      },
       key: i,
       className: cn('dot'),
       index: i,
@@ -204,6 +213,16 @@ Banner.propTypes = {
   classes: PropTypes.shape({
     slide: PropTypes.string
   }),
+  withPaginationBottomOffset: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    swiper: PropTypes.objectOf(PropTypes.string.isRequired),
+    slide: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowPrev: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowNext: PropTypes.objectOf(PropTypes.string.isRequired),
+    pagination: PropTypes.objectOf(PropTypes.string.isRequired),
+    dot: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),

package/dist/es/components/Banner/BannerDot.d.ts

@@ -6,6 +6,9 @@ export interface IBannerDotProps {
     isActive: boolean;
     showTimer: boolean;
     timerDelay: number;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     onClick: (index: number) => void;
 }
 declare const BannerDot: React.FC<IBannerDotProps>;

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

@@ -1,11 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./BannerDot.css";
 var cn = cnCreate('mfui-banner-dot');
 
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,
+      dataAttrs = _ref.dataAttrs,
       index = _ref.index,
       isActive = _ref.isActive,
       showTimer = _ref.showTimer,
@@ -14,13 +16,13 @@ var BannerDot = function BannerDot(_ref) {
   var handleDotClick = React.useCallback(function () {
     onClick(index);
   }, [onClick, index]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
       timer: showTimer
     }, className),
     onClick: handleDotClick
-  }, showTimer && isActive && /*#__PURE__*/React.createElement("svg", {
+  }), showTimer && isActive && /*#__PURE__*/React.createElement("svg", {
     className: cn('timer'),
     viewBox: "0 0 100 100"
   }, /*#__PURE__*/React.createElement("circle", {
@@ -36,6 +38,9 @@ var BannerDot = function BannerDot(_ref) {
 
 BannerDot.propTypes = {
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   index: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,
   showTimer: PropTypes.bool.isRequired,

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;
     /** Тип компонента */