@megafon/ui-core 4.12.0 → 4.14.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.14.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.13.0...@megafon/ui-core@4.14.0) (2023-03-07)
+
+
+### Bug Fixes
+
+* **button:** disable delay for loader ([a19c599](https://github.com/MegafonWebLab/megafon-ui/commit/a19c599f884d5dc9d485c56c6c7914e76d1c3fb6))
+
+
+### Features
+
+* **carousel:** fix z-index of naw arrow ([b6b1ae1](https://github.com/MegafonWebLab/megafon-ui/commit/b6b1ae18e8641d8168bc97598df62a1ce0eac1f4))
+* **preloader:** add new prop hasDelay ([356305d](https://github.com/MegafonWebLab/megafon-ui/commit/356305d70451d38e91e638970eb9b597cac86ea7))
+
+
+
+
+
+# [4.13.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.12.0...@megafon/ui-core@4.13.0) (2023-02-22)
+
+
+### Features
+
+* **carousel:** add property for gradient ([9900586](https://github.com/MegafonWebLab/megafon-ui/commit/99005866bc54d60f3447742f129f036391fb3a68))
+
+
+
+
+
 # [4.12.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.11.4...@megafon/ui-core@4.12.0) (2023-02-13)
 
 

package/dist/es/components/Button/Button.js

@@ -157,6 +157,7 @@ var Button = function Button(_ref) {
   }, [icon, children]);
   var renderedLoader = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(Preloader, {
+      delay: false,
       className: cn('preloader'),
       dataAttrs: {
         root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader)

package/dist/es/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;
@@ -73,7 +116,7 @@
 .mfui-carousel__arrow {
   position: absolute;
   top: 50%;
-  z-index: 2;
+  z-index: 6;
   -webkit-transform: translateY(calc(-50% - 40px / 2));
           transform: translateY(calc(-50% - 40px / 2));
 }
@@ -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/es/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/es/components/Carousel/Carousel.js

@@ -9,7 +9,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _defaultSlidesSetting;
 
-import * as React from 'react';
+import React from 'react';
 import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
@@ -19,6 +19,7 @@ import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
 import usePrevious from "../../hooks/usePrevious";
 import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
+import useGradient, { GradientTheme } from "./useGradient";
 import "./Carousel.css";
 SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
@@ -96,7 +97,11 @@ 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 ? GradientTheme.DEFAULT : _ref$gradientColor;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -121,6 +126,11 @@ var Carousel = function Carousel(_ref) {
   var childrenLen = Array.isArray(children) ? children.length : 0;
   var prevChildrenLen = usePrevious(childrenLen) || 0;
   var isChildrenLenDiff = childrenLen !== prevChildrenLen;
+  var gradientStyles = useGradient(gradient, {
+    instance: swiperInstance,
+    slidesSettings: slidesSettings,
+    isLocked: isLocked
+  });
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
         autoplay = _ref2.autoplay;
@@ -245,7 +255,7 @@ var Carousel = function Carousel(_ref) {
     return function () {
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
-  }, [swiperInstance]);
+  }, [slidesSettings, swiperInstance]);
   React.useEffect(function () {
     if (swiperInstance && isChildrenLenDiff) {
       handleNavDisplay(swiperInstance);
@@ -256,12 +266,15 @@ var Carousel = function Carousel(_ref) {
     className: cn({
       'nav-theme': navTheme
     }, [className, rootClass]),
-    onClick: handleRootClick
+    onClick: handleRootClick,
+    style: gradientStyles
   }), /*#__PURE__*/React.createElement(Swiper, _extends({}, containerModifier ? {
     containerModifierClass: containerModifier
   } : {}, 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,
@@ -371,6 +384,8 @@ 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(GradientTheme))
 };
 export default Carousel;

package/dist/es/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/es/components/Carousel/useGradient.js

@@ -0,0 +1,52 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+import { breakpoints } from '@megafon/ui-helpers';
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime";
+export var 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 || (GradientTheme = {}));
+
+export default (function (gradient, swiper) {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      slidesGap = _useState2[0],
+      setSlidesGap = _useState2[1];
+
+  var swiperInstance = swiper.instance,
+      slidesSettings = swiper.slidesSettings,
+      isLocked = swiper.isLocked;
+  var isGradientEnable = gradient && !isLocked;
+  useEffect(function () {
+    var isTouch = window.innerWidth < 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 = throttle(setCurrenSlidesGap, throttleTime.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 : {};
+});

package/dist/es/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/es/components/Preloader/Preloader.d.ts

@@ -12,6 +12,8 @@ export declare const PreloaderSizes: {
 };
 export declare type PreloaderSizesType = typeof PreloaderSizes[keyof typeof PreloaderSizes];
 export interface IPreloaderProps {
+    /** Задержка отрисовки  */
+    delay?: boolean;
     /** Цветовая тема */
     color?: PreloaderColorsType;
     /** Размер на всех разрешениях экрана */

package/dist/es/components/Preloader/Preloader.js

@@ -22,6 +22,8 @@ var Preloader = function Preloader(_ref) {
       color = _ref$color === void 0 ? 'default' : _ref$color,
       _ref$sizeAll = _ref.sizeAll,
       sizeAll = _ref$sizeAll === void 0 ? 'medium' : _ref$sizeAll,
+      _ref$delay = _ref.delay,
+      delay = _ref$delay === void 0 ? true : _ref$delay,
       sizeWide = _ref.sizeWide,
       sizeDesktop = _ref.sizeDesktop,
       sizeTablet = _ref.sizeTablet,
@@ -29,19 +31,23 @@ var Preloader = function Preloader(_ref) {
       className = _ref.className,
       dataAttrs = _ref.dataAttrs;
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(!delay),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isShowed = _React$useState2[0],
       setIsShowed = _React$useState2[1];
 
   React.useEffect(function () {
+    if (isShowed) {
+      return undefined;
+    }
+
     var timerId = setTimeout(function () {
       setIsShowed(true);
     }, 250);
     return function () {
       clearTimeout(timerId);
     };
-  }, []);
+  }, [isShowed]);
   return isShowed ? /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,

package/dist/es/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/es/components/Search/Search.js

@@ -185,12 +185,12 @@ var Search = function Search(_ref) {
       open: isFocused,
       disabled: disabled
     }, [className])
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, 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.createElement("label", {
+  }), /*#__PURE__*/React.createElement("label", {
     className: cn('search-wrapper', {
       labeled: !!label,
       'no-label': !label
@@ -238,23 +238,26 @@ var Search = function Search(_ref) {
       onMouseDown: handleSelectSubmit(i),
       onMouseEnter: handleHoverItem(i),
       key: i
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", _extends({}, 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.createElement("div", {
+    }), searchView || highlightString(itemValue)));
+  })))), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, 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/es/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';

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

@@ -50,9 +50,9 @@ var Switcher = function Switcher(_ref) {
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('loader')
-  }), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
   })), isRightContent && /*#__PURE__*/React.createElement("div", {
     className: cn('content', {
@@ -64,7 +64,8 @@ var Switcher = function Switcher(_ref) {
 Switcher.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    input: PropTypes.objectOf(PropTypes.string.isRequired)
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    loader: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),

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

@@ -77,6 +77,7 @@ export declare type TextFieldProps = {
         notice?: Record<string, string>;
         input?: Record<string, string>;
         iconBox?: Record<string, string>;
+        resizer?: Record<string, string>;
     };
     /** Атрибут элемента input */
     inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';

package/dist/es/components/TextField/TextField.js

@@ -465,10 +465,10 @@ var TextField = function TextField(_ref) {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
     })
-  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", {
+  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('resizer'),
     ref: resizerRef
-  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
     className: cn('field-bottom-wrapper', {
       filled: !!currentNoticeText || !!symbolCounter
     })
@@ -527,7 +527,8 @@ TextField.propTypes = {
     label: PropTypes.objectOf(PropTypes.string.isRequired),
     notice: PropTypes.objectOf(PropTypes.string.isRequired),
     input: PropTypes.objectOf(PropTypes.string.isRequired),
-    iconBox: PropTypes.objectOf(PropTypes.string.isRequired)
+    iconBox: PropTypes.objectOf(PropTypes.string.isRequired),
+    resizer: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default TextField;

package/dist/es/index.d.ts

@@ -43,4 +43,5 @@ export { default as Tile } from './components/Tile/Tile';
 export { default as Timer } from './components/Badges/components/TimerBadge/Timer/Timer';
 export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';

package/dist/es/index.js

@@ -43,4 +43,5 @@ export { default as Tile } from "./components/Tile/Tile";
 export { default as Timer } from "./components/Badges/components/TimerBadge/Timer/Timer";
 export { default as TimerBadge } from "./components/Badges/components/TimerBadge/TimerBadge";
 export { default as Tooltip } from "./components/Tooltip/Tooltip";
+export { default as useGradient } from "./components/Carousel/useGradient";
 export { default as usePagination } from "./components/Pagination/usePagination";

package/dist/lib/components/Button/Button.js

@@ -190,6 +190,7 @@ var Button = function Button(_ref) {
 
   var renderedLoader = _react["default"].useMemo(function () {
     return /*#__PURE__*/_react["default"].createElement(_Preloader["default"], {
+      delay: false,
       className: cn('preloader'),
       dataAttrs: {
         root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader)

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;
@@ -73,7 +116,7 @@
 .mfui-carousel__arrow {
   position: absolute;
   top: 50%;
-  z-index: 2;
+  z-index: 6;
   -webkit-transform: translateY(calc(-50% - 40px / 2));
           transform: translateY(calc(-50% - 40px / 2));
 }
@@ -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/Preloader/Preloader.d.ts

@@ -12,6 +12,8 @@ export declare const PreloaderSizes: {
 };
 export declare type PreloaderSizesType = typeof PreloaderSizes[keyof typeof PreloaderSizes];
 export interface IPreloaderProps {
+    /** Задержка отрисовки  */
+    delay?: boolean;
     /** Цветовая тема */
     color?: PreloaderColorsType;
     /** Размер на всех разрешениях экрана */

package/dist/lib/components/Preloader/Preloader.js

@@ -45,6 +45,8 @@ var Preloader = function Preloader(_ref) {
       color = _ref$color === void 0 ? 'default' : _ref$color,
       _ref$sizeAll = _ref.sizeAll,
       sizeAll = _ref$sizeAll === void 0 ? 'medium' : _ref$sizeAll,
+      _ref$delay = _ref.delay,
+      delay = _ref$delay === void 0 ? true : _ref$delay,
       sizeWide = _ref.sizeWide,
       sizeDesktop = _ref.sizeDesktop,
       sizeTablet = _ref.sizeTablet,
@@ -52,19 +54,23 @@ var Preloader = function Preloader(_ref) {
       className = _ref.className,
       dataAttrs = _ref.dataAttrs;
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(!delay),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       isShowed = _React$useState2[0],
       setIsShowed = _React$useState2[1];
 
   React.useEffect(function () {
+    if (isShowed) {
+      return undefined;
+    }
+
     var timerId = setTimeout(function () {
       setIsShowed(true);
     }, 250);
     return function () {
       clearTimeout(timerId);
     };
-  }, []);
+  }, [isShowed]);
   return isShowed ? /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,

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/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';

package/dist/lib/components/Switcher/Switcher.js

@@ -68,9 +68,9 @@ var Switcher = function Switcher(_ref) {
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('loader')
-  }), /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
   })), isRightContent && /*#__PURE__*/React.createElement("div", {
     className: cn('content', {
@@ -82,7 +82,8 @@ var Switcher = function Switcher(_ref) {
 Switcher.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
-    input: PropTypes.objectOf(PropTypes.string.isRequired)
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    loader: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),

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

@@ -77,6 +77,7 @@ export declare type TextFieldProps = {
         notice?: Record<string, string>;
         input?: Record<string, string>;
         iconBox?: Record<string, string>;
+        resizer?: Record<string, string>;
     };
     /** Атрибут элемента input */
     inputMode?: 'numeric' | 'tel' | 'decimal' | 'email' | 'url' | 'search' | 'none';

package/dist/lib/components/TextField/TextField.js

@@ -489,10 +489,10 @@ var TextField = function TextField(_ref) {
     className: cn('field-wrapper', {
       textarea: textarea && textareaType
     })
-  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", {
+  }, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('resizer'),
     ref: resizerRef
-  }, /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null))), /*#__PURE__*/React.createElement("div", {
     className: cn('field-bottom-wrapper', {
       filled: !!currentNoticeText || !!symbolCounter
     })
@@ -551,7 +551,8 @@ TextField.propTypes = {
     label: PropTypes.objectOf(PropTypes.string.isRequired),
     notice: PropTypes.objectOf(PropTypes.string.isRequired),
     input: PropTypes.objectOf(PropTypes.string.isRequired),
-    iconBox: PropTypes.objectOf(PropTypes.string.isRequired)
+    iconBox: PropTypes.objectOf(PropTypes.string.isRequired),
+    resizer: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 var _default = TextField;

package/dist/lib/index.d.ts

@@ -43,4 +43,5 @@ export { default as Tile } from './components/Tile/Tile';
 export { default as Timer } from './components/Badges/components/TimerBadge/Timer/Timer';
 export { default as TimerBadge } from './components/Badges/components/TimerBadge/TimerBadge';
 export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as useGradient } from './components/Carousel/useGradient';
 export { default as usePagination } from './components/Pagination/usePagination';

package/dist/lib/index.js

@@ -273,6 +273,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip["default"];
   }
 });
+Object.defineProperty(exports, "useGradient", {
+  enumerable: true,
+  get: function get() {
+    return _useGradient["default"];
+  }
+});
 Object.defineProperty(exports, "usePagination", {
   enumerable: true,
   get: function get() {
@@ -370,6 +376,8 @@ var _TimerBadge = _interopRequireDefault(require("./components/Badges/components
 
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip/Tooltip"));
 
+var _useGradient = _interopRequireDefault(require("./components/Carousel/useGradient"));
+
 var _usePagination = _interopRequireDefault(require("./components/Pagination/usePagination"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.12.0",
+  "version": "4.14.0",
   "files": [
     "dist",
     "styles"
@@ -100,5 +100,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "8aa400bad61aac6015ab7eff10b6aa24dcdbd8f6"
+  "gitHead": "b9b0a048d2faba323bebaddbf302aed8e0894506"
 }