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

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './RadioButton.less';
-export interface IRadioButtonProps extends IFilterDataAttrs {
+export interface IRadioButtonProps {
     /** Значение */
     value: string;
     /** Имя для тега form */
@@ -22,35 +20,17 @@ export interface IRadioButtonProps extends IFilterDataAttrs {
         customInput?: string;
         labelText?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        text?: Record<string, string>;
+    };
     children?: React.ReactNode;
     /** Обработчик изменения значения 'value' */
     onChange?: (value: string) => void;
     /** Ссылка на input */
     inputRef?: React.Ref<HTMLInputElement>;
 }
-declare class RadioButton extends React.Component<IRadioButtonProps> {
-    static propTypes: {
-        value: PropTypes.Validator<string>;
-        name: PropTypes.Requireable<string>;
-        textSize: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        isChecked: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        classes: PropTypes.Requireable<PropTypes.InferProps<{
-            root: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            customInput: PropTypes.Requireable<string>;
-            labelText: PropTypes.Requireable<string>;
-        }>>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        inputRef: PropTypes.Requireable<any>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
-    };
-    static defaultProps: Partial<IRadioButtonProps>;
-    handleChange: () => void;
-    render(): JSX.Element;
-}
+declare const RadioButton: React.FC<IRadioButtonProps>;
 export default RadioButton;

package/dist/es/components/RadioButton/RadioButton.js

@@ -1,95 +1,60 @@
 import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.is-array";
-import "core-js/modules/es.date.to-string";
 import "core-js/modules/es.function.name";
-import "core-js/modules/es.object.to-string";
-import "core-js/modules/es.reflect.construct";
-import "core-js/modules/es.regexp.to-string";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./RadioButton.css";
 var cn = cnCreate('mfui-radio-button');
 
-var RadioButton = /*#__PURE__*/function (_React$Component) {
-  _inherits(RadioButton, _React$Component);
-
-  var _super = _createSuper(RadioButton);
-
-  function RadioButton() {
-    var _this;
-
-    _classCallCheck(this, RadioButton);
+var RadioButton = function RadioButton(_ref) {
+  var isChecked = _ref.isChecked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      name = _ref.name,
+      value = _ref.value,
+      _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
+      children = _ref.children,
+      inputRef = _ref.inputRef,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange;
+  var checkedProp = isChecked !== undefined ? {
+    checked: isChecked
+  } : {};
+  var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
 
-    _this = _super.apply(this, arguments);
+  var handleChange = function handleChange() {
+    return onChange && onChange(value);
+  };
 
-    _this.handleChange = function () {
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          value = _this$props.value;
-      onChange && onChange(value);
-    };
-
-    return _this;
-  }
-
-  _createClass(RadioButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          isChecked = _this$props2.isChecked,
-          disabled = _this$props2.disabled,
-          name = _this$props2.name,
-          value = _this$props2.value,
-          textSize = _this$props2.textSize,
-          children = _this$props2.children,
-          inputRef = _this$props2.inputRef,
-          className = _this$props2.className,
-          _this$props2$classes = _this$props2.classes,
-          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes,
-          dataAttrs = _this$props2.dataAttrs;
-      var checkedProp = isChecked !== undefined ? {
-        checked: isChecked
-      } : {};
-      var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
-      return /*#__PURE__*/React.createElement("div", _extends({
-        className: cn(rootClassNames)
-      }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("label", {
-        className: cn('label', {
-          disabled: disabled
-        }, classes.label)
-      }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, {
-        className: cn('input'),
-        type: "radio",
-        name: name,
-        value: value,
-        onChange: this.handleChange,
-        disabled: disabled,
-        ref: inputRef
-      })), /*#__PURE__*/React.createElement("div", {
-        className: cn('custom-input', classes.customInput)
-      }), children && /*#__PURE__*/React.createElement("div", {
-        className: cn('text', {
-          size: textSize
-        }, classes.labelText)
-      }, children)));
-    }
-  }]);
-
-  return RadioButton;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn(rootClassNames)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", {
+    className: cn('label', {
+      disabled: disabled
+    }, classes.label)
+  }, /*#__PURE__*/React.createElement("input", _extends({}, checkedProp, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    className: cn('input'),
+    type: "radio",
+    name: name,
+    value: value,
+    onChange: handleChange,
+    disabled: disabled,
+    ref: inputRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('custom-input', classes.customInput)
+  }), children && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text', {
+      size: textSize
+    }, classes.labelText)
+  }), children)));
+};
 
 RadioButton.propTypes = {
   value: PropTypes.string.isRequired,
@@ -104,15 +69,15 @@ RadioButton.propTypes = {
     customInput: PropTypes.string,
     labelText: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.node,
   onChange: PropTypes.func,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
-  }), PropTypes.any])]),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
-};
-RadioButton.defaultProps = {
-  textSize: 'medium',
-  disabled: false
+  }), PropTypes.any])])
 };
 export default RadioButton;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import './Select.less';
 export declare const Verification: {
@@ -27,7 +26,7 @@ export interface ISelectItem<T extends SelectItemValueType> {
     /** Настраиваемое отображение выбранного элемента в поле селекта  */
     selectedView?: JSX.Element | Element | React.ReactElement;
 }
-export interface ISelectProps<T extends SelectItemValueType> extends IFilterDataAttrs {
+export interface ISelectProps<T extends SelectItemValueType> {
     /** Тип компонента */
     type?: SelectTypesType;
     /** Заголовок поля */
@@ -62,6 +61,17 @@ export interface ISelectProps<T extends SelectItemValueType> extends IFilterData
         listItem?: string;
         listItemTitle?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        title?: Record<string, string>;
+        input?: Record<string, string>;
+        noticeText?: Record<string, string>;
+        listItem?: Record<string, string>;
+        listItemTitle?: Record<string, string>;
+        notFound?: Record<string, string>;
+    };
     /** Обработчик выбора элемента селекта */
     onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
     /** Обработчик при открытом селекте */
@@ -99,6 +109,32 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
             listItem: PropTypes.Requireable<string>;
             listItemTitle: PropTypes.Requireable<string>;
         }>>;
+        dataAttrs: PropTypes.Requireable<PropTypes.InferProps<{
+            root: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            label: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            title: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            input: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            noticeText: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            listItem: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            listItemTitle: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            notFound: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+        }>>;
         items: PropTypes.Validator<(Required<PropTypes.InferProps<{
             view: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
             selectedView: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
@@ -106,9 +142,6 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
             value: PropTypes.Validator<string | number>;
         }>> | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
         onOpened: PropTypes.Requireable<(...args: any[]) => any>;
         onClosed: PropTypes.Requireable<(...args: any[]) => any>;
     };

package/dist/es/components/Select/Select.js

@@ -403,7 +403,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
           placeholder = _this$props2.placeholder,
           items = _this$props2.items,
           currentValue = _this$props2.currentValue,
-          classes = _this$props2.classes;
+          classes = _this$props2.classes,
+          dataAttrs = _this$props2.dataAttrs;
       var item = items.find(function (elem) {
         return elem.value === currentValue;
       });
@@ -413,42 +414,45 @@ var Select = /*#__PURE__*/function (_React$Component) {
         inputTitle = item.selectedView ? item.selectedView : item.title;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
         className: cn('title', {
           placeholder: !!placeholder && !currentValue
         }, [classes === null || classes === void 0 ? void 0 : classes.title]),
         role: "button",
         tabIndex: 0,
         onClick: this.handleOpenDropdown
-      }, /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         className: cn('title-inner', [classes === null || classes === void 0 ? void 0 : classes.titleInner])
       }, inputTitle));
     }
   }, {
     key: "renderCombobox",
     value: function renderCombobox() {
-      var placeholder = this.props.placeholder;
+      var _this$props3 = this.props,
+          placeholder = _this$props3.placeholder,
+          dataAttrs = _this$props3.dataAttrs;
       var inputValue = this.state.inputValue;
-      return /*#__PURE__*/React.createElement("input", {
+      return /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
         className: cn('combobox'),
         onFocus: this.handleComboboxFocus,
         onChange: this.handleChangeCombobox,
         type: "text",
         value: inputValue,
         placeholder: placeholder
-      });
+      }));
     }
   }, {
     key: "renderChildren",
     value: function renderChildren() {
       var _this2 = this;
 
-      var _this$props3 = this.props,
-          type = _this$props3.type,
-          items = _this$props3.items,
-          notFoundText = _this$props3.notFoundText,
-          _this$props3$classes = _this$props3.classes,
-          classes = _this$props3$classes === void 0 ? {} : _this$props3$classes;
+      var _this$props4 = this.props,
+          type = _this$props4.type,
+          items = _this$props4.items,
+          notFoundText = _this$props4.notFoundText,
+          _this$props4$classes = _this$props4.classes,
+          classes = _this$props4$classes === void 0 ? {} : _this$props4$classes,
+          dataAttrs = _this$props4.dataAttrs;
       var _this$state5 = this.state,
           filteredItems = _this$state5.filteredItems,
           activeIndex = _this$state5.activeIndex;
@@ -462,7 +466,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         var title = _ref3.title,
             value = _ref3.value,
             view = _ref3.view;
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem, i + 1), {
           className: cn('list-item', {
             active: activeIndex === i
           }, [classes.listItem]),
@@ -470,31 +474,31 @@ var Select = /*#__PURE__*/function (_React$Component) {
           onClick: _this2.handleSelectItem,
           onMouseEnter: _this2.handleHoverItem(i),
           ref: _this2.getNodeList
-        }, /*#__PURE__*/React.createElement("div", {
+        }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItemTitle, i + 1), {
           className: cn('item-title', [classes.listItemTitle])
-        }, _this2.highlightString(title, view)));
-      }), type === SelectTypes.COMBOBOX && !currentItems.length && /*#__PURE__*/React.createElement("div", {
+        }), _this2.highlightString(title, view)));
+      }), type === SelectTypes.COMBOBOX && !currentItems.length && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notFound), {
         className: cn('not-found')
-      }, notFoundText)));
+      }), notFoundText)));
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-          type = _this$props4.type,
-          disabled = _this$props4.disabled,
-          verification = _this$props4.verification,
-          noticeText = _this$props4.noticeText,
-          label = _this$props4.label,
-          labelId = _this$props4.labelId,
-          required = _this$props4.required,
-          _this$props4$classNam = _this$props4.className,
-          className = _this$props4$classNam === void 0 ? '' : _this$props4$classNam,
-          _this$props4$classes = _this$props4.classes,
-          classes = _this$props4$classes === void 0 ? {} : _this$props4$classes,
-          dataAttrs = _this$props4.dataAttrs;
+      var _this$props5 = this.props,
+          type = _this$props5.type,
+          disabled = _this$props5.disabled,
+          verification = _this$props5.verification,
+          noticeText = _this$props5.noticeText,
+          label = _this$props5.label,
+          labelId = _this$props5.labelId,
+          required = _this$props5.required,
+          _this$props5$classNam = _this$props5.className,
+          className = _this$props5$classNam === void 0 ? '' : _this$props5$classNam,
+          _this$props5$classes = _this$props5.classes,
+          classes = _this$props5$classes === void 0 ? {} : _this$props5$classes,
+          dataAttrs = _this$props5.dataAttrs;
       var isOpened = this.state.isOpened;
-      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
         className: cn({
           open: isOpened,
           disabled: disabled,
@@ -506,18 +510,21 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: cn('inner')
       }, label && /*#__PURE__*/React.createElement(InputLabel, {
+        dataAttrs: {
+          root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label
+        },
         htmlFor: labelId
       }, label, required && /*#__PURE__*/React.createElement("span", {
         className: cn('require-mark')
       }, "*")), /*#__PURE__*/React.createElement("div", {
         className: cn('control', classes.control),
         onKeyDown: this.handleKeyDown
-      }, type === SelectTypes.COMBOBOX && this.renderCombobox(), type === SelectTypes.CLASSIC && this.renderTitle()), this.renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", {
+      }, type === SelectTypes.COMBOBOX && this.renderCombobox(), type === SelectTypes.CLASSIC && this.renderTitle()), this.renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
         className: cn('text', {
           error: verification === Verification.ERROR,
           success: verification === Verification.VALID
         })
-      }, noticeText));
+      }), noticeText));
     }
   }]);
 
@@ -545,6 +552,16 @@ Select.propTypes = {
     listItem: PropTypes.string,
     listItemTitle: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    label: PropTypes.objectOf(PropTypes.string.isRequired),
+    title: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    noticeText: PropTypes.objectOf(PropTypes.string.isRequired),
+    listItem: PropTypes.objectOf(PropTypes.string.isRequired),
+    listItemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
+    notFound: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   items: PropTypes.arrayOf(PropTypes.exact({
     view: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     selectedView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
@@ -552,7 +569,6 @@ Select.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
   })).isRequired,
   onSelect: PropTypes.func,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onOpened: PropTypes.func,
   onClosed: PropTypes.func
 };

package/dist/es/components/Tabs/Tab.d.ts

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-export interface ITabProps extends IFilterDataAttrs {
+export interface ITabProps {
     /** Заголовок таба */
     title?: string;
     /** Иконка таба */
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     /** Дочерние элементы */
     children?: React.ReactNode;
     /** Функция рендера компонента-обертки для заголовка и иконки */

package/dist/es/components/Tabs/Tab.js

@@ -8,10 +8,12 @@ var Tab = function Tab(_ref) {
 };
 
 Tab.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   title: PropTypes.string,
   icon: PropTypes.node,
   href: PropTypes.string,
-  renderTabWrapper: PropTypes.func,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
+  renderTabWrapper: PropTypes.func
 };
 export default Tab;

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

@@ -27,6 +27,14 @@ export interface ITabsProps {
         tab?: string;
         activeTab?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        slider?: Record<string, string>;
+        panel?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+    };
     /** Размер табов */
     size?: TabSizeType;
     /** Горизонтальное выравнивание */

package/dist/es/components/Tabs/Tabs.js

@@ -67,6 +67,7 @@ var Tabs = function Tabs(_ref) {
       _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
       renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
+      dataAttrs = _ref.dataAttrs,
       onTabClick = _ref.onTabClick;
   var tabsRef = React.useRef([]);
   var rootRef = React.useRef(null);
@@ -186,6 +187,16 @@ var Tabs = function Tabs(_ref) {
   var handleNextArrowClick = React.useCallback(function () {
     swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
   }, [swiperInstance]);
+  var handleReachBeginning = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+  }, []);
+  var handleReachEnd = React.useCallback(function (swiper) {
+    setEnd(swiper.isEnd);
+  }, []);
+  var handleFromEdge = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+  }, []);
   var renderTab = React.useCallback(function (index, title, icon, href) {
     var ElementType = href ? 'a' : 'div';
     return /*#__PURE__*/React.createElement(ElementType, {
@@ -207,7 +218,7 @@ var Tabs = function Tabs(_ref) {
           icon = _child$props.icon,
           href = _child$props.href,
           renderTabWrapper = _child$props.renderTabWrapper,
-          dataAttrs = _child$props.dataAttrs;
+          data = _child$props.dataAttrs;
       var tab = renderTab(i, title, icon, href);
       var activeTabClassName = currentIndex === i ? activeTabClass : undefined;
       return /*#__PURE__*/React.createElement(SwiperSlide, {
@@ -215,7 +226,7 @@ var Tabs = function Tabs(_ref) {
       }, /*#__PURE__*/React.createElement("div", _extends({
         className: cn('tab', [tabClass, activeTabClassName]),
         ref: setTabRef
-      }, filterDataAttrs(dataAttrs)), renderTabWrapper ? renderTabWrapper(tab) : tab));
+      }, filterDataAttrs(data === null || data === void 0 ? void 0 : data.root, i + 1)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
   }, [renderTab, children]);
   var renderPanels = React.useCallback(function () {
@@ -227,23 +238,13 @@ var Tabs = function Tabs(_ref) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
         className: cn('panel', {
           current: isCurrentPanel
         })
-      }, panel);
+      }), panel);
     });
   }, [children, currentIndex]);
-  var handleReachBeginning = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-  }, []);
-  var handleReachEnd = React.useCallback(function (swiper) {
-    setEnd(swiper.isEnd);
-  }, []);
-  var handleFromEdge = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-    setEnd(swiper.isEnd);
-  }, []);
   React.useEffect(function () {
     var observer = new IntersectionObserver(function (entries) {
       entries.forEach(function (_ref2) {
@@ -320,7 +321,7 @@ var Tabs = function Tabs(_ref) {
     setBeginning(swiperInstance.isBeginning);
     setEnd(swiperInstance.isEnd);
   }, [swiperInstance]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
       'h-align': hAlign,
@@ -329,7 +330,7 @@ var Tabs = function Tabs(_ref) {
       sticky: isSticky
     }, [className, rootClass]),
     ref: rootRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: tabListRef,
     style: {
       height: tabListHeight
@@ -340,7 +341,7 @@ var Tabs = function Tabs(_ref) {
       paddingLeft: stickyOffset.left,
       paddingRight: stickyOffset.right
     }
-  }, /*#__PURE__*/React.createElement(Swiper, {
+  }, /*#__PURE__*/React.createElement(Swiper, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     simulateTouch: false,
     className: cn('swiper', {
       beginning: isBeginning,
@@ -352,7 +353,7 @@ var Tabs = function Tabs(_ref) {
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge
-  }, renderTabs(), /*#__PURE__*/React.createElement("div", {
+  }), renderTabs(), /*#__PURE__*/React.createElement("div", {
     className: cn('underline'),
     slot: "wrapper-start",
     style: {
@@ -360,19 +361,19 @@ var Tabs = function Tabs(_ref) {
       transform: "translateX(".concat(underlineTranslate, "px)"),
       transitionProperty: underlineTransition
     }
-  }), /*#__PURE__*/React.createElement(ArrowLeft, {
+  }), /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
     className: cn('arrow', {
       prev: true,
       hide: isBeginning
     }),
     onClick: handlePrevArrowClick
-  }), /*#__PURE__*/React.createElement(ArrowRight, {
+  })), /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
     className: cn('arrow', {
       next: true,
       hide: isEnd
     }),
     onClick: handleNextArrowClick
-  })))), renderPanels());
+  }))))), renderPanels());
 };
 
 Tabs.propTypes = {
@@ -383,6 +384,13 @@ Tabs.propTypes = {
     tab: PropTypes.string,
     activeTab: PropTypes.string
   }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    slider: PropTypes.objectOf(PropTypes.string.isRequired),
+    panel: PropTypes.objectOf(PropTypes.string.isRequired),
+    prev: PropTypes.objectOf(PropTypes.string.isRequired),
+    next: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   size: PropTypes.oneOf(Object.values(TabSize)),
   hAlign: PropTypes.oneOf(Object.values(TabHAlign)),
   tabColorTheme: PropTypes.oneOf(Object.values(TabColorTheme)),