@megafon/ui-core 5.4.5 → 5.5.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.5.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.6...@megafon/ui-core@5.5.0) (2024-02-13)
+
+
+### Bug Fixes
+
+* **snackbar:** fix useSwipe logic ([29b1187](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/29b1187fdcb065d91123a85e4ee2fde4bd9ab077))
+
+
+### Features
+
+* **button:** add icon to text for extra-small and small sizes ([170b606](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/170b60639863a4b933db5a9c1072e3d1f15f8050))
+* **chip:** create component Chip ([268d329](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/268d329713468e78c111675f0fbe8061b6c91d4c))
+* **tabs:** add new prop for panel class ([0a5d47e](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0a5d47e46a618cec32f62ab94b9d0f9ee769d029))
+
+
+
+
+
+## [5.4.6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.5...@megafon/ui-core@5.4.6) (2024-01-30)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
 ## [5.4.5](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.4...@megafon/ui-core@5.4.5) (2024-01-22)
 
 

package/dist/es/components/Button/Button.css

@@ -40,10 +40,14 @@
   line-height: 14px;
 }
 .mfui-button_size-all_extra-small .mfui-button__icon,
-.mfui-button_size-all_extra-small .mfui-button__icon-arrow {
+.mfui-button_size-all_extra-small .mfui-button__icon-arrow,
+.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 20px;
   height: 20px;
 }
+.mfui-button_size-all_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+  margin-right: 2px;
+}
 .mfui-button_size-all_small {
   min-width: 40px;
   height: 40px;
@@ -54,12 +58,17 @@
   width: 20px;
   height: 20px;
 }
+.mfui-button_size-all_small.mfui-button_content-type_icon-text .mfui-button__icon {
+  width: 32px;
+  height: 32px;
+}
 .mfui-button_size-all_medium {
   min-width: 52px;
   height: 52px;
 }
 .mfui-button_size-all_medium .mfui-button__icon,
-.mfui-button_size-all_medium .mfui-button__icon-arrow {
+.mfui-button_size-all_medium .mfui-button__icon-arrow,
+.mfui-button_size-all_medium.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 32px;
   height: 32px;
 }
@@ -68,7 +77,8 @@
   height: 60px;
 }
 .mfui-button_size-all_large .mfui-button__icon,
-.mfui-button_size-all_large .mfui-button__icon-arrow {
+.mfui-button_size-all_large .mfui-button__icon-arrow,
+.mfui-button_size-all_large.mfui-button_content-type_icon-text .mfui-button__icon {
   width: 32px;
   height: 32px;
 }
@@ -99,10 +109,14 @@
     line-height: 14px;
   }
   .mfui-button_size-desktop_extra-small .mfui-button__icon,
-  .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-desktop_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-desktop_small {
     min-width: 40px;
     height: 40px;
@@ -113,12 +127,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-desktop_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-desktop_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-desktop_medium .mfui-button__icon,
-  .mfui-button_size-desktop_medium .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_medium .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -127,7 +146,8 @@
     height: 60px;
   }
   .mfui-button_size-desktop_large .mfui-button__icon,
-  .mfui-button_size-desktop_large .mfui-button__icon-arrow {
+  .mfui-button_size-desktop_large .mfui-button__icon-arrow,
+  .mfui-button_size-desktop_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -159,10 +179,14 @@
     line-height: 14px;
   }
   .mfui-button_size-wide_extra-small .mfui-button__icon,
-  .mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-wide_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-wide_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-wide_small {
     min-width: 40px;
     height: 40px;
@@ -173,12 +197,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-wide_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-wide_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-wide_medium .mfui-button__icon,
-  .mfui-button_size-wide_medium .mfui-button__icon-arrow {
+  .mfui-button_size-wide_medium .mfui-button__icon-arrow,
+  .mfui-button_size-wide_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -187,7 +216,8 @@
     height: 60px;
   }
   .mfui-button_size-wide_large .mfui-button__icon,
-  .mfui-button_size-wide_large .mfui-button__icon-arrow {
+  .mfui-button_size-wide_large .mfui-button__icon-arrow,
+  .mfui-button_size-wide_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -219,10 +249,14 @@
     line-height: 14px;
   }
   .mfui-button_size-tablet_extra-small .mfui-button__icon,
-  .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-tablet_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-tablet_small {
     min-width: 40px;
     height: 40px;
@@ -233,12 +267,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-tablet_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-tablet_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-tablet_medium .mfui-button__icon,
-  .mfui-button_size-tablet_medium .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_medium .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -247,7 +286,8 @@
     height: 60px;
   }
   .mfui-button_size-tablet_large .mfui-button__icon,
-  .mfui-button_size-tablet_large .mfui-button__icon-arrow {
+  .mfui-button_size-tablet_large .mfui-button__icon-arrow,
+  .mfui-button_size-tablet_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -279,10 +319,14 @@
     line-height: 14px;
   }
   .mfui-button_size-mobile_extra-small .mfui-button__icon,
-  .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_extra-small .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-mobile_extra-small.mfui-button_content-type_icon-text .mfui-button__icon {
+    margin-right: 2px;
+  }
   .mfui-button_size-mobile_small {
     min-width: 40px;
     height: 40px;
@@ -293,12 +337,17 @@
     width: 20px;
     height: 20px;
   }
+  .mfui-button_size-mobile_small.mfui-button_content-type_icon-text .mfui-button__icon {
+    width: 32px;
+    height: 32px;
+  }
   .mfui-button_size-mobile_medium {
     min-width: 52px;
     height: 52px;
   }
   .mfui-button_size-mobile_medium .mfui-button__icon,
-  .mfui-button_size-mobile_medium .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_medium .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_medium.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -307,7 +356,8 @@
     height: 60px;
   }
   .mfui-button_size-mobile_large .mfui-button__icon,
-  .mfui-button_size-mobile_large .mfui-button__icon-arrow {
+  .mfui-button_size-mobile_large .mfui-button__icon-arrow,
+  .mfui-button_size-mobile_large.mfui-button_content-type_icon-text .mfui-button__icon {
     width: 32px;
     height: 32px;
   }
@@ -395,14 +445,8 @@
   padding: 0;
 }
 .mfui-button_content-type_icon-text .mfui-button__icon {
-  width: 32px;
-  height: 32px;
   margin-right: 4px;
 }
-.mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon,
-.mfui-button_content-type_icon-text.mfui-button_size-all_extra-small .mfui-button__icon {
-  display: none;
-}
 .mfui-button_type_text.mfui-button_theme_green {
   width: -webkit-fit-content;
   width: -moz-fit-content;

package/dist/es/components/Calendar/Calendar.js

@@ -207,6 +207,7 @@ var Calendar = function Calendar(_ref) {
   };
 
   var renderDays = function renderDays(days) {
+    var correctionIndex = 0;
     return days.map(function (day, index) {
       if (_typeof(day) === 'object') {
         var date = day.date,
@@ -220,7 +221,7 @@ var Calendar = function Calendar(_ref) {
 
         return /*#__PURE__*/React.createElement(Day, _extends({
           dataAttrs: {
-            root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1))
+            root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1 - correctionIndex))
           },
           date: date,
           key: formatDate(date, 'dd-MM-yyyy'),
@@ -233,6 +234,7 @@ var Calendar = function Calendar(_ref) {
         }));
       }
 
+      correctionIndex += 1;
       return /*#__PURE__*/React.createElement("div", {
         key: index + day
       });

package/dist/es/components/Calendar/components/Month/Month.js

@@ -3,8 +3,8 @@ import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.array.map.js";
 import React from 'react';
 import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import "./Month.css";
 import PropTypes from 'prop-types';
+import "./Month.css";
 
 var ArrowLeft = function ArrowLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({

package/dist/es/components/Chip/Chip.css

@@ -0,0 +1,111 @@
+.mfui-chip {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  padding: 8px 20px;
+  border: none;
+  border-radius: 20px;
+  overflow: hidden;
+  color: var(--content);
+  text-align: center;
+  text-decoration: none;
+  background-color: var(--spbSky0);
+  outline: none;
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s, color 0.3s;
+  transition: background-color 0.3s, color 0.3s;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.mfui-chip svg {
+  -webkit-transition: fill 0.3s;
+  transition: fill 0.3s;
+  fill: var(--content);
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip {
+    padding: 4px 12px;
+  }
+}
+.mfui-chip:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-chip_disabled,
+.mfui-chip_disabled:hover {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+  cursor: default;
+  pointer-events: none;
+}
+.mfui-chip_disabled svg,
+.mfui-chip_disabled:hover svg {
+  fill: var(--spbSky3);
+}
+.mfui-chip_checked,
+.mfui-chip_checked:hover {
+  color: var(--stcWhite);
+  background-color: var(--reflexBlue);
+}
+.mfui-chip_checked svg,
+.mfui-chip_checked:hover svg {
+  fill: var(--stcWhite);
+}
+.mfui-chip_checked.mfui-chip_color_black,
+.mfui-chip_checked.mfui-chip_color_black:hover {
+  color: var(--base);
+  background-color: var(--content);
+}
+.mfui-chip_checked.mfui-chip_color_black svg,
+.mfui-chip_checked.mfui-chip_color_black:hover svg {
+  fill: var(--base);
+}
+.mfui-chip_with-icon {
+  padding-left: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip_with-icon {
+    padding-left: 8px;
+  }
+}
+.mfui-chip__inner {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  white-space: nowrap;
+}
+.mfui-chip__icon {
+  display: block;
+  width: 20px;
+  min-width: 20px;
+  max-height: 20px;
+  margin-right: 6px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__icon {
+    margin-right: 4px;
+  }
+}
+.mfui-chip__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,36 @@
+import React, { Ref } from 'react';
+import './Chip.less';
+export interface IChipProps {
+    /** Идентификатор */
+    id: number | string;
+    /** Набор цветов для компонента */
+    color?: 'default' | 'black';
+    /** Отображение в отмеченном (зажатом) состоянии */
+    checked?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Обработчик нажатия */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number | string) => void;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        inner?: string;
+        icon?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+        icon?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: Ref<HTMLButtonElement>;
+}
+declare const Chip: React.FC<IChipProps>;
+export default Chip;

package/dist/es/components/Chip/Chip.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./Chip.css";
+var cn = cnCreate('mfui-chip');
+
+var Chip = function Chip(_ref) {
+  var id = _ref.id,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      icon = _ref.icon,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef;
+  var handleClick = React.useCallback(function (e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
+  }, [onClick, id]);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: cn({
+      color: color,
+      checked: checked,
+      disabled: disabled,
+      'with-icon': !!icon
+    }, [className, classes.root])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    disabled: disabled,
+    onClick: handleClick,
+    ref: rootRef
+  }), !!icon && /*#__PURE__*/React.createElement("span", _extends({
+    className: cn('icon', [classes.icon])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", _extends({
+    className: cn('inner', [classes.inner])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children));
+};
+
+Chip.propTypes = {
+  id: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(['default', 'black']),
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  icon: PropTypes.element,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+export default Chip;

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

@@ -28,6 +28,7 @@ export interface ITabsProps {
         innerIndents?: string;
         tab?: string;
         activeTab?: string;
+        panel?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/Tabs/Tabs.js

@@ -329,10 +329,10 @@ var Tabs = function Tabs(_ref) {
       return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, i + 1), {
         className: cn('panel', {
           current: isCurrentPanel
-        })
+        }, [classes === null || classes === void 0 ? void 0 : classes.panel])
       }), panel);
     });
-  }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel]);
+  }, [children, currentIndex, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.panel, renderOnlyCurrentPanel, classes === null || classes === void 0 ? void 0 : classes.panel]);
   React.useEffect(function () {
     if (!sticky) {
       return undefined;
@@ -459,7 +459,8 @@ Tabs.propTypes = {
     swiperWrapper: PropTypes.string,
     innerIndents: PropTypes.string,
     tab: PropTypes.string,
-    activeTab: PropTypes.string
+    activeTab: PropTypes.string,
+    panel: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),

package/dist/es/hooks/useSwipe.js

@@ -22,18 +22,23 @@ function useSwipe(element) {
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      initialTouchPosition = _React$useState2[0],
-      setInitialTouchPosition = _React$useState2[1];
+      initialTouchPositionX = _React$useState2[0],
+      setInitialTouchPositionX = _React$useState2[1];
 
-  var _React$useState3 = React.useState(TransitionSteps.INITIAL_STEP),
+  var _React$useState3 = React.useState(null),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      transitionStep = _React$useState4[0],
-      setTransitionStep = _React$useState4[1];
+      initialTouchPositionY = _React$useState4[0],
+      setInitialTouchPositionY = _React$useState4[1];
 
-  var _React$useState5 = React.useState(''),
+  var _React$useState5 = React.useState(TransitionSteps.INITIAL_STEP),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      transform = _React$useState6[0],
-      setTransform = _React$useState6[1];
+      transitionStep = _React$useState6[0],
+      setTransitionStep = _React$useState6[1];
+
+  var _React$useState7 = React.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      transform = _React$useState8[0],
+      setTransform = _React$useState8[1];
 
   var animationFrameId = React.useRef(0);
   var currentElement = element;
@@ -47,38 +52,58 @@ function useSwipe(element) {
     animationFrameId.current = window.requestAnimationFrame(function () {
       var _a;
 
-      setTransitionStep(TransitionSteps.MOVE_STEP);
+      if (!initialTouchPositionY) {
+        setInitialTouchPositionY(e.touches[0].clientY);
+        return;
+      }
 
-      if (!currentElement) {
+      if (!initialTouchPositionX) {
+        setInitialTouchPositionX(e.touches[0].clientX);
+        return;
+      }
+
+      var positionsDiffX = initialTouchPositionX - e.touches[0].clientX;
+      var positionsDiffY = initialTouchPositionY - e.touches[0].clientY;
+
+      if (Math.abs(positionsDiffY) > Math.abs(positionsDiffX)) {
         return;
       }
 
-      if (!initialTouchPosition) {
-        setInitialTouchPosition(e.touches[0].clientX);
+      setTransitionStep(TransitionSteps.MOVE_STEP);
+
+      if (!currentElement) {
         return;
       }
 
-      var positionsDiff = initialTouchPosition - e.touches[0].clientX;
+      var positionsDiff = initialTouchPositionX - e.touches[0].clientX;
       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, currentTransform]);
+  }, [initialTouchPositionX, initialTouchPositionY, currentElement, currentTransform]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
-    var _a;
+    var _a, _b;
 
-    if (!currentElement || !isTransitionMoveStep || !initialTouchPosition) {
+    if (!currentElement || !isTransitionMoveStep || !initialTouchPositionX || !initialTouchPositionY) {
       return;
     }
 
     window.cancelAnimationFrame(animationFrameId.current);
+    var touchPositionY = (_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY;
+    var touchPositionX = (_b = e.changedTouches[0]) === null || _b === void 0 ? void 0 : _b.clientX;
+
+    if (Math.abs(touchPositionY - initialTouchPositionY) > Math.abs(touchPositionX - initialTouchPositionX)) {
+      setInitialTouchPositionX(null);
+      setInitialTouchPositionY(null);
+      return;
+    }
+
     var windowCenterPosition = window.innerWidth / 2;
-    var touchPosition = (_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientX;
-    var isRightSwipe = touchPosition > initialTouchPosition;
-    var isLeftSwipe = touchPosition < initialTouchPosition;
-    var isMoreHalfSwiped = Math.abs(initialTouchPosition - touchPosition) > windowCenterPosition;
-    setInitialTouchPosition(null);
+    var isRightSwipe = touchPositionX > initialTouchPositionX;
+    var isLeftSwipe = touchPositionX < initialTouchPositionX;
+    var isMoreHalfSwiped = Math.abs(initialTouchPositionX - touchPositionX) > windowCenterPosition;
+    setInitialTouchPositionX(null);
 
     switch (true) {
       case isMoreHalfSwiped && isRightSwipe:
@@ -101,7 +126,7 @@ function useSwipe(element) {
           setTransitionStep(TransitionSteps.INITIAL_STEP);
         }
     }
-  }, [currentElement, isTransitionMoveStep, initialTouchPosition, animationFrameId]);
+  }, [currentElement, isTransitionMoveStep, initialTouchPositionX, initialTouchPositionY]);
   React.useEffect(function () {
     if (!isMobile || !currentElement) {
       return;

package/dist/es/index.d.ts

@@ -7,6 +7,7 @@ export { default as Caption } from './components/Caption/Caption';
 export { default as Carousel } from './components/Carousel/Carousel';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
+export { default as Chip } from './components/Chip/Chip';
 export { default as Collapse } from './components/Collapse/Collapse';
 export { default as ContentArea } from './components/ContentArea/ContentArea';
 export { default as Counter } from './components/Counter/Counter';

package/dist/es/index.js

@@ -7,6 +7,7 @@ export { default as Caption } from "./components/Caption/Caption";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as checkBreakpointsPropTypes } from "./components/Carousel/checkBreakpointsPropTypes";
+export { default as Chip } from "./components/Chip/Chip";
 export { default as Collapse } from "./components/Collapse/Collapse";
 export { default as ContentArea } from "./components/ContentArea/ContentArea";
 export { default as Counter } from "./components/Counter/Counter";