@megafon/ui-core 5.4.0 → 5.4.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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/Search/Search.js

@@ -9,10 +9,10 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Preloader from "../Preloader/Preloader";
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
 import "./Search.css";
-import Preloader from "../Preloader/Preloader";
 
 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);

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/Search/Search.js

@@ -29,12 +29,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
+var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
+
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
-var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -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);

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.1",
   "files": [
     "dist",
     "styles"
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "e78c7c397c514016ee74020939dc3807e09bf49a"
+  "gitHead": "d65bc4cd4de9180971e4285c2d0b5beec27d0542"
 }