@megafon/ui-core 5.4.0 → 5.4.2

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.2](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.1...@megafon/ui-core@5.4.2) (2023-12-14)
+
+
+### Bug Fixes
+
+* **notification:** added root ref, link class ([4b6e76c](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/4b6e76cbeee4b17b46f0abae2c73ec879d9201de))
+* **pricebadge:** change font-weight from 400 to 500 ([79e3480](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/79e3480a8f6254101b687db949b3257c2fa00a32))
+* **search:** add extra classes ([2bef678](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/2bef67859c166644194bf39ea380465617e80ad7))
+
+
+
+
+
+## [5.4.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.0...@megafon/ui-core@5.4.1) (2023-11-27)
+
+
+### Bug Fixes
+
+* **search:** change index to correct one on mouse down to item in dropdown ([363e1bc](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/363e1bc43f884fecec1057e74f071ab1e9904e24))
+
+
+
+
+
 # [5.4.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.3.0...@megafon/ui-core@5.4.0) (2023-11-22)
 
 

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.css

@@ -7,23 +7,24 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 2px;
-  padding-right: 8px;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
+  padding: 2px;
+  padding-right: 8px;
   border-radius: 8px;
+  font-weight: 500;
 }
 @media screen and (min-width: 1024px) {
   .mfui-price-badge_adaptive {
     font-size: 15px;
     line-height: 24px;
+    min-height: 32px;
     padding: 4px;
     padding-right: 8px;
-    min-height: 32px;
     border-radius: 12px;
   }
 }
@@ -64,9 +65,9 @@
   fill: var(--fury);
 }
 .mfui-price-badge_size_big {
+  padding: 12px 12px 12px 4px;
   font-size: 15px;
   line-height: 18px;
-  padding: 12px 12px 12px 4px;
 }
 .mfui-price-badge__text {
   font-family: inherit;
@@ -78,17 +79,17 @@
   display: flex;
 }
 .mfui-price-badge__icon {
-  height: 20px;
   width: 20px;
   min-width: 20px;
+  height: 20px;
 }
 .mfui-price-badge_size_big .mfui-price-badge__icon {
-  height: 32px;
   width: 32px;
   min-width: 32px;
+  height: 32px;
 }
 .mfui-price-badge_size_big .mfui-price-badge__sub-title {
+  margin-top: 2px;
   font-size: 12px;
   line-height: 18px;
-  margin-top: 2px;
 }

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

@@ -22,6 +22,7 @@ export interface INotificationProps {
         root?: string;
         container?: string;
         content?: string;
+        link?: string;
     };
     /** Тип отображения */
     type?: NotificationType;
@@ -67,6 +68,8 @@ export interface INotificationProps {
         button?: Record<string, string>;
         collapseButton?: Record<string, string>;
     };
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Обработчик на закрытие */
     onClose?: () => void;
     /** Обработчик клика по ссылке */

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

@@ -96,6 +96,7 @@ var Notification = function Notification(_ref) {
   var rootClass = _ref$classes.root,
       containerClass = _ref$classes.container,
       contentClass = _ref$classes.content,
+      linkClass = _ref$classes.link,
       children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'info' : _ref$type,
@@ -122,6 +123,7 @@ var Notification = function Notification(_ref) {
       href = _ref.href,
       target = _ref.target,
       icon = _ref.icon,
+      rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       onClose = _ref.onClose,
       onLinkClick = _ref.onLinkClick,
@@ -208,7 +210,7 @@ var Notification = function Notification(_ref) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
       },
-      className: cn('link'),
+      className: cn('link', [linkClass]),
       onClick: onLinkClick,
       rel: rel,
       href: href,
@@ -271,18 +273,19 @@ var Notification = function Notification(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Tile, {
-    dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
-    },
-    radius: "rounded",
-    shadowLevel: shadowLevel,
     className: cn({
       type: type,
       colored: isColored
-    }, [className, rootClass])
+    }, [className, rootClass]),
+    radius: "rounded",
+    shadowLevel: shadowLevel,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
+    }
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "".concat(testIdPrefix, "-container"),
-    className: cn('container', [containerClass])
+    className: cn('container', [containerClass]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
@@ -326,7 +329,8 @@ Notification.propTypes = {
   classes: PropTypes.shape({
     root: PropTypes.string,
     container: PropTypes.string,
-    content: PropTypes.string
+    content: PropTypes.string,
+    link: PropTypes.string
   }),
   shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
   isColored: PropTypes.bool,
@@ -344,6 +348,9 @@ Notification.propTypes = {
   href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   icon: PropTypes.element,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     title: PropTypes.objectOf(PropTypes.string.isRequired),

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

@@ -62,6 +62,7 @@ export interface ISearchProps {
         listItemTitle?: string;
         control?: string;
         icon?: string;
+        submitButton?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;

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

@@ -11,8 +11,8 @@ import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
-import "./Search.css";
 import Preloader from "../Preloader/Preloader";
+import "./Search.css";
 
 var SearchIcon16 = function SearchIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -131,11 +131,11 @@ var Search = function Search(_ref) {
     var chosenValue = items[index].value;
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
   }, [disabled, items, onSubmit]);
-  var handleSelectSubmit = React.useCallback(function () {
+  var handleSelectSubmit = React.useCallback(function (index) {
     return function () {
-      handleItemSubmit(activeIndex);
+      handleItemSubmit(index);
     };
-  }, [handleItemSubmit, activeIndex]);
+  }, [handleItemSubmit]);
   var handleFocus = React.useCallback(function (e) {
     setFocus(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
@@ -223,7 +223,7 @@ var Search = function Search(_ref) {
   var renderSubmitButton = function renderSubmitButton() {
     var Icon = isCompact ? SearchIcon16 : SearchIcon;
     return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
-      className: cn('submit-button'),
+      className: cn('submit-button', [classes === null || classes === void 0 ? void 0 : classes.submitButton]),
       onClick: handleSearchSubmit,
       type: "button"
     }), /*#__PURE__*/React.createElement(Icon, {

package/dist/es/components/Snackbar/Snackbar.js

@@ -6,7 +6,7 @@ var _DEFAULT_SNACKBARS;
 
 import "core-js/modules/web.timers.js";
 import "core-js/modules/es.object.values.js";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Button from "../Button/Button";
@@ -128,7 +128,10 @@ var Snackbar = function Snackbar(_ref) {
       isOpened = _useState2[0],
       setIsOpened = _useState2[1];
 
-  var containerRef = useRef(null);
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      containerRef = _useState4[0],
+      setContainerRef = _useState4[1];
 
   var _useSwipe = useSwipe(containerRef),
       transform = _useSwipe.transform,
@@ -142,6 +145,11 @@ var Snackbar = function Snackbar(_ref) {
   var isHiddenIcon = isTimerType || !hasIcon && isInfoType;
   var isCustomIcon = isInfoType && icon;
   var currentButtonText = buttonText && !isTimerType ? buttonText : defaultSnackbar.buttonText;
+
+  var setRef = function setRef(instance) {
+    return setContainerRef(instance);
+  };
+
   var handleClose = useCallback(function () {
     setIsOpened(false);
   }, []);
@@ -191,10 +199,10 @@ var Snackbar = function Snackbar(_ref) {
     className: cn({
       move: isTransitionMoveStep
     }, [className, classes.root]),
-    ref: containerRef,
-    style: {
+    ref: setRef,
+    style: transform !== 'none' ? {
       transform: transform
-    }
+    } : undefined
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Tile, {
     className: cn('tile', {
       type: type,

package/dist/es/hooks/useSwipe.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export declare enum TransitionSteps {
     INITIAL_STEP = "initial-step",
     MOVE_STEP = "move-step",
@@ -10,5 +9,5 @@ declare type UseSwipeReturnType = {
     /** Текущий этап смахивания элемента */
     transitionStep: TransitionSteps;
 };
-declare function useSwipe(element: React.MutableRefObject<null>): UseSwipeReturnType;
+declare function useSwipe(element: HTMLElement | null): UseSwipeReturnType;
 export default useSwipe;

package/dist/es/hooks/useSwipe.js

@@ -1,4 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.match.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.number.is-nan.js";
+import "core-js/modules/es.number.constructor.js";
 import * as React from 'react';
 import useResolution from "./useResolution";
 export var TransitionSteps;
@@ -31,14 +36,17 @@ function useSwipe(element) {
       setTransform = _React$useState6[1];
 
   var animationFrameId = React.useRef(0);
-  var currentElement = element.current;
+  var currentElement = element;
   var isTransitionMoveStep = transitionStep === TransitionSteps.MOVE_STEP;
+  var currentTransform = currentElement ? getComputedStyle(currentElement).transform : '';
   var handleWindowTouchMove = React.useCallback(function (e) {
     if (animationFrameId) {
       window.cancelAnimationFrame(animationFrameId.current);
     }
 
     animationFrameId.current = window.requestAnimationFrame(function () {
+      var _a;
+
       setTransitionStep(TransitionSteps.MOVE_STEP);
 
       if (!currentElement) {
@@ -51,10 +59,12 @@ function useSwipe(element) {
       }
 
       var positionsDiff = initialTouchPosition - e.touches[0].clientX;
-      positionsDiff !== 0 && setTransform("translateX(".concat(-positionsDiff, "px)"));
+      var values = !!currentTransform && currentTransform !== 'none' ? (_a = currentTransform.match(/\(((?:[0-9][,\s]*)+)\)/)) === null || _a === void 0 ? void 0 : _a[0].split(', ') : undefined;
+      var currentTranslateX = !values || Number.isNaN(Number(values === null || values === void 0 ? void 0 : values[4])) ? 0 : Number(values === null || values === void 0 ? void 0 : values[4]);
+      positionsDiff !== 0 && setTransform("translateX(".concat(currentTranslateX - positionsDiff, "px)"));
       animationFrameId.current = 0;
     });
-  }, [currentElement, animationFrameId, initialTouchPosition]);
+  }, [currentElement, animationFrameId, initialTouchPosition, currentTransform]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
     var _a;
 
@@ -93,16 +103,23 @@ function useSwipe(element) {
     }
   }, [currentElement, isTransitionMoveStep, initialTouchPosition, animationFrameId]);
   React.useEffect(function () {
-    if (isMobile) {
-      window.addEventListener('touchmove', handleWindowTouchMove);
-      window.addEventListener('touchend', handleWindowTouchEnd);
+    if (!isMobile || !currentElement) {
+      return;
     }
 
+    currentElement.addEventListener('touchmove', handleWindowTouchMove);
+    currentElement.addEventListener('touchend', handleWindowTouchEnd);
+    /* eslint-disable-next-line consistent-return */
+
     return function () {
-      window.removeEventListener('touchmove', handleWindowTouchMove);
-      window.removeEventListener('touchend', handleWindowTouchEnd);
+      if (!currentElement) {
+        return;
+      }
+
+      currentElement.removeEventListener('touchmove', handleWindowTouchMove);
+      currentElement.removeEventListener('touchend', handleWindowTouchEnd);
     };
-  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd]);
+  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd, currentElement]);
   return {
     transform: transform,
     transitionStep: transitionStep

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.css

@@ -7,23 +7,24 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 2px;
-  padding-right: 8px;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
+  padding: 2px;
+  padding-right: 8px;
   border-radius: 8px;
+  font-weight: 500;
 }
 @media screen and (min-width: 1024px) {
   .mfui-price-badge_adaptive {
     font-size: 15px;
     line-height: 24px;
+    min-height: 32px;
     padding: 4px;
     padding-right: 8px;
-    min-height: 32px;
     border-radius: 12px;
   }
 }
@@ -64,9 +65,9 @@
   fill: var(--fury);
 }
 .mfui-price-badge_size_big {
+  padding: 12px 12px 12px 4px;
   font-size: 15px;
   line-height: 18px;
-  padding: 12px 12px 12px 4px;
 }
 .mfui-price-badge__text {
   font-family: inherit;
@@ -78,17 +79,17 @@
   display: flex;
 }
 .mfui-price-badge__icon {
-  height: 20px;
   width: 20px;
   min-width: 20px;
+  height: 20px;
 }
 .mfui-price-badge_size_big .mfui-price-badge__icon {
-  height: 32px;
   width: 32px;
   min-width: 32px;
+  height: 32px;
 }
 .mfui-price-badge_size_big .mfui-price-badge__sub-title {
+  margin-top: 2px;
   font-size: 12px;
   line-height: 18px;
-  margin-top: 2px;
 }

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

@@ -22,6 +22,7 @@ export interface INotificationProps {
         root?: string;
         container?: string;
         content?: string;
+        link?: string;
     };
     /** Тип отображения */
     type?: NotificationType;
@@ -67,6 +68,8 @@ export interface INotificationProps {
         button?: Record<string, string>;
         collapseButton?: Record<string, string>;
     };
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Обработчик на закрытие */
     onClose?: () => void;
     /** Обработчик клика по ссылке */

package/dist/lib/components/Notification/Notification.js

@@ -121,6 +121,7 @@ var Notification = function Notification(_ref) {
   var rootClass = _ref$classes.root,
       containerClass = _ref$classes.container,
       contentClass = _ref$classes.content,
+      linkClass = _ref$classes.link,
       children = _ref.children,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'info' : _ref$type,
@@ -147,6 +148,7 @@ var Notification = function Notification(_ref) {
       href = _ref.href,
       target = _ref.target,
       icon = _ref.icon,
+      rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       onClose = _ref.onClose,
       onLinkClick = _ref.onLinkClick,
@@ -233,7 +235,7 @@ var Notification = function Notification(_ref) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
       },
-      className: cn('link'),
+      className: cn('link', [linkClass]),
       onClick: onLinkClick,
       rel: rel,
       href: href,
@@ -296,18 +298,19 @@ var Notification = function Notification(_ref) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
-    dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
-    },
-    radius: "rounded",
-    shadowLevel: shadowLevel,
     className: cn({
       type: type,
       colored: isColored
-    }, [className, rootClass])
+    }, [className, rootClass]),
+    radius: "rounded",
+    shadowLevel: shadowLevel,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
+    }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     "data-testid": "".concat(testIdPrefix, "-container"),
-    className: cn('container', [containerClass])
+    className: cn('container', [containerClass]),
+    ref: rootRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('icon-container')
   }, renderIcon()), /*#__PURE__*/_react["default"].createElement("div", {
@@ -351,7 +354,8 @@ Notification.propTypes = {
   classes: PropTypes.shape({
     root: PropTypes.string,
     container: PropTypes.string,
-    content: PropTypes.string
+    content: PropTypes.string,
+    link: PropTypes.string
   }),
   shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
   isColored: PropTypes.bool,
@@ -369,6 +373,9 @@ Notification.propTypes = {
   href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   icon: PropTypes.element,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     title: PropTypes.objectOf(PropTypes.string.isRequired),

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

@@ -62,6 +62,7 @@ export interface ISearchProps {
         listItemTitle?: string;
         control?: string;
         icon?: string;
+        submitButton?: string;
     };
     /** Отображение загрузки */
     showLoader?: boolean;

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

@@ -168,11 +168,11 @@ var Search = function Search(_ref) {
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
   }, [disabled, items, onSubmit]);
 
-  var handleSelectSubmit = _react["default"].useCallback(function () {
+  var handleSelectSubmit = _react["default"].useCallback(function (index) {
     return function () {
-      handleItemSubmit(activeIndex);
+      handleItemSubmit(index);
     };
-  }, [handleItemSubmit, activeIndex]);
+  }, [handleItemSubmit]);
 
   var handleFocus = _react["default"].useCallback(function (e) {
     setFocus(true);
@@ -267,7 +267,7 @@ var Search = function Search(_ref) {
   var renderSubmitButton = function renderSubmitButton() {
     var Icon = isCompact ? SearchIcon16 : SearchIcon;
     return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
-      className: cn('submit-button'),
+      className: cn('submit-button', [classes === null || classes === void 0 ? void 0 : classes.submitButton]),
       onClick: handleSearchSubmit,
       type: "button"
     }), /*#__PURE__*/_react["default"].createElement(Icon, {

package/dist/lib/components/Snackbar/Snackbar.js

@@ -155,7 +155,10 @@ var Snackbar = function Snackbar(_ref) {
       isOpened = _useState2[0],
       setIsOpened = _useState2[1];
 
-  var containerRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      containerRef = _useState4[0],
+      setContainerRef = _useState4[1];
 
   var _useSwipe = (0, _useSwipe2["default"])(containerRef),
       transform = _useSwipe.transform,
@@ -169,6 +172,11 @@ var Snackbar = function Snackbar(_ref) {
   var isHiddenIcon = isTimerType || !hasIcon && isInfoType;
   var isCustomIcon = isInfoType && icon;
   var currentButtonText = buttonText && !isTimerType ? buttonText : defaultSnackbar.buttonText;
+
+  var setRef = function setRef(instance) {
+    return setContainerRef(instance);
+  };
+
   var handleClose = (0, _react.useCallback)(function () {
     setIsOpened(false);
   }, []);
@@ -218,10 +226,10 @@ var Snackbar = function Snackbar(_ref) {
     className: cn({
       move: isTransitionMoveStep
     }, [className, classes.root]),
-    ref: containerRef,
-    style: {
+    ref: setRef,
+    style: transform !== 'none' ? {
       transform: transform
-    }
+    } : undefined
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
     className: cn('tile', {
       type: type,

package/dist/lib/hooks/useSwipe.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export declare enum TransitionSteps {
     INITIAL_STEP = "initial-step",
     MOVE_STEP = "move-step",
@@ -10,5 +9,5 @@ declare type UseSwipeReturnType = {
     /** Текущий этап смахивания элемента */
     transitionStep: TransitionSteps;
 };
-declare function useSwipe(element: React.MutableRefObject<null>): UseSwipeReturnType;
+declare function useSwipe(element: HTMLElement | null): UseSwipeReturnType;
 export default useSwipe;

package/dist/lib/hooks/useSwipe.js

@@ -9,6 +9,16 @@ exports["default"] = exports.TransitionSteps = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.match.js");
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.number.is-nan.js");
+
+require("core-js/modules/es.number.constructor.js");
+
 var React = _interopRequireWildcard(require("react"));
 
 var _useResolution2 = _interopRequireDefault(require("./useResolution"));
@@ -50,14 +60,17 @@ function useSwipe(element) {
       setTransform = _React$useState6[1];
 
   var animationFrameId = React.useRef(0);
-  var currentElement = element.current;
+  var currentElement = element;
   var isTransitionMoveStep = transitionStep === TransitionSteps.MOVE_STEP;
+  var currentTransform = currentElement ? getComputedStyle(currentElement).transform : '';
   var handleWindowTouchMove = React.useCallback(function (e) {
     if (animationFrameId) {
       window.cancelAnimationFrame(animationFrameId.current);
     }
 
     animationFrameId.current = window.requestAnimationFrame(function () {
+      var _a;
+
       setTransitionStep(TransitionSteps.MOVE_STEP);
 
       if (!currentElement) {
@@ -70,10 +83,12 @@ function useSwipe(element) {
       }
 
       var positionsDiff = initialTouchPosition - e.touches[0].clientX;
-      positionsDiff !== 0 && setTransform("translateX(".concat(-positionsDiff, "px)"));
+      var values = !!currentTransform && currentTransform !== 'none' ? (_a = currentTransform.match(/\(((?:[0-9][,\s]*)+)\)/)) === null || _a === void 0 ? void 0 : _a[0].split(', ') : undefined;
+      var currentTranslateX = !values || Number.isNaN(Number(values === null || values === void 0 ? void 0 : values[4])) ? 0 : Number(values === null || values === void 0 ? void 0 : values[4]);
+      positionsDiff !== 0 && setTransform("translateX(".concat(currentTranslateX - positionsDiff, "px)"));
       animationFrameId.current = 0;
     });
-  }, [currentElement, animationFrameId, initialTouchPosition]);
+  }, [currentElement, animationFrameId, initialTouchPosition, currentTransform]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
     var _a;
 
@@ -112,16 +127,23 @@ function useSwipe(element) {
     }
   }, [currentElement, isTransitionMoveStep, initialTouchPosition, animationFrameId]);
   React.useEffect(function () {
-    if (isMobile) {
-      window.addEventListener('touchmove', handleWindowTouchMove);
-      window.addEventListener('touchend', handleWindowTouchEnd);
+    if (!isMobile || !currentElement) {
+      return;
     }
 
+    currentElement.addEventListener('touchmove', handleWindowTouchMove);
+    currentElement.addEventListener('touchend', handleWindowTouchEnd);
+    /* eslint-disable-next-line consistent-return */
+
     return function () {
-      window.removeEventListener('touchmove', handleWindowTouchMove);
-      window.removeEventListener('touchend', handleWindowTouchEnd);
+      if (!currentElement) {
+        return;
+      }
+
+      currentElement.removeEventListener('touchmove', handleWindowTouchMove);
+      currentElement.removeEventListener('touchend', handleWindowTouchEnd);
     };
-  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd]);
+  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd, currentElement]);
   return {
     transform: transform,
     transitionStep: transitionStep

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "files": [
     "dist",
     "styles"
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.15.0",
+    "@megafon/ui-icons": "^2.16.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -85,7 +85,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.5.3",
+    "@megafon/ui-helpers": "^2.5.4",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "e78c7c397c514016ee74020939dc3807e09bf49a"
+  "gitHead": "18cb80b0ac6513b2ad8f31167461aefbb226a6c2"
 }