@megafon/ui-core 3.0.0-beta.9 → 3.1.0

package/dist/es/components/Counter/Counter.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.number.constructor";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Counter.css";
 
@@ -25,7 +25,8 @@ var IconPlus = function IconPlus(props) {
 var cn = cnCreate('mfui-counter');
 
 var Counter = function Counter(_ref) {
-  var _ref$isControlled = _ref.isControlled,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$isControlled = _ref.isControlled,
       isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? 0 : _ref$value,
@@ -56,15 +57,15 @@ var Counter = function Counter(_ref) {
     }
 
     if (inputValue < min) {
-      onChange && onChange(min);
+      onChange === null || onChange === void 0 ? void 0 : onChange(min);
     }
 
     if (inputValue > max) {
-      onChange && onChange(max);
+      onChange === null || onChange === void 0 ? void 0 : onChange(max);
     }
 
     if (inputValue >= min && inputValue <= max) {
-      onChange && onChange(inputValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
     }
   }, [min, max, onChange, isControlled]);
   var handleMinusClick = React.useCallback(function () {
@@ -96,40 +97,46 @@ var Counter = function Counter(_ref) {
       handleValueChange(max);
     }
   }, [handleValueChange, min, max]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       disabled: disabled
     }, [className, classes.root])
-  }, /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.minus), {
     className: cn('btn', {
       left: true
     }, classes.buttonMinus),
     type: "button",
     disabled: disabled || (isControlled ? value : counter) <= min,
     onClick: handleMinusClick
-  }, /*#__PURE__*/React.createElement(IconMinus, {
+  }), /*#__PURE__*/React.createElement(IconMinus, {
     className: cn('icon')
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('input-box')
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', classes.input),
     value: isControlled ? value : counter,
     onChange: handleInputChange,
     onBlur: handleInputBlur,
     disabled: disabled
-  })), /*#__PURE__*/React.createElement("button", {
+  }))), /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.plus), {
     className: cn('btn', {
       right: true
     }, classes.buttonPlus),
     type: "button",
     disabled: disabled || counter >= max || value >= max,
     onClick: handlePlusClick
-  }, /*#__PURE__*/React.createElement(IconPlus, {
+  }), /*#__PURE__*/React.createElement(IconPlus, {
     className: cn('icon')
   })));
 };
 
 Counter.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    minus: PropTypes.objectOf(PropTypes.string.isRequired),
+    plus: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   isControlled: PropTypes.bool,
   value: PropTypes.number,
   initialValue: PropTypes.number,

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface ILinkProps {
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/Link/Link.js

@@ -1,33 +1,25 @@
-import "core-js/modules/es.symbol";
-import "core-js/modules/es.array.index-of";
 import _extends from "@babel/runtime/helpers/extends";
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-import * as React from 'react';
+import React from 'react';
 import { filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
-
-var Link = function Link(_a) {
-  var dataAttrs = _a.dataAttrs,
-      props = __rest(_a, ["dataAttrs"]);
+import PropTypes from 'prop-types';
 
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
-    React.createElement("a", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), props))
-  );
+var Link = function Link(_ref) {
+  var target = _ref.target,
+      href = _ref.href,
+      rel = _ref.rel,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      download = _ref.download,
+      children = _ref.children,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("a", _extends({
+    className: className,
+    href: href,
+    target: target,
+    rel: rel,
+    download: download,
+    onClick: onClick
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), children);
 };
 
 Link.propTypes = {

package/dist/es/components/Logo/Logo.js

@@ -25,7 +25,7 @@ var greenVerticalImg = function greenVerticalImg(props) {
     fill: "none",
     d: "M-213 356.4h169v128.5h-169z"
   }), /*#__PURE__*/React.createElement("g", {
-    fill: "#00985F"
+    fill: "#00B956"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M-124.9 372.3v32.4c0 1.4-1.2 2.5-2.6 2.5h-3.9c-.2 0-.3.2-.3.3v27.2c1 .1 1.9.1 2.9.1 17.4 0 31.5-14.1 31.5-31.5 0-15.8-12-29.1-27.6-31zm-.6 48.4c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9 2.2 0 3.9 1.8 3.9 3.9 0 2.2-1.8 3.9-3.9 3.9zm9.2 0c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9 2.2 0 3.9 1.8 3.9 3.9 0 2.2-1.7 3.9-3.9 3.9zm9.2 0c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9z"
   }), /*#__PURE__*/React.createElement("path", {
@@ -37,10 +37,14 @@ var cn = cnCreate('mfui-logo');
 
 var Logo = function Logo(_ref) {
   var className = _ref.className,
-      color = _ref.color,
-      view = _ref.view,
-      target = _ref.target,
-      href = _ref.href;
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'green' : _ref$color,
+      _ref$view = _ref.view,
+      view = _ref$view === void 0 ? 'horizontal' : _ref$view,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_blank' : _ref$target,
+      _ref$href = _ref.href,
+      href = _ref$href === void 0 ? '/' : _ref$href;
   var images = {
     'green-horizontal': greenHorizontalImg,
     'green-vertical': greenVerticalImg
@@ -66,10 +70,4 @@ Logo.propTypes = {
   href: PropTypes.string,
   className: PropTypes.string
 };
-Logo.defaultProps = {
-  color: 'green',
-  view: 'horizontal',
-  target: '_blank',
-  href: '/'
-};
 export default Logo;

package/dist/es/components/NavArrow/NavArrow.css

@@ -28,7 +28,7 @@
   background-color: var(--brandPurple);
 }
 .mfui-nav-arrow_theme_purple:hover:not(:disabled) {
-  background-color: var(--buttonhoverPurple);
+  background-color: var(--buttonHoverPurple);
 }
 .mfui-nav-arrow_theme_dark {
   background-color: var(--stcBlack20);

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

@@ -11,6 +11,9 @@ export declare const View: {
 declare type ThemeType = typeof Theme[keyof typeof Theme];
 declare type ViewType = typeof View[keyof typeof View];
 export interface INavArrowProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     className?: string;
     theme?: ThemeType;
     view?: ViewType;

package/dist/es/components/NavArrow/NavArrow.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.object.values";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import "./NavArrow.css";
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 
 var ArrowLeft = function ArrowLeft(props) {
@@ -32,7 +32,8 @@ export var View = {
 var cn = cnCreate('mfui-nav-arrow');
 
 var NavArrow = function NavArrow(_ref) {
-  var className = _ref.className,
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
       _ref$view = _ref.view,
       view = _ref$view === void 0 ? View.PREV : _ref$view,
       _ref$theme = _ref.theme,
@@ -53,17 +54,20 @@ var NavArrow = function NavArrow(_ref) {
         });
     }
   }, [view]);
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     type: "button",
     className: cn({
       theme: theme
     }, className),
     onClick: onClick,
     disabled: disabled
-  }, renderIcon());
+  }), renderIcon());
 };
 
 NavArrow.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   theme: PropTypes.oneOf(Object.values(Theme)),
   view: PropTypes.oneOf(Object.values(View)),

package/dist/es/components/Notification/Notification.css

@@ -126,31 +126,38 @@ h5 {
 }
 .mfui-notification__close {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 8px;
+  right: 8px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: none;
   border-radius: 50%;
-  background: transparent;
-  cursor: pointer;
-}
-.mfui-notification__close:hover {
   background-color: var(--stcBlack5);
-}
-.mfui-notification__close-icon {
-  width: 20px;
-  height: 20px;
-  fill: var(--content);
+  cursor: pointer;
 }
 @media screen and (min-width: 768px) {
-  .mfui-notification__close-icon {
+  .mfui-notification__close {
+    top: 12px;
+    right: 12px;
     width: 32px;
     height: 32px;
   }
 }
+.mfui-notification__close-icon {
+  width: 10px;
+  height: 10px;
+  fill: var(--stcBlack50);
+}
 .mfui-notification_type_error .mfui-notification__icon-container {
   background-color: var(--fury20);
 }
@@ -182,36 +189,38 @@ h5 {
 .mfui-notification_colored .mfui-notification__icon-container {
   background-color: var(--stcWhite);
 }
-.mfui-notification_colored .mfui-notification__close:hover {
-  background-color: var(--stcWhite);
+.mfui-notification_colored.mfui-notification_type_success {
+  background-color: var(--brandGreen20);
 }
 .mfui-notification_colored.mfui-notification_type_success .mfui-notification__title,
-.mfui-notification_colored.mfui-notification_type_error .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_success .mfui-notification__text,
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__link {
+  color: var(--stcBlack);
+}
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__right-arrow {
+  fill: var(--stcBlack);
+}
+.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container {
+  background-color: var(--stcWhite);
+}
+.mfui-notification_colored.mfui-notification_type_error {
+  background-color: var(--fury80);
+}
+.mfui-notification_colored.mfui-notification_type_error .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__link,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__link {
   color: var(--stcWhite);
 }
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__right-arrow,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__right-arrow {
   fill: var(--stcWhite);
 }
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {
   background-color: var(--stcWhite20);
 }
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container svg,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
   fill: var(--stcWhite);
 }
-.mfui-notification_colored.mfui-notification_type_success {
-  background-color: var(--brandGreen);
-}
-.mfui-notification_colored.mfui-notification_type_error {
-  background-color: var(--fury80);
-}
 .mfui-notification_colored.mfui-notification_type_info .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_warning .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,

package/dist/es/components/Notification/Notification.js

@@ -53,9 +53,11 @@ var InfoIcon = function InfoIcon(props) {
 
 var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 40 40"
+    viewBox: "0 0 10 10"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3.75L1.25 0 0 1.25 3.75 5 0 8.75 1.25 10 5 6.25 8.75 10 10 8.75 6.25 5 10 1.25 8.75 0 5 3.75z"
   }));
 };
 

package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -19,7 +19,7 @@ var PaginationButton = function PaginationButton(_ref) {
       dataAttrs = _ref.dataAttrs;
 
   var handleClick = function handleClick() {
-    onClick && onClick(value);
+    onClick === null || onClick === void 0 ? void 0 : onClick(value);
   };
 
   return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {

package/dist/es/components/Pagination/helpers.d.ts

@@ -1,2 +1,2 @@
-declare const getRange: (from: any, to: any, step?: number) => number[];
+declare const getRange: (from: number, to: number, step?: number) => number[];
 export default getRange;

package/dist/es/components/Paragraph/Paragraph.css

@@ -38,12 +38,3 @@
 .mfui-paragraph_color_purple {
   color: var(--brandPurple);
 }
-.mfui-paragraph_color_spbSky0 {
-  color: var(--spbSky0);
-}
-.mfui-paragraph_color_spbSky1 {
-  color: var(--spbSky1);
-}
-.mfui-paragraph_color_spbSky2 {
-  color: var(--spbSky2);
-}

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

@@ -6,9 +6,6 @@ declare const COLORS: {
     readonly WHITE: "white";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
-    readonly SPB_SKY_0: "spbSky0";
-    readonly SPB_SKY_1: "spbSky1";
-    readonly SPB_SKY_2: "spbSky2";
 };
 declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {

package/dist/es/components/Paragraph/Paragraph.js

@@ -9,10 +9,7 @@ var COLORS = {
   DEFAULT: 'default',
   WHITE: 'white',
   GREEN: 'green',
-  PURPLE: 'purple',
-  SPB_SKY_0: 'spbSky0',
-  SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2'
+  PURPLE: 'purple'
 };
 var cn = cnCreate('mfui-paragraph');
 
@@ -21,7 +18,7 @@ var Paragraph = function Paragraph(_ref) {
       size = _ref$size === void 0 ? 'regular' : _ref$size,
       align = _ref.align,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? COLORS.DEFAULT : _ref$color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,

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

@@ -30,7 +30,7 @@ var RadioButton = function RadioButton(_ref) {
   var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
 
   var handleChange = function handleChange() {
-    return onChange && onChange(value);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(value);
   };
 
   return /*#__PURE__*/React.createElement("div", _extends({

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

@@ -13,6 +13,13 @@ export declare type SearchItem = {
     searchView?: ElementOrString;
 };
 export interface ISearchProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        searchField?: Record<string, string>;
+        submit?: Record<string, string>;
+        item?: Record<string, string>;
+    };
     /** Значение */
     value?: string;
     /** Заголовок поля */

package/dist/es/components/Search/Search.js

@@ -7,7 +7,7 @@ import "core-js/modules/es.string.split";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
 import InputLabel from "../InputLabel/InputLabel";
@@ -28,7 +28,8 @@ export var Verification = {
 var cn = cnCreate('mfui-search');
 
 var Search = function Search(_ref) {
-  var _ref$value = _ref.value,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value,
       label = _ref.label,
       placeholder = _ref.placeholder,
@@ -72,7 +73,7 @@ var Search = function Search(_ref) {
     setActiveIndex(-1);
 
     if (changeDelay === 0) {
-      onChange && onChange(inputValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
     } else {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -93,7 +94,7 @@ var Search = function Search(_ref) {
     }
 
     var chosenValue = items[index].value;
-    onSubmit && onSubmit(chosenValue);
+    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
   }, [disabled, items, onSubmit]);
   var handleSelectSubmit = React.useCallback(function () {
     return function () {
@@ -105,7 +106,7 @@ var Search = function Search(_ref) {
   }, []);
   var handleBlur = React.useCallback(function (e) {
     setFocus(false);
-    onBlur && onBlur(e);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
   }, [onBlur]);
   var handleClick = React.useCallback(function () {
     if (activeIndex >= 0) {
@@ -125,6 +126,7 @@ var Search = function Search(_ref) {
       e.preventDefault();
     } else if (e.key === 'Enter' && activeIndex > -1) {
       handleItemSubmit(activeIndex);
+      e.preventDefault();
     } else if (e.key === 'Enter' && activeIndex === -1) {
       handleSearchSubmit();
     }
@@ -159,18 +161,18 @@ var Search = function Search(_ref) {
     }));
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       open: isFocused,
       disabled: disabled
     }, [className])
-  }, label && /*#__PURE__*/React.createElement(InputLabel, null, label, required && /*#__PURE__*/React.createElement("span", {
+  }), label && /*#__PURE__*/React.createElement(InputLabel, null, label, required && /*#__PURE__*/React.createElement("span", {
     className: cn('require-mark')
   }, "*")), /*#__PURE__*/React.createElement("div", {
     className: cn('control', {
       error: verification === Verification.ERROR
     }, [classes === null || classes === void 0 ? void 0 : classes.control])
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
     className: cn('search-field'),
     placeholder: placeholder,
     value: searchQuery,
@@ -182,10 +184,10 @@ var Search = function Search(_ref) {
     disabled: disabled,
     type: "text",
     autoComplete: "off"
-  }), !hideIcon && /*#__PURE__*/React.createElement("div", {
+  })), !hideIcon && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
     className: cn('icon-box'),
     onClick: handleSearchSubmit
-  }, /*#__PURE__*/React.createElement(SearchIcon, {
+  }), /*#__PURE__*/React.createElement(SearchIcon, {
     className: cn('icon', [classes === null || classes === void 0 ? void 0 : classes.icon])
   })), !!items.length && /*#__PURE__*/React.createElement("div", {
     className: cn('list')
@@ -194,14 +196,14 @@ var Search = function Search(_ref) {
   }, items.map(function (_ref2, i) {
     var itemValue = _ref2.value,
         searchView = _ref2.searchView;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
       className: cn('list-item', {
         active: activeIndex === i
       }),
       onMouseDown: handleSelectSubmit(i),
       onMouseEnter: handleHoverItem(i),
       key: i
-    }, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
     }, searchView || highlightString(itemValue)));
   })))), noticeText && /*#__PURE__*/React.createElement("div", {
@@ -213,6 +215,12 @@ var Search = function Search(_ref) {
 };
 
 Search.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    searchField: PropTypes.objectOf(PropTypes.string.isRequired),
+    submit: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   value: PropTypes.string,
   label: PropTypes.string,
   placeholder: PropTypes.string,

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

@@ -89,15 +89,7 @@ var Select = function Select(_ref) {
   var isTouch = detectTouch();
   var currentIndex = itemsList.findIndex(function (elem) {
     return elem.value === currentValue;
-  }); // Used in various handlers instead useEffect with isOpened dependency because on initial component render isOpened is false
-  // so it triggers onClosed callback call
-
-  var handleClosed = function handleClosed() {
-    onClosed === null || onClosed === void 0 ? void 0 : onClosed(); // eslint-disable-next-line @typescript-eslint/no-use-before-define
-
-    document.removeEventListener('click', handleClickOutside);
-  };
-
+  });
   var handleClickOutside = useCallback(function (e) {
     var _a;
 
@@ -105,12 +97,12 @@ var Select = function Select(_ref) {
       return;
     }
 
-    handleClosed();
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     changeSelectState({
       type: TOGGLE_DROPDOWN,
       isOpened: false
     });
-  }, [isOpened]);
+  }, [onClosed, isOpened]);
 
   var scrollList = function scrollList(itemIndex) {
     if (!itemsNodeList.current.length) {
@@ -154,7 +146,7 @@ var Select = function Select(_ref) {
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  }, [isOpened, currentIndex]);
+  }, [isOpened, currentIndex, onOpened, handleClickOutside]);
   useEffect(function () {
     changeSelectState({
       type: UPDATE_ITEMS_LIST,
@@ -199,7 +191,7 @@ var Select = function Select(_ref) {
       type: TOGGLE_DROPDOWN,
       isOpened: !isCurrentlyOpened
     });
-    isCurrentlyOpened && handleClosed();
+    isCurrentlyOpened && (onClosed === null || onClosed === void 0 ? void 0 : onClosed());
   };
 
   var handleSelectItem = function handleSelectItem(e) {
@@ -220,7 +212,7 @@ var Select = function Select(_ref) {
       items: items
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
-    handleClosed();
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
 
   var handleHoverItem = function handleHoverItem(index) {