@megafon/ui-core 2.0.0-beta.96 → 2.0.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import './Select.less';
-import { IDataAttributes } from './../../utils/dataAttrs';
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -13,26 +13,35 @@ export declare const SelectTypes: {
 };
 declare type SelectTypesType = typeof SelectTypes[keyof typeof SelectTypes];
 export declare type SelectItemValueType = number | string | undefined;
-export interface ISelectItem {
+declare type ElementOrString = JSX.Element[] | JSX.Element | Element[] | Element | string;
+declare type ViewCallbackArguments = {
+    filterValue: string;
+};
+export interface ISelectItem<T extends SelectItemValueType> {
+    /** Заголовок элемента в выпадающем списке  */
     title: string;
-    value: SelectItemValueType;
-    view?: JSX.Element[] | Element[] | JSX.Element | string | Element;
+    /** Значение value элемента */
+    value: T;
+    /** Настраиваемое отображение элементов в выпадающем списке  */
+    view?: ElementOrString | ((data: ViewCallbackArguments) => ElementOrString);
+    /** Настраиваемое отображение выбранного элемента в поле селекта  */
+    selectedView?: JSX.Element | Element | React.ReactElement;
 }
-export interface ISelectProps extends IDataAttributes {
+export interface ISelectProps<T extends SelectItemValueType> extends IFilterDataAttrs {
     /** Тип компонента */
     type?: SelectTypesType;
     /** Заголовок поля */
     label?: string;
     /** HTML идентификатор для заголовка поля */
     labelId?: string;
-    /** Текущий выбранный элемент селекта */
-    currentValue?: SelectItemValueType;
+    /** Текущий выбранный элемент селекта (extends SelectItemValueType) */
+    currentValue?: T;
     /** Результат проверки данных */
     verification?: VerificationType;
     /** Дополнительный текст под полем. Свойство verification влияет на цвет текста. */
     noticeText?: string;
     /** Управление возможностью взаимодействия с компонентом */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /** Делает поле обязательным */
     required?: boolean;
     /** Текст внутри поля по умолчанию */
@@ -40,28 +49,35 @@ export interface ISelectProps extends IDataAttributes {
     /** Текст при отсутствии результатов поиска */
     notFoundText?: string;
     /** Массив элементов селекта */
-    items: ISelectItem[];
+    items: Array<ISelectItem<T>>;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         root?: string;
         control?: string;
+        title?: string;
+        titleInner?: string;
         list?: string;
         listItem?: string;
         listItemTitle?: string;
     };
     /** Обработчик выбора элемента селекта */
-    onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, dataItem: ISelectItem) => void;
+    onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
+    /** Обработчик при открытом селекте */
+    onOpened?: () => void;
+    /** Обработчик при закрытом селекте */
+    onClosed?: () => void;
 }
-interface ISelectState {
+interface ISelectState<T extends SelectItemValueType> {
     isOpened: boolean;
     activeIndex: number;
-    filteredItems: ISelectItem[];
+    filteredItems: Array<ISelectItem<T>>;
     comparableInputValue: string;
     inputValue: string;
+    isChoosenItem: boolean;
 }
-declare class Select extends React.Component<ISelectProps, ISelectState> {
+declare class Select<T extends SelectItemValueType> extends React.Component<ISelectProps<T>, ISelectState<T>> {
     static propTypes: {
         type: PropTypes.Requireable<"classic" | "combobox">;
         label: PropTypes.Requireable<string>;
@@ -69,7 +85,7 @@ declare class Select extends React.Component<ISelectProps, ISelectState> {
         currentValue: PropTypes.Requireable<string | number>;
         verification: PropTypes.Requireable<"error" | "valid">;
         noticeText: PropTypes.Requireable<string>;
-        isDisabled: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
         required: PropTypes.Requireable<boolean>;
         placeholder: PropTypes.Requireable<string>;
         notFoundText: PropTypes.Requireable<string>;
@@ -77,31 +93,43 @@ declare class Select extends React.Component<ISelectProps, ISelectState> {
         classes: PropTypes.Requireable<PropTypes.InferProps<{
             root: PropTypes.Requireable<string>;
             control: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<string>;
+            titleInner: PropTypes.Requireable<string>;
             list: PropTypes.Requireable<string>;
             listItem: PropTypes.Requireable<string>;
             listItemTitle: PropTypes.Requireable<string>;
         }>>;
-        items: PropTypes.Requireable<(PropTypes.InferProps<{
-            view: PropTypes.Requireable<string | number | PropTypes.ReactElementLike>;
-            title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            value: PropTypes.Requireable<string | number>;
-        }> | null | undefined)[]>;
+        items: PropTypes.Validator<(Required<PropTypes.InferProps<{
+            view: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
+            selectedView: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
+            title: PropTypes.Validator<string>;
+            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>;
+    };
+    static defaultProps: {
+        disabled: boolean;
+        required: boolean;
+        type: string;
+        notFoundText: string;
     };
-    static defaultProps: Partial<ISelectProps>;
     itemWrapperNode: HTMLDivElement;
     itemsNodeList: HTMLDivElement[];
     selectNode: HTMLDivElement;
     isTouch: boolean;
     debouncedComboboxChange: any;
-    constructor(props: ISelectProps);
+    constructor(props: ISelectProps<T>);
     componentDidMount(): void;
-    componentDidUpdate({ items: prevItems }: ISelectProps): void;
+    componentDidUpdate({ items: prevItems }: ISelectProps<T>): void;
     componentWillUnmount(): void;
-    isEqualItems: (items: ISelectItem[], prevItems: ISelectItem[]) => boolean;
+    isEqualItems: (items: ISelectItem<T>[], prevItems: ISelectItem<T>[]) => boolean;
+    handleOpened: () => void;
+    handleClosed: () => void;
     handleClickOutside: (e: MouseEvent) => void;
     handleOpenDropdown: () => void;
     handleSelectItem: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
@@ -109,11 +137,11 @@ declare class Select extends React.Component<ISelectProps, ISelectState> {
     handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => boolean;
-    scrollList(activeIndex: number): void;
-    highlightString: (title: any, view: any) => any;
-    getItemWrapper: (node: any) => any;
-    getSelectNode: (node: any) => any;
+    highlightString: (title: string, view?: string | Element | JSX.Element | JSX.Element[] | Element[] | ((data: ViewCallbackArguments) => ElementOrString) | undefined) => ElementOrString;
+    getItemWrapper: (node: any) => void;
+    getSelectNode: (node: any) => void;
     getNodeList: (node: any) => number;
+    scrollList(activeIndex: number): void;
     renderTitle(): JSX.Element;
     renderCombobox(): JSX.Element;
     renderChildren(): JSX.Element;

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

@@ -11,6 +11,7 @@ import "core-js/modules/es.reflect.construct";
 import "core-js/modules/es.regexp.constructor";
 import "core-js/modules/es.regexp.exec";
 import "core-js/modules/es.regexp.to-string";
+import "core-js/modules/es.string.replace";
 import "core-js/modules/es.string.split";
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -24,13 +25,11 @@ function _createSuper(Derived) { return function () { var Super = _getPrototypeO
 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 * as PropTypes from 'prop-types';
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
-import "./Select.css";
-import cnCreate from "../../utils/cnCreate";
-import detectTouch from "../../utils/detectTouch";
+import * as PropTypes from 'prop-types';
 import InputLabel from "../InputLabel/InputLabel";
-import filterDataAttrs from "./../../utils/dataAttrs";
+import "./Select.css";
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -39,7 +38,7 @@ export var SelectTypes = {
   CLASSIC: 'classic',
   COMBOBOX: 'combobox'
 };
-var cn = cnCreate('mfui-beta-select');
+var cn = cnCreate('mfui-select');
 
 var Select = /*#__PURE__*/function (_React$Component) {
   _inherits(Select, _React$Component);
@@ -55,11 +54,14 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _this.isTouch = detectTouch();
     _this.debouncedComboboxChange = debounce(function (filterValue) {
       var items = _this.props.items;
+      var query = filterValue.replace(/[^A-Z-a-zА-ЯЁа-яё0-9]/g, function (w) {
+        return "\\".concat(w);
+      });
       var filteredItems = items.filter(function (_ref) {
         var title = _ref.title;
 
         if (filterValue.length <= title.length) {
-          return RegExp(filterValue, 'ig').test(title);
+          return RegExp(query, 'ig').test(title);
         }
 
         return false;
@@ -85,6 +87,16 @@ var Select = /*#__PURE__*/function (_React$Component) {
       });
     };
 
+    _this.handleOpened = function () {
+      var onOpened = _this.props.onOpened;
+      onOpened && onOpened();
+    };
+
+    _this.handleClosed = function () {
+      var onClosed = _this.props.onClosed;
+      onClosed && onClosed();
+    };
+
     _this.handleClickOutside = function (e) {
       var isOpened = _this.state.isOpened;
 
@@ -94,6 +106,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       _this.setState({
         isOpened: false
+      }, function () {
+        if (!_this.state.isOpened) {
+          _this.handleClosed();
+        }
       });
     };
 
@@ -102,6 +118,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
         return {
           isOpened: !state.isOpened
         };
+      }, function () {
+        if (_this.state.isOpened) {
+          _this.handleOpened();
+        } else {
+          _this.handleClosed();
+        }
       });
     };
 
@@ -127,10 +149,13 @@ var Select = /*#__PURE__*/function (_React$Component) {
         isOpened: false,
         inputValue: title,
         comparableInputValue: title,
-        filteredItems: items
+        filteredItems: items,
+        isChoosenItem: true
       });
 
       onSelect && onSelect(e, item);
+
+      _this.handleClosed();
     };
 
     _this.handleHoverItem = function (index) {
@@ -155,16 +180,25 @@ var Select = /*#__PURE__*/function (_React$Component) {
         };
       });
 
+      _this.handleOpened();
+
       if (!isOpened && filteredItems) {
         e.target.select();
       }
     };
 
     _this.handleChangeCombobox = function (e) {
+      var onSelect = _this.props.onSelect;
+      var isChoosenItem = _this.state.isChoosenItem;
       var filterValue = e.target.value;
 
+      if (isChoosenItem) {
+        onSelect && onSelect(null);
+      }
+
       _this.setState({
-        inputValue: filterValue
+        inputValue: filterValue,
+        isChoosenItem: false
       });
 
       _this.debouncedComboboxChange(filterValue);
@@ -175,9 +209,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
           activeIndex = _this$state3.activeIndex,
           isOpened = _this$state3.isOpened,
           filteredItems = _this$state3.filteredItems;
-      var isDisabled = _this.props.isDisabled;
+      var disabled = _this.props.disabled;
 
-      if (filteredItems.length === 0 || isDisabled) {
+      if (filteredItems.length === 0 || disabled) {
         return true;
       }
 
@@ -216,6 +250,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
           isOpened: true
         });
 
+        _this.handleOpened();
+
         return false;
       }
 
@@ -232,13 +268,27 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
     _this.highlightString = function (title, view) {
       var type = _this.props.type;
-      var comparableInputValue = _this.state.comparableInputValue;
+      var _this$state4 = _this.state,
+          comparableInputValue = _this$state4.comparableInputValue,
+          inputValue = _this$state4.inputValue;
 
       if (type === SelectTypes.CLASSIC) {
+        if (typeof view === 'function' && !React.isValidElement(view)) {
+          return view({
+            filterValue: inputValue
+          });
+        }
+
         return view || title;
       }
 
       if (type === SelectTypes.COMBOBOX && view) {
+        if (typeof view === 'function' && !React.isValidElement(view)) {
+          return view({
+            filterValue: inputValue
+          });
+        }
+
         return view;
       }
 
@@ -253,11 +303,11 @@ var Select = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.getItemWrapper = function (node) {
-      return _this.itemWrapperNode = node;
+      _this.itemWrapperNode = node;
     };
 
     _this.getSelectNode = function (node) {
-      return _this.selectNode = node;
+      _this.selectNode = node;
     };
 
     _this.getNodeList = function (node) {
@@ -269,7 +319,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
       activeIndex: 0,
       filteredItems: props.items,
       comparableInputValue: '',
-      inputValue: ''
+      inputValue: '',
+      isChoosenItem: false
     };
     _this.itemsNodeList = [];
     return _this;
@@ -300,6 +351,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var isOpened = this.state.isOpened;
 
       if (!this.isEqualItems(items, prevItems)) {
+        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           filteredItems: items
         });
@@ -350,24 +402,26 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           placeholder = _this$props2.placeholder,
           items = _this$props2.items,
-          currentValue = _this$props2.currentValue;
+          currentValue = _this$props2.currentValue,
+          classes = _this$props2.classes;
       var item = items.find(function (elem) {
         return elem.value === currentValue;
       });
       var inputTitle = placeholder;
 
       if (item && item.title) {
-        inputTitle = item.title;
+        inputTitle = item.selectedView ? item.selectedView : item.title;
       }
 
       return /*#__PURE__*/React.createElement("div", {
         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", {
-        className: cn('title-inner')
+        className: cn('title-inner', [classes === null || classes === void 0 ? void 0 : classes.titleInner])
       }, inputTitle));
     }
   }, {
@@ -395,9 +449,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
           notFoundText = _this$props3.notFoundText,
           _this$props3$classes = _this$props3.classes,
           classes = _this$props3$classes === void 0 ? {} : _this$props3$classes;
-      var _this$state4 = this.state,
-          filteredItems = _this$state4.filteredItems,
-          activeIndex = _this$state4.activeIndex;
+      var _this$state5 = this.state,
+          filteredItems = _this$state5.filteredItems,
+          activeIndex = _this$state5.activeIndex;
       var currentItems = type === SelectTypes.COMBOBOX ? filteredItems : items;
       return /*#__PURE__*/React.createElement("div", {
         className: cn('list', [classes.list])
@@ -428,7 +482,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props4 = this.props,
           type = _this$props4.type,
-          isDisabled = _this$props4.isDisabled,
+          disabled = _this$props4.disabled,
           verification = _this$props4.verification,
           noticeText = _this$props4.noticeText,
           label = _this$props4.label,
@@ -443,7 +497,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
         className: cn({
           open: isOpened,
-          disabled: isDisabled,
+          disabled: disabled,
           'no-touch': !this.isTouch,
           valid: verification === Verification.VALID,
           error: verification === Verification.ERROR
@@ -458,13 +512,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }, "*")), /*#__PURE__*/React.createElement("div", {
         className: cn('control', classes.control),
         onKeyDown: this.handleKeyDown
-      }, type === SelectTypes.COMBOBOX && this.renderCombobox(), type === SelectTypes.CLASSIC && this.renderTitle(), /*#__PURE__*/React.createElement("div", {
-        className: cn('arrow-wrap'),
-        tabIndex: 1,
-        onClick: this.handleOpenDropdown
-      }, /*#__PURE__*/React.createElement("span", {
-        className: cn('arrow')
-      }))), this.renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", {
+      }, type === SelectTypes.COMBOBOX && this.renderCombobox(), type === SelectTypes.CLASSIC && this.renderTitle()), this.renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", {
         className: cn('text', {
           error: verification === Verification.ERROR,
           success: verification === Verification.VALID
@@ -483,7 +531,7 @@ Select.propTypes = {
   currentValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   verification: PropTypes.oneOf(Object.values(Verification)),
   noticeText: PropTypes.string,
-  isDisabled: PropTypes.bool,
+  disabled: PropTypes.bool,
   required: PropTypes.bool,
   placeholder: PropTypes.string,
   notFoundText: PropTypes.string,
@@ -491,23 +539,27 @@ Select.propTypes = {
   classes: PropTypes.shape({
     root: PropTypes.string,
     control: PropTypes.string,
+    title: PropTypes.string,
+    titleInner: PropTypes.string,
     list: PropTypes.string,
     listItem: PropTypes.string,
     listItemTitle: PropTypes.string
   }),
-  items: PropTypes.arrayOf(PropTypes.shape({
-    view: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]),
-    title: PropTypes.node,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })),
+  items: PropTypes.arrayOf(PropTypes.exact({
+    view: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
+    selectedView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
+    title: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  })).isRequired,
   onSelect: PropTypes.func,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  onOpened: PropTypes.func,
+  onClosed: PropTypes.func
 };
 Select.defaultProps = {
-  isDisabled: false,
+  disabled: false,
   required: false,
   type: 'classic',
-  notFoundText: 'Ничего не нашлось',
-  items: []
+  notFoundText: 'Ничего не нашлось'
 };
 export default Select;

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

@@ -5,50 +5,50 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-switcher {
-  cursor: pointer;
+.mfui-switcher {
+  top: 22px;
+  right: 28px;
   width: 48px;
   height: 28px;
-  -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);
   border-radius: 15.5px;
   background-color: #FFFFFF;
-  top: 22px;
-  right: 28px;
+  -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);
+  cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-beta-switcher_no-touch:hover {
+.mfui-switcher_no-touch:hover {
   background-color: #EDEDED;
 }
-.mfui-beta-switcher__pointer {
+.mfui-switcher__pointer {
   position: relative;
+  top: 1px;
+  left: 0;
   width: 24px;
   height: 24px;
+  border: 1px solid #D8D8D8;
   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);
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
-  top: 1px;
-  left: 0;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-beta-switcher_checked {
+.mfui-switcher_checked {
   background-color: #00B956;
 }
-.mfui-beta-switcher_checked .mfui-beta-switcher__pointer {
+.mfui-switcher_checked .mfui-switcher__pointer {
   left: 22px;
 }
-.mfui-beta-switcher_checked.mfui-beta-switcher_no-touch:hover {
+.mfui-switcher_checked.mfui-switcher_no-touch:hover {
   background-color: #10E272;
 }
-.mfui-beta-switcher_disabled {
-  cursor: default;
+.mfui-switcher_disabled {
   background-color: #EDEDED;
+  cursor: default;
 }
-.mfui-beta-switcher_checked.mfui-beta-switcher_disabled,
-.mfui-beta-switcher_checked.mfui-beta-switcher_disabled.mfui-beta-switcher_no-touch:hover {
+.mfui-switcher_checked.mfui-switcher_disabled,
+.mfui-switcher_checked.mfui-switcher_disabled.mfui-switcher_no-touch:hover {
   background-color: #D8D8D8;
 }

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import cnCreate from "../../utils/cnCreate";
+import { cnCreate, detectTouch } from '@megafon/ui-helpers';
 import "./Switcher.css";
-import detectTouch from "../../utils/detectTouch";
-var cn = cnCreate('mfui-beta-switcher');
+var cn = cnCreate('mfui-switcher');
 
 var Switcher = function Switcher(props) {
   var className = props.className,

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface ITabProps {
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
+export interface ITabProps extends IFilterDataAttrs {
     /** Заголовок таба */
     title?: string;
     /** Иконка таба */

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-prop-types */
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
@@ -10,6 +11,7 @@ Tab.propTypes = {
   title: PropTypes.string,
   icon: PropTypes.node,
   href: PropTypes.string,
-  renderTabWrapper: PropTypes.func
+  renderTabWrapper: PropTypes.func,
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
 };
 export default Tab;