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

package/dist/lib/components/Banner/Banner.js

@@ -11,6 +11,8 @@ require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.object.values");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -59,6 +61,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,
@@ -72,7 +76,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 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -110,7 +115,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]);
@@ -120,18 +126,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;
@@ -143,9 +149,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);
   }, []);
@@ -168,16 +174,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", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'nav-theme': navTheme
     }, className)
-  }, /*#__PURE__*/React.createElement(_react2.Swiper, {
+  }), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.swiper), {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
@@ -188,19 +194,19 @@ var Banner = function Banner(_ref) {
     onSlideChange: handleSlideChange,
     onAutoplayStop: handleAutoplayStop,
     onTouchEnd: increaseAutoplayDelay
-  }, React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
+  }), React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
       key: i,
       className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
-    }, child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    }), child);
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev), {
     className: cn('arrow', {
       prev: true
     }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: navArrowTheme
-  }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext), {
     className: cn('arrow', {
       next: true
     }, [classes.arrow]),
@@ -208,12 +214,16 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: navArrowTheme
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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["default"], {
+      dataAttrs: {
+        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dot, i + 1))
+      },
       key: i,
       className: cn('dot'),
       index: i,
@@ -231,6 +241,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/lib/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/lib/components/Banner/BannerDot.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -17,10 +19,13 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var cn = (0, _uiHelpers.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,
@@ -29,13 +34,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", (0, _extends2["default"])({}, (0, _uiHelpers.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", {
@@ -51,6 +56,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/lib/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/lib/components/Button/Button.js

@@ -123,7 +123,7 @@ var Button = function Button(_ref) {
       return;
     }
 
-    onClick && onClick(e);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   }, [disabled, onClick]);
 
   var currentTheme = _react["default"].useMemo(function () {
@@ -152,16 +152,16 @@ var Button = function Button(_ref) {
       return null;
     }
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content), {
       className: cn('content', contentClassName)
-    }, icon && /*#__PURE__*/_react["default"].createElement("div", {
+    }), icon && /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('icon')
     }, icon), children && /*#__PURE__*/_react["default"].createElement("span", {
       className: cn('text')
     }, children), !icon && showArrow && /*#__PURE__*/_react["default"].createElement(Arrow, {
       className: cn('icon-arrow')
     }));
-  }, [contentClassName, showArrow, icon, children]);
+  }, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, contentClassName, showArrow]);
 
   var contentType = _react["default"].useMemo(function () {
     switch (true) {
@@ -178,6 +178,9 @@ var Button = function Button(_ref) {
 
   var renderedLoader = _react["default"].useMemo(function () {
     return /*#__PURE__*/_react["default"].createElement(_Preloader["default"], {
+      dataAttrs: {
+        root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader)
+      },
       color: loaderColor,
       sizeAll: getLoaderSize(sizeAll),
       sizeWide: sizeWide && getLoaderSize(sizeWide),
@@ -185,7 +188,7 @@ var Button = function Button(_ref) {
       sizeTablet: sizeTablet && getLoaderSize(sizeTablet),
       sizeMobile: sizeMobile && getLoaderSize(sizeMobile)
     });
-  }, [sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile]);
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader, loaderColor, sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile]);
 
   var setRelAttribute = function setRelAttribute() {
     if (ElementType !== 'a') {
@@ -209,7 +212,7 @@ var Button = function Button(_ref) {
     setTouch((0, _uiHelpers.detectTouch)());
   }, []);
 
-  return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       type: type,
       theme: currentTheme,
@@ -232,9 +235,9 @@ var Button = function Button(_ref) {
     onClick: handleClick,
     disabled: !href && disabled,
     ref: buttonRef
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: cn('inner', innerClassName)
-  }, !showLoader ? renderedContent : renderedLoader));
+  }), !showLoader ? renderedContent : renderedLoader));
 };
 
 Button.propTypes = {
@@ -243,6 +246,12 @@ Button.propTypes = {
     content: _propTypes["default"].string,
     inner: _propTypes["default"].string
   }),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    content: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    inner: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    loader: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   theme: _propTypes["default"].oneOf(Object.values(ButtonThemes)),
   type: _propTypes["default"].oneOf(Object.values(ButtonTypes)),
   href: _propTypes["default"].string,
@@ -260,7 +269,6 @@ Button.propTypes = {
   showArrow: _propTypes["default"].bool,
   icon: _propTypes["default"].element,
   disabled: _propTypes["default"].bool,
-  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
   buttonRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),

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

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

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

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

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

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

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

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

package/dist/lib/components/Checkbox/Checkbox.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/lib/components/Checkbox/Checkbox.js

@@ -67,7 +67,7 @@ var Checkbox = function Checkbox(_ref) {
   var handleChange = function handleChange(e) {
     if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e) || e.type === CHANGE_KEY) {
       setIsChecked(!isChecked);
-      onChange && onChange(!isChecked);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isChecked);
     }
   };
 
@@ -79,13 +79,13 @@ var Checkbox = function Checkbox(_ref) {
       disabled: disabled,
       error: error
     }, className)
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
   }, /*#__PURE__*/_react["default"].createElement("label", {
     className: cn('label', {
       'no-touch': !isTouch
     })
-  }, /*#__PURE__*/_react["default"].createElement("input", {
+  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input'),
     type: "checkbox",
     tabIndex: -1,
@@ -94,17 +94,17 @@ var Checkbox = function Checkbox(_ref) {
     checked: isChecked,
     onChange: handleChange,
     disabled: disabled
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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["default"].createElement(CheckedIcon, {
+  }), /*#__PURE__*/_react["default"].createElement(CheckedIcon, {
     className: cn('icon')
-  })), children), extraContent && /*#__PURE__*/_react["default"].createElement("span", {
+  })), children), extraContent && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraContent), {
     className: cn('extra-content')
-  }, extraContent)));
+  }), extraContent)));
 };
 
 Checkbox.propTypes = {
@@ -116,9 +116,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
 };
 var _default = Checkbox;

package/dist/lib/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>;
     };
 };