@megafon/ui-core 3.0.0-beta.3 → 3.0.0-beta.7

package/CHANGELOG.md

@@ -3,6 +3,69 @@
 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.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.6...@megafon/ui-core@3.0.0-beta.7) (2022-02-04)
+
+
+### Bug Fixes
+
+* **components:** change tests for dataAttrs prop ([2a8f306](https://github.com/MegafonWebLab/megafon-ui/commit/2a8f3061a4e89f6877894e5947db7bae2827f86a))
+
+
+### Features
+
+* **components:** add dataAttrs props in new format ([026d868](https://github.com/MegafonWebLab/megafon-ui/commit/026d8681743d55ea8c93d17000a64959093f7a05))
+
+
+
+
+
+# [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)
+
+
+### 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))
+
+
+### BREAKING CHANGES
+
+* 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';
+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)
 
 

package/dist/es/colors/Colors.js

@@ -128,6 +128,19 @@ var Colors = function Colors() {
       _React$useState2 = _slicedToArray(_React$useState, 2),
       setCurrentTheme = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      setLoad = _React$useState4[1];
+
+  React.useEffect(function () {
+    function load() {
+      setLoad(true);
+      document.removeEventListener('css-var-load', load);
+    }
+
+    document.addEventListener('css-var-load', load);
+  }, []);
+
   var getCurrentColorValue = function getCurrentColorValue(code) {
     return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
   };

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

@@ -1,7 +1,6 @@
 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>;
     /** Заголовок */
@@ -14,11 +13,20 @@ export interface IAccordionProps extends IFilterDataAttrs {
     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

@@ -60,30 +60,30 @@ var Accordion = function Accordion(_ref) {
   };
 
   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
     }),
     isOpened: isOpenedState
-  }, children));
+  }), children));
 };
 
 Accordion.propTypes = {
@@ -100,7 +100,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.d.ts

@@ -16,6 +16,16 @@ 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>;
+    };
     /** Автоматическая прокрутка */
     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';
@@ -45,7 +46,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),
@@ -146,11 +148,11 @@ var Banner = function Banner(_ref) {
   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 +163,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 +183,15 @@ 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
     })
-  }, 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 +209,15 @@ Banner.propTypes = {
   classes: PropTypes.shape({
     slide: PropTypes.string
   }),
+  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;
     /** Тип компонента */

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

@@ -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),
@@ -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/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/es/components/Carousel/Carousel.js

@@ -215,7 +215,7 @@ var Carousel = function Carousel(_ref) {
     e.nativeEvent.preventDefault();
   };
 
-  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({
       'nav-theme': navTheme
@@ -223,7 +223,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleRootClick
   }), /*#__PURE__*/React.createElement(Swiper, _extends({}, containerModifier ? {
     containerModifierClass: containerModifier
-  } : {}, {
+  } : {}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     className: cn('swiper', {
       'default-inner-indents': !innerIndentsClass
     }, [innerIndentsClass, containerClass]),
@@ -253,13 +253,13 @@ var Carousel = function Carousel(_ref) {
     onTouchEnd: increaseAutoplayDelay,
     onResize: handleSwiperResize
   }), React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(SwiperSlide, {
+    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, 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, {
+    }), child);
+  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
     className: cn('arrow', {
       prev: true,
       locked: isLocked
@@ -267,7 +267,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: ArrowTheme.PURPLE
-  }), /*#__PURE__*/React.createElement(NavArrow, {
+  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
     className: cn('arrow', {
       next: true,
       locked: isLocked
@@ -276,7 +276,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: ArrowTheme.PURPLE
-  }));
+  })));
 };
 
 Carousel.propTypes = {
@@ -293,7 +293,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(checkBreakpointsPropTypes({
     slidesPerView: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(Object.values(SlidesPerView))]).isRequired,
     spaceBetween: PropTypes.number.isRequired,

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import './Checkbox.less';
-export interface ICheckboxProps extends IFilterDataAttrs {
+export interface ICheckboxProps {
     /** Цвет чекбокса */
     color?: 'dark' | 'light';
     /** Дополнительный класс корневого элемента */
@@ -11,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 */

package/dist/es/components/Checkbox/Checkbox.js

@@ -60,13 +60,13 @@ var Checkbox = function Checkbox(_ref) {
       disabled: disabled,
       error: error
     }, className)
-  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
   }, /*#__PURE__*/React.createElement("label", {
     className: cn('label', {
       'no-touch': !isTouch
     })
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input'),
     type: "checkbox",
     tabIndex: -1,
@@ -75,17 +75,17 @@ var Checkbox = function Checkbox(_ref) {
     checked: isChecked,
     onChange: handleChange,
     disabled: disabled
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
     tabIndex: 0,
     role: "checkbox",
     "aria-checked": isChecked,
     className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
     onKeyDown: handleChange
-  }, /*#__PURE__*/React.createElement(CheckedIcon, {
+  }), /*#__PURE__*/React.createElement(CheckedIcon, {
     className: cn('icon')
-  })), children), extraContent && /*#__PURE__*/React.createElement("span", {
+  })), children), extraContent && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraContent), {
     className: cn('extra-content')
-  }, extraContent)));
+  }), extraContent)));
 };
 
 Checkbox.propTypes = {
@@ -97,9 +97,14 @@ Checkbox.propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    customInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    extraContent: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired,
   extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onChange: PropTypes.func
 };
 export default Checkbox;

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

@@ -1,23 +1,35 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-declare type DefaultProps = {
+declare type CollapseDefaultProps = {
     animation?: boolean;
     animationDuration?: number;
 };
-declare type Props = DefaultProps & {
+declare type CollapseProps = CollapseDefaultProps & {
     className: string;
     classNameContainer: string;
     isOpened: boolean;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
     children: React.ReactNode;
 };
 declare const Collapse: {
-    (props: Props): React.FunctionComponentElement<Props>;
+    (props: CollapseProps): React.FunctionComponentElement<CollapseProps>;
     propTypes: {
         className: PropTypes.Requireable<string>;
         classNameContainer: PropTypes.Requireable<string>;
         isOpened: PropTypes.Validator<boolean>;
         animationDuration: PropTypes.Requireable<number>;
         animation: PropTypes.Requireable<boolean>;
+        dataAttrs: PropTypes.Requireable<PropTypes.InferProps<{
+            root: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            inner: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+        }>>;
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
 };