@megafon/ui-core 4.11.4 → 4.13.0

package/dist/lib/components/Carousel/Carousel.css

@@ -44,6 +44,49 @@
     padding-left: 16px;
   }
 }
+.mfui-carousel__swiper_gradient:before,
+.mfui-carousel__swiper_gradient:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  z-index: 5;
+  width: var(--gap);
+  height: 85%;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-carousel__swiper_gradient:before,
+  .mfui-carousel__swiper_gradient:after {
+    display: none;
+  }
+}
+.mfui-carousel__swiper_gradient:before {
+  left: 0;
+  background: -webkit-gradient(linear, right top, left top, from(transparent), to(var(--gradientColor)));
+  background: linear-gradient(270deg, transparent 0%, var(--gradientColor) 100%);
+}
+.mfui-carousel__swiper_gradient:after {
+  right: 0;
+  background: -webkit-gradient(linear, right top, left top, from(var(--gradientColor)), to(transparent));
+  background: linear-gradient(270deg, var(--gradientColor) 0%, transparent 100%);
+}
+.mfui-carousel__swiper_gradient-color_default {
+  --gradientColor: var(--base);
+}
+.mfui-carousel__swiper_gradient-color_green {
+  --gradientColor: var(--brandGreen);
+}
+.mfui-carousel__swiper_gradient-color_black {
+  --gradientColor: var(--stcBlack);
+}
+.mfui-carousel__swiper_gradient-color_spbSky0 {
+  --gradientColor: var(--spbSky0);
+}
+.mfui-carousel__swiper_gradient-color_spbSky1 {
+  --gradientColor: var(--spbSky1);
+}
+.mfui-carousel__swiper_gradient-color_spbSky2 {
+  --gradientColor: var(--spbSky2);
+}
 .mfui-carousel .swiper-wrapper {
   z-index: 1;
   display: -webkit-box;
@@ -105,6 +148,7 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  gap: 12px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -136,9 +180,10 @@
           box-sizing: border-box;
   width: 8px;
   height: 8px;
-  padding: 1px;
   border-radius: 50%;
   cursor: pointer;
+  -webkit-transition: width 0.5s, background-color 0.3s;
+  transition: width 0.5s, background-color 0.3s;
 }
 .mfui-carousel .swiper-pagination-bullet:before {
   content: '';
@@ -146,9 +191,8 @@
   width: 100%;
   height: 100%;
   border-radius: 50%;
-}
-.mfui-carousel .swiper-pagination-bullet:not(:last-child) {
-  margin-right: 8px;
+  -webkit-transition: border-radius 0.5s;
+  transition: border-radius 0.5s;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
   background-color: var(--stcWhite50);
@@ -157,20 +201,15 @@
   background-color: var(--spbSky2);
 }
 .mfui-carousel .swiper-pagination-bullet-active {
-  padding: 0;
+  width: 20px;
   cursor: default;
 }
-.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active {
-  padding: 0;
-  cursor: default;
+.mfui-carousel .swiper-pagination-bullet-active:before {
+  border-radius: 4px;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
   background-color: var(--base);
 }
-.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active {
-  padding: 0;
-  cursor: default;
-}
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
-  background-color: var(--brandPurple);
+  background-color: var(--brandGreen);
 }

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

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import SwiperCore from 'swiper';
 import { PaginationOptions } from 'swiper/types/components/pagination';
+import { GradientTheme } from './useGradient';
 import './Carousel.less';
 export declare const NavTheme: {
     readonly LIGHT: "light";
@@ -82,6 +83,10 @@ export interface ICarouselProps {
     onPrevClick?: (index: number) => void;
     /** Обработчик смены слайда (должен быть обернут в useCallback) */
     onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
+    /** Наличие градиента по краям контейнера */
+    gradient?: boolean;
+    /** Цвет градиента */
+    gradientColor?: GradientTheme;
 }
 declare const Carousel: React.FC<ICarouselProps>;
 export default Carousel;

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

@@ -23,7 +23,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
@@ -43,6 +43,8 @@ var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
 
 var _checkBreakpointsPropTypes = _interopRequireDefault(require("./checkBreakpointsPropTypes"));
 
+var _useGradient = _interopRequireWildcard(require("./useGradient"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -130,24 +132,28 @@ var Carousel = function Carousel(_ref) {
       onPrevClick = _ref.onPrevClick,
       onChange = _ref.onChange,
       _ref$slideToClickedSl = _ref.slideToClickedSlide,
-      slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl;
+      slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
+      _ref$gradient = _ref.gradient,
+      gradient = _ref$gradient === void 0 ? false : _ref$gradient,
+      _ref$gradientColor = _ref.gradientColor,
+      gradientColor = _ref$gradientColor === void 0 ? _useGradient.GradientTheme.DEFAULT : _ref$gradientColor;
 
-  var _React$useState = React.useState(),
+  var _React$useState = _react["default"].useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       swiperInstance = _React$useState2[0],
       setSwiperInstance = _React$useState2[1];
 
-  var _React$useState3 = React.useState(true),
+  var _React$useState3 = _react["default"].useState(true),
       _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
       isBeginning = _React$useState4[0],
       setBeginning = _React$useState4[1];
 
-  var _React$useState5 = React.useState(false),
+  var _React$useState5 = _react["default"].useState(false),
       _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
       isEnd = _React$useState6[0],
       setEnd = _React$useState6[1];
 
-  var _React$useState7 = React.useState(false),
+  var _React$useState7 = _react["default"].useState(false),
       _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
       isLocked = _React$useState8[0],
       setLocked = _React$useState8[1];
@@ -155,7 +161,13 @@ var Carousel = function Carousel(_ref) {
   var childrenLen = Array.isArray(children) ? children.length : 0;
   var prevChildrenLen = (0, _usePrevious["default"])(childrenLen) || 0;
   var isChildrenLenDiff = childrenLen !== prevChildrenLen;
-  var increaseAutoplayDelay = React.useCallback(function (_ref2) {
+  var gradientStyles = (0, _useGradient["default"])(gradient, {
+    instance: swiperInstance,
+    slidesSettings: slidesSettings,
+    isLocked: isLocked
+  });
+
+  var increaseAutoplayDelay = _react["default"].useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
 
@@ -168,7 +180,8 @@ var Carousel = function Carousel(_ref) {
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
-  var handlePrevClick = React.useCallback(function () {
+
+  var handlePrevClick = _react["default"].useCallback(function () {
     if (!swiperInstance) {
       return;
     }
@@ -177,7 +190,8 @@ var Carousel = function Carousel(_ref) {
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
-  var handleNextClick = React.useCallback(function () {
+
+  var handleNextClick = _react["default"].useCallback(function () {
     if (!swiperInstance) {
       return;
     }
@@ -186,15 +200,18 @@ var Carousel = function Carousel(_ref) {
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
-  var handleSwiper = React.useCallback(function (swiper) {
+
+  var handleSwiper = _react["default"].useCallback(function (swiper) {
     setSwiperInstance(swiper);
     setLocked(swiper.isBeginning && swiper.isEnd);
     getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
   }, [getSwiper]);
-  var handleReachBeginnig = React.useCallback(function () {
+
+  var handleReachBeginnig = _react["default"].useCallback(function () {
     setBeginning(true);
   }, []);
-  var handleReachEnd = React.useCallback(function (_ref3) {
+
+  var handleReachEnd = _react["default"].useCallback(function (_ref3) {
     var params = _ref3.params,
         autoplay = _ref3.autoplay;
     setEnd(true);
@@ -203,11 +220,13 @@ var Carousel = function Carousel(_ref) {
       autoplay.stop();
     }
   }, []);
-  var handleFromEdge = React.useCallback(function (swiper) {
+
+  var handleFromEdge = _react["default"].useCallback(function (swiper) {
     setBeginning(swiper.isBeginning);
     setEnd(swiper.isEnd);
   }, []);
-  var handleSlideChange = React.useCallback(function (_ref4) {
+
+  var handleSlideChange = _react["default"].useCallback(function (_ref4) {
     var realIndex = _ref4.realIndex,
         previousIndex = _ref4.previousIndex,
         params = _ref4.params;
@@ -230,7 +249,7 @@ var Carousel = function Carousel(_ref) {
   }; // https://github.com/nolimits4web/Swiper/issues/2346
 
 
-  var handleSwiperResize = React.useCallback(function () {
+  var handleSwiperResize = _react["default"].useCallback(function () {
     (0, _lodash["default"])(function (swiper) {
       handleNavDisplay(swiper);
 
@@ -263,7 +282,7 @@ var Carousel = function Carousel(_ref) {
     }
   };
 
-  React.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (!swiperInstance) {
       return undefined;
     }
@@ -277,23 +296,28 @@ var Carousel = function Carousel(_ref) {
     return function () {
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
-  }, [swiperInstance]);
-  React.useEffect(function () {
+  }, [slidesSettings, swiperInstance]);
+
+  _react["default"].useEffect(function () {
     if (swiperInstance && isChildrenLenDiff) {
       handleNavDisplay(swiperInstance);
     }
   }, [isChildrenLenDiff, swiperInstance]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       'nav-theme': navTheme
     }, [className, rootClass]),
-    onClick: handleRootClick
-  }), /*#__PURE__*/React.createElement(_react2.Swiper, (0, _extends2["default"])({}, containerModifier ? {
+    onClick: handleRootClick,
+    style: gradientStyles
+  }), /*#__PURE__*/_react["default"].createElement(_react2.Swiper, (0, _extends2["default"])({}, containerModifier ? {
     containerModifierClass: containerModifier
   } : {}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     className: cn('swiper', {
-      'default-inner-indents': !innerIndentsClass
+      'default-inner-indents': !innerIndentsClass,
+      gradient: gradient,
+      'gradient-color': gradient && gradientColor
     }, [innerIndentsClass, containerClass]),
     breakpoints: slidesSettings,
     watchSlidesVisibility: true,
@@ -321,14 +345,14 @@ var Carousel = function Carousel(_ref) {
     onSlideChange: handleSlideChange,
     onTouchEnd: increaseAutoplayDelay,
     onResize: handleSwiperResize
-  }), React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
+  }), _react["default"].Children.map(children, function (child, i) {
+    return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
       key: i,
       className: cn('slide', slideClass),
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
     }), child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+  })), /*#__PURE__*/_react["default"].createElement(_NavArrow["default"], {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
     },
@@ -339,7 +363,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: _NavArrow.Theme.PURPLE
-  }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_NavArrow["default"], {
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
     },
@@ -403,7 +427,9 @@ Carousel.propTypes = {
   getSwiper: PropTypes.func,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  gradient: PropTypes.oneOfType([PropTypes.bool]),
+  gradientColor: PropTypes.oneOf(Object.values(_useGradient.GradientTheme))
 };
 var _default = Carousel;
 exports["default"] = _default;

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

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+import SwiperCore from 'swiper';
+import { SlidesSettingsType } from './Carousel';
+declare type SwiperConfig = {
+    instance: SwiperCore | undefined;
+    slidesSettings: SlidesSettingsType;
+    isLocked: boolean;
+};
+export declare enum GradientTheme {
+    DEFAULT = "default",
+    GREEN = "green",
+    BLACK = "black",
+    SPB_SKY_0 = "spbSky0",
+    SPB_SKY_1 = "spbSky1",
+    SPB_SKY_2 = "spbSky2"
+}
+declare const _default: (gradient: boolean, swiper: SwiperConfig) => CSSProperties;
+export default _default;

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.GradientTheme = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var GradientTheme;
+exports.GradientTheme = GradientTheme;
+
+(function (GradientTheme) {
+  GradientTheme["DEFAULT"] = "default";
+  GradientTheme["GREEN"] = "green";
+  GradientTheme["BLACK"] = "black";
+  GradientTheme["SPB_SKY_0"] = "spbSky0";
+  GradientTheme["SPB_SKY_1"] = "spbSky1";
+  GradientTheme["SPB_SKY_2"] = "spbSky2";
+})(GradientTheme || (exports.GradientTheme = GradientTheme = {}));
+
+var _default = function _default(gradient, swiper) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      slidesGap = _useState2[0],
+      setSlidesGap = _useState2[1];
+
+  var swiperInstance = swiper.instance,
+      slidesSettings = swiper.slidesSettings,
+      isLocked = swiper.isLocked;
+  var isGradientEnable = gradient && !isLocked;
+  (0, _react.useEffect)(function () {
+    var isTouch = window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START;
+    var isPossibleToSetGap = isGradientEnable && swiperInstance && !isTouch;
+
+    if (!isPossibleToSetGap) {
+      return undefined;
+    }
+
+    var setCurrenSlidesGap = function setCurrenSlidesGap() {
+      var currentBreakpoint = swiperInstance.getBreakpoint(slidesSettings);
+      var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
+      setSlidesGap(currentSpaceBetweenValue);
+    };
+
+    setCurrenSlidesGap();
+    var throttledHandler = (0, _lodash["default"])(setCurrenSlidesGap, _throttleTime["default"].resize);
+    window.addEventListener('resize', throttledHandler);
+    return function () {
+      window.removeEventListener('resize', throttledHandler);
+    };
+  }, [gradient, slidesSettings, swiperInstance, isLocked, isGradientEnable]);
+  var gradientStyles = {
+    '--gap': "".concat(slidesGap, "px")
+  };
+  return isGradientEnable ? gradientStyles : {};
+};
+
+exports["default"] = _default;

package/dist/lib/components/NavArrow/NavArrow.css

@@ -9,6 +9,8 @@
   border-radius: 50%;
   outline: none;
   cursor: pointer;
+  -webkit-transition: background-color 0.3s, opacity 0.3s;
+  transition: background-color 0.3s, opacity 0.3s;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -17,6 +19,7 @@
 .mfui-nav-arrow:disabled {
   cursor: default;
   opacity: 0.3;
+  pointer-events: none;
 }
 .mfui-nav-arrow__icon {
   display: block;
@@ -27,12 +30,18 @@
 .mfui-nav-arrow_theme_purple {
   background-color: var(--brandPurple);
 }
-.mfui-nav-arrow_theme_purple:hover:not(:disabled) {
+.mfui-nav-arrow_theme_purple:hover {
   background-color: var(--buttonHoverPurple);
 }
+.mfui-nav-arrow_theme_purple:active {
+  background-color: var(--buttonDown);
+}
 .mfui-nav-arrow_theme_dark {
   background-color: var(--stcBlack20);
 }
-.mfui-nav-arrow_theme_dark:hover:not(:disabled) {
+.mfui-nav-arrow_theme_dark:hover {
   background-color: var(--stcBlack50);
 }
+.mfui-nav-arrow_theme_dark:active {
+  background-color: var(--buttonDown);
+}

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

@@ -22,9 +22,12 @@ export interface ISearchProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        control?: Record<string, string>;
         searchField?: Record<string, string>;
         submit?: Record<string, string>;
         item?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        notice?: Record<string, string>;
     };
     /** Значение */
     value?: string;

package/dist/lib/components/Search/Search.js

@@ -227,12 +227,12 @@ var Search = function Search(_ref) {
       open: isFocused,
       disabled: disabled
     }, [className])
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
     className: cn('control', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     }, [classes === null || classes === void 0 ? void 0 : classes.control])
-  }, /*#__PURE__*/_react["default"].createElement("label", {
+  }), /*#__PURE__*/_react["default"].createElement("label", {
     className: cn('search-wrapper', {
       labeled: !!label,
       'no-label': !label
@@ -280,23 +280,26 @@ var Search = function Search(_ref) {
       onMouseDown: handleSelectSubmit(i),
       onMouseEnter: handleHoverItem(i),
       key: i
-    }), /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1), {
       className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
-    }, searchView || highlightString(itemValue)));
-  })))), noticeText && /*#__PURE__*/_react["default"].createElement("div", {
+    }), searchView || highlightString(itemValue)));
+  })))), noticeText && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
     className: cn('notice', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
     })
-  }, noticeText));
+  }), noticeText));
 };
 
 Search.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
+    control: PropTypes.objectOf(PropTypes.string.isRequired),
     searchField: PropTypes.objectOf(PropTypes.string.isRequired),
     submit: PropTypes.objectOf(PropTypes.string.isRequired),
-    item: PropTypes.objectOf(PropTypes.string.isRequired)
+    item: PropTypes.objectOf(PropTypes.string.isRequired),
+    itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
+    notice: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   value: PropTypes.string,
   label: PropTypes.string,

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

@@ -75,9 +75,13 @@ export interface ISelectProps<T extends SelectItemValueType> {
     dataAttrs?: {
         root?: Record<string, string>;
         label?: Record<string, string>;
+        control?: Record<string, string>;
         title?: Record<string, string>;
+        titleInner?: Record<string, string>;
         input?: Record<string, string>;
         noticeText?: Record<string, string>;
+        list?: Record<string, string>;
+        listInner?: Record<string, string>;
         listItem?: Record<string, string>;
         listItemTitle?: Record<string, string>;
         notFound?: Record<string, string>;
@@ -120,15 +124,27 @@ declare const Select: {
             label: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
+            control: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
             title: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
+            titleInner: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
             input: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
             noticeText: PropTypes.Requireable<{
                 [x: string]: string;
             }>;
+            list: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            listInner: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
             listItem: PropTypes.Requireable<{
                 [x: string]: string;
             }>;

package/dist/lib/components/Select/Select.js

@@ -235,6 +235,7 @@ var Select = function Select(_ref) {
       comparableInputValue: title,
       items: items
     });
+    e.persist();
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(e, item);
     onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
@@ -390,11 +391,11 @@ var Select = function Select(_ref) {
       role: "button",
       tabIndex: 0,
       onClick: handleSelectClick
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.titleInner), {
       className: cn('title-inner', {
         'hide-value': !item
       }, [classes === null || classes === void 0 ? void 0 : classes.titleInner])
-    }, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       className: cn('title-value')
     }, inputTitle), label && renderLabel()));
   };
@@ -414,14 +415,14 @@ var Select = function Select(_ref) {
 
   var renderChildren = function renderChildren() {
     var currentItems = type === SelectTypes.COMBOBOX ? itemsList : items;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
       className: cn('list', [classes.list])
-    }, /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listInner), {
       className: cn('list-inner', {
         "short": shortList
       }, [classes.listInner]),
       ref: itemWrapperNode
-    }, currentItems.map(function (_ref3, i) {
+    }), currentItems.map(function (_ref3, i) {
       var title = _ref3.title,
           value = _ref3.value,
           view = _ref3.view,
@@ -458,12 +459,12 @@ var Select = function Select(_ref) {
     ref: selectNode
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
     className: cn('control', {
       labeled: !!label
     }, classes.control),
     onKeyDown: handleKeyDown
-  }, type === SelectTypes.COMBOBOX && renderCombobox(), type === SelectTypes.CLASSIC && renderTitle()), renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
+  }), type === SelectTypes.COMBOBOX && renderCombobox(), type === SelectTypes.CLASSIC && renderTitle()), renderChildren()), noticeText && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.noticeText), {
     className: cn('text', {
       error: verification === Verification.ERROR,
       success: verification === Verification.VALID
@@ -496,9 +497,13 @@ Select.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     label: PropTypes.objectOf(PropTypes.string.isRequired),
+    control: PropTypes.objectOf(PropTypes.string.isRequired),
     title: PropTypes.objectOf(PropTypes.string.isRequired),
+    titleInner: PropTypes.objectOf(PropTypes.string.isRequired),
     input: PropTypes.objectOf(PropTypes.string.isRequired),
     noticeText: PropTypes.objectOf(PropTypes.string.isRequired),
+    list: PropTypes.objectOf(PropTypes.string.isRequired),
+    listInner: PropTypes.objectOf(PropTypes.string.isRequired),
     listItem: PropTypes.objectOf(PropTypes.string.isRequired),
     listItemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
     notFound: PropTypes.objectOf(PropTypes.string.isRequired)

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

@@ -6,6 +6,7 @@ export interface ISwitcherProps {
     dataAttrs?: {
         root?: Record<string, string>;
         input?: Record<string, string>;
+        loader?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -13,7 +14,7 @@ export interface ISwitcherProps {
     checked?: boolean;
     /** Отключение переключателя */
     disabled?: boolean;
-    /** Cостояние загрузки */
+    /** Состояние загрузки */
     showLoader?: boolean;
     /** Размер текста лейбла */
     textSize?: 'small' | 'medium';