@megafon/ui-core 2.4.0 → 3.0.0-beta.10

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

@@ -0,0 +1,34 @@
+import { ISelectItem, SelectItemValueType } from '../Select';
+export declare const initialState: {
+    isOpened: boolean;
+    hoveredItemIndex: number;
+    itemsList: never[];
+    comparableInputValue: string;
+    inputValue: string;
+};
+export declare enum SelectActions {
+    TOGGLE_DROPDOWN = "TOGGLE_DROPDOWN",
+    UPDATE_ITEMS_LIST = "UPDATE_ITEMS_LIST",
+    UPDATE_VALUE_FROM_PROPS = "UPDATE_VALUE_FROM_PROPS",
+    UPDATE_SELECT_VALUE = "UPDATE_SELECT_VALUE",
+    SET_HOVERED_ITEM_INDEX = "SET_HOVERED_ITEM_INDEX",
+    COMBOBOX_VALUE_DEBOUNCE = "COMBOBOX_VALUE_DEBOUNCE",
+    COMBOBOX_INPUT_CHANGE = "COMBOBOX_INPUT_CHANGE"
+}
+export interface ISelectState<T extends SelectItemValueType> {
+    isOpened: boolean;
+    hoveredItemIndex: number;
+    itemsList: Array<ISelectItem<T>>;
+    comparableInputValue: string;
+    inputValue: string;
+}
+export interface ISelectAction<T extends SelectItemValueType> {
+    type: SelectActions;
+    items?: Array<ISelectItem<T>>;
+    hoveredItemIndex?: number;
+    inputValue?: string;
+    comparableInputValue?: string;
+    isOpened?: boolean;
+}
+declare const selectReducer: <T extends string | number | undefined>(state: ISelectState<T>, action: ISelectAction<T>) => ISelectState<T>;
+export default selectReducer;

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

@@ -0,0 +1,123 @@
+import "core-js/modules/es.array.every";
+import _extends from "@babel/runtime/helpers/extends";
+
+var isEqualItems = function isEqualItems(newItems, setItems) {
+  if (newItems.length !== setItems.length) {
+    return false;
+  }
+
+  return newItems.every(function (item, i) {
+    var isEqualValue = item.value === setItems[i].value;
+    var isEqualTitle = item.title === setItems[i].title;
+    return isEqualValue && isEqualTitle;
+  });
+};
+
+export var initialState = {
+  isOpened: false,
+  hoveredItemIndex: 0,
+  itemsList: [],
+  comparableInputValue: '',
+  inputValue: ''
+};
+export var SelectActions;
+
+(function (SelectActions) {
+  SelectActions["TOGGLE_DROPDOWN"] = "TOGGLE_DROPDOWN";
+  SelectActions["UPDATE_ITEMS_LIST"] = "UPDATE_ITEMS_LIST";
+  SelectActions["UPDATE_VALUE_FROM_PROPS"] = "UPDATE_VALUE_FROM_PROPS";
+  SelectActions["UPDATE_SELECT_VALUE"] = "UPDATE_SELECT_VALUE";
+  SelectActions["SET_HOVERED_ITEM_INDEX"] = "SET_HOVERED_ITEM_INDEX";
+  SelectActions["COMBOBOX_VALUE_DEBOUNCE"] = "COMBOBOX_VALUE_DEBOUNCE";
+  SelectActions["COMBOBOX_INPUT_CHANGE"] = "COMBOBOX_INPUT_CHANGE";
+})(SelectActions || (SelectActions = {}));
+
+var _SelectActions = SelectActions,
+    TOGGLE_DROPDOWN = _SelectActions.TOGGLE_DROPDOWN,
+    UPDATE_ITEMS_LIST = _SelectActions.UPDATE_ITEMS_LIST,
+    UPDATE_VALUE_FROM_PROPS = _SelectActions.UPDATE_VALUE_FROM_PROPS,
+    UPDATE_SELECT_VALUE = _SelectActions.UPDATE_SELECT_VALUE,
+    SET_HOVERED_ITEM_INDEX = _SelectActions.SET_HOVERED_ITEM_INDEX,
+    COMBOBOX_VALUE_DEBOUNCE = _SelectActions.COMBOBOX_VALUE_DEBOUNCE,
+    COMBOBOX_INPUT_CHANGE = _SelectActions.COMBOBOX_INPUT_CHANGE;
+
+var selectReducer = function selectReducer(state, action) {
+  var type = action.type,
+      _action$items = action.items,
+      items = _action$items === void 0 ? [] : _action$items,
+      _action$hoveredItemIn = action.hoveredItemIndex,
+      hoveredItemIndex = _action$hoveredItemIn === void 0 ? 0 : _action$hoveredItemIn,
+      _action$inputValue = action.inputValue,
+      inputValue = _action$inputValue === void 0 ? '' : _action$inputValue,
+      _action$comparableInp = action.comparableInputValue,
+      comparableInputValue = _action$comparableInp === void 0 ? '' : _action$comparableInp,
+      _action$isOpened = action.isOpened,
+      isOpened = _action$isOpened === void 0 ? false : _action$isOpened;
+  var prevItems = state.itemsList;
+
+  switch (type) {
+    case TOGGLE_DROPDOWN:
+      {
+        return _extends(_extends({}, state), {
+          isOpened: isOpened
+        });
+      }
+
+    case UPDATE_ITEMS_LIST:
+      {
+        var isItemsEqual = isEqualItems(items, prevItems);
+        return isItemsEqual ? state : _extends(_extends({}, state), {
+          itemsList: items
+        });
+      }
+
+    case UPDATE_VALUE_FROM_PROPS:
+      {
+        return _extends(_extends({}, state), {
+          hoveredItemIndex: hoveredItemIndex,
+          inputValue: inputValue,
+          comparableInputValue: ''
+        });
+      }
+
+    case COMBOBOX_VALUE_DEBOUNCE:
+      {
+        return _extends(_extends({}, state), {
+          comparableInputValue: comparableInputValue,
+          itemsList: items,
+          isOpened: true,
+          hoveredItemIndex: 0
+        });
+      }
+
+    case UPDATE_SELECT_VALUE:
+      {
+        return _extends(_extends({}, state), {
+          isOpened: false,
+          itemsList: items,
+          hoveredItemIndex: hoveredItemIndex
+        });
+      }
+
+    case SET_HOVERED_ITEM_INDEX:
+      {
+        return _extends(_extends({}, state), {
+          hoveredItemIndex: hoveredItemIndex
+        });
+      }
+
+    case COMBOBOX_INPUT_CHANGE:
+      {
+        return _extends(_extends({}, state), {
+          inputValue: inputValue
+        });
+      }
+
+    default:
+      {
+        return state;
+      }
+  }
+};
+
+export default selectReducer;

package/dist/es/components/Switcher/Switcher.css

@@ -1,54 +1,44 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-switcher {
   top: 22px;
   right: 28px;
-  width: 48px;
-  height: 28px;
+  width: 40px;
+  height: 24px;
   border-radius: 15.5px;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
-          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  background-color: var(--spbSky1);
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .mfui-switcher_no-touch:hover {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-switcher__pointer {
   position: relative;
-  top: 1px;
-  left: 0;
-  width: 24px;
-  height: 24px;
-  border: 1px solid #D8D8D8;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+  background-color: var(--base);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .mfui-switcher_checked {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-switcher_checked .mfui-switcher__pointer {
-  left: 22px;
+  left: 18px;
 }
 .mfui-switcher_checked.mfui-switcher_no-touch:hover {
-  background-color: #10E272;
+  background-color: var(--buttonHoverGreen);
 }
 .mfui-switcher_disabled {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
-.mfui-switcher_checked.mfui-switcher_disabled,
-.mfui-switcher_checked.mfui-switcher_disabled.mfui-switcher_no-touch:hover {
-  background-color: #D8D8D8;
+.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch.mfui-switcher:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-switcher_disabled .mfui-switcher__pointer {
+  background-color: var(--spbSky2);
 }

package/dist/es/components/Switcher/Switcher.js

@@ -17,7 +17,7 @@ var Switcher = function Switcher(props) {
       return;
     }
 
-    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    onChange && onChange(e);
   };
 
   return /*#__PURE__*/React.createElement("div", {

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.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-tabs__swiper {
   font-family: inherit;
   font-size: 15px;
@@ -28,13 +21,13 @@ h5 {
 }
 .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, left top, right top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to right, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, right top, left top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to left, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper_beginning:before {
   display: none;
@@ -80,19 +73,19 @@ h5 {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   height: 32px;
-  color: #333333;
+  color: var(--content);
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--brandGreen);
+  fill: var(--brandGreen);
 }
 .mfui-tabs__tab-inner_current {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--brandGreen);
+  fill: var(--brandGreen);
 }
 .mfui-tabs__tab-icon {
   width: 32px;
@@ -116,7 +109,7 @@ h5 {
   bottom: 0;
   left: 0;
   height: 2px;
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
@@ -128,11 +121,11 @@ h5 {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: #333333;
+  background-color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
-  fill: #FFFFFF;
+  fill: var(--base);
 }
 @media screen and (max-width: 1023px) {
   .mfui-tabs__arrow {
@@ -206,7 +199,7 @@ h5 {
           justify-content: center;
 }
 .mfui-tabs_h-align_center .mfui-tabs__tab {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--stcWhite);
 }
 .mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper {
   position: relative;
@@ -218,7 +211,7 @@ h5 {
   left: 0;
   width: 100%;
   height: 1px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-tabs_indents .mfui-tabs__swiper {
@@ -238,37 +231,37 @@ h5 {
   right: 0;
   left: 0;
   z-index: 100;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#00B956), to(transparent));
-  background: linear-gradient(to right, #00B956, transparent);
+  background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), to(transparent));
+  background: linear-gradient(to right, var(--brandGreen), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#00B956), to(transparent));
-  background: linear-gradient(to left, #00B956, transparent);
+  background: -webkit-gradient(linear, right top, left top, from(var(--brandGreen)), to(transparent));
+  background: linear-gradient(to left, var(--brandGreen), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
-  border-color: rgba(237, 237, 237, 0.5);
+  border-color: var(--stcBlack5);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
-  color: #FFFFFF80;
-  fill: #FFFFFF80;
+  color: var(--stcWhite50);
+  fill: var(--stcWhite50);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
-  background-color: #FFFFFF;
-  fill: #00B956;
+  background-color: var(--stcWhite);
+  fill: var(--brandGreen);
 }

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);
@@ -164,11 +165,11 @@ var Tabs = function Tabs(_ref) {
       left: left,
       right: documentWidth - right
     });
-  }, [sticky]);
+  }, [stickyOffset, isSticky]);
   var handleTabInnerClick = React.useCallback(function (index) {
     return function () {
       setUnderlineTransition('all');
-      onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(index);
+      onTabClick && onTabClick(index);
 
       if (outerIndex === undefined) {
         setInnerIndex(index);
@@ -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,9 +226,9 @@ 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, activeTabClass, currentIndex, setTabRef, tabClass]);
+  }, [renderTab, children]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
       var panel = child.props.children;
@@ -227,25 +238,14 @@ 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, renderOnlyCurrentPanel]);
-  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);
-  }, []);
+  }, [children, currentIndex]);
   React.useEffect(function () {
-    var rootRefNode = rootRef.current;
     var observer = new IntersectionObserver(function (entries) {
       entries.forEach(function (_ref2) {
         var isIntersecting = _ref2.isIntersecting,
@@ -254,7 +254,7 @@ var Tabs = function Tabs(_ref) {
             left = _ref2$boundingClientR.left,
             right = _ref2$boundingClientR.right;
 
-        if (!sticky || !rootRefNode || !tabListRef.current) {
+        if (!sticky || !rootRef.current || !tabListRef.current) {
           return;
         }
 
@@ -287,11 +287,11 @@ var Tabs = function Tabs(_ref) {
     }, {
       threshold: [0, 1]
     });
-    rootRefNode && observer.observe(rootRefNode);
+    rootRef.current && observer.observe(rootRef.current);
     return function () {
-      rootRefNode && observer.unobserve(rootRefNode);
+      rootRef.current && observer.unobserve(rootRef.current);
     };
-  }, [calculateSticky, sticky]);
+  }, [calculateSticky]);
   React.useEffect(function () {
     var handleResize = throttle(function () {
       calculateSticky();
@@ -312,7 +312,7 @@ var Tabs = function Tabs(_ref) {
     return function () {
       window.removeEventListener('resize', handleResize);
     };
-  }, [calculateUnderline, calculateSticky, currentIndex]);
+  }, [calculateUnderline, calculateSticky]);
   React.useEffect(function () {
     if (!swiperInstance) {
       return;
@@ -321,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,
@@ -330,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
@@ -341,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,
@@ -353,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: {
@@ -361,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 = {
@@ -384,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)),