@megafon/ui-core 5.1.2 → 5.2.0

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.2.0](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-core@5.1.2...@megafon/ui-core@5.2.0) (2023-08-25)
+
+
+### Features
+
+* **snackbar:** create component Snackbar ([ec08ff0](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/ec08ff067b23dcd7ad9e3f853ba871ba20fd36bd))
+
+
+
+
+
 ## [5.1.2](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-core@5.1.0...@megafon/ui-core@5.1.2) (2023-08-21)
 
 

package/dist/es/components/Snackbar/Snackbar.css

@@ -0,0 +1,217 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-snackbar {
+  z-index: 1;
+  width: 480px;
+  -webkit-transition: -webkit-transform 300ms;
+  transition: -webkit-transform 300ms;
+  transition: transform 300ms;
+  transition: transform 300ms, -webkit-transform 300ms;
+}
+@-webkit-keyframes snackbar-show {
+  from {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+}
+@keyframes snackbar-show {
+  from {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes snackbar-hide {
+  0% {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+  99% {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  100% {
+    display: none;
+  }
+}
+@keyframes snackbar-hide {
+  0% {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+  99% {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  100% {
+    display: none;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar {
+    width: 304px;
+  }
+}
+.mfui-snackbar_move {
+  -webkit-transition: none;
+  transition: none;
+}
+.mfui-snackbar__tile {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  min-height: 64px;
+  padding: 12px 16px 12px 12px;
+  background-color: var(--content);
+  opacity: 0;
+  -webkit-animation: 200ms linear 200ms 1 forwards snackbar-show;
+          animation: 200ms linear 200ms 1 forwards snackbar-show;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__tile {
+    min-height: 48px;
+  }
+}
+.mfui-snackbar__tile_closed {
+  -webkit-animation: 100ms linear 1 snackbar-hide;
+          animation: 100ms linear 1 snackbar-hide;
+}
+.mfui-snackbar__tile_type_success .mfui-snackbar__icon-container svg {
+  fill: var(--brandGreen);
+}
+.mfui-snackbar__tile_type_attention .mfui-snackbar__icon-container svg {
+  fill: var(--fury80);
+}
+.mfui-snackbar__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  margin-right: 8px;
+}
+.mfui-snackbar__icon-container svg {
+  fill: var(--base);
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__icon-container {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+  }
+}
+.mfui-snackbar__icon-container_desktop {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  .mfui-snackbar__icon-container_desktop {
+    display: block;
+  }
+}
+.mfui-snackbar__icon-container_mobile {
+  display: none;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__icon-container_mobile {
+    display: block;
+  }
+}
+.mfui-snackbar__text {
+  display: none;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  .mfui-snackbar__text_desktop {
+    display: block;
+    max-height: 48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__text_mobile {
+    display: block;
+    max-height: 36px;
+  }
+}
+.mfui-snackbar__text_short {
+  max-width: 272px;
+}
+.mfui-snackbar__text-button {
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  margin-left: 12px;
+}
+.mfui-snackbar__close-button {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  margin-left: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 40px;
+  background-color: transparent;
+  cursor: pointer;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__close-button {
+    display: none;
+  }
+}
+.mfui-snackbar__close-button:hover {
+  background-color: #99999933;
+}
+.mfui-snackbar__close-button:active {
+  background-color: #99999966;
+}
+.mfui-snackbar__close-button-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  fill: var(--spbSky3);
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import './Snackbar.less';
+export declare const SnackbarTypes: {
+    readonly ATTENTION: "attention";
+    readonly SUCCESS: "success";
+    readonly TIMER: "timer";
+    readonly INFO: "info";
+};
+export declare type SnackbarType = typeof SnackbarTypes[keyof typeof SnackbarTypes];
+export interface ISnackbarProps {
+    /** Текст */
+    text: string;
+    /** Тип отображения */
+    type?: SnackbarType;
+    /** Кастомная иконка для типа 'info' */
+    icon?: JSX.Element;
+    /** Отображение иконки. Скрыть иконку можно только для типа 'info' */
+    hasIcon?: boolean;
+    /** Кастомный текст кнопки. Не работает для типа 'timer' */
+    buttonText?: string;
+    /** Максимальное значение таймера */
+    maxTimerValue?: number;
+    /** Отображение текстовой кнопки */
+    hasTextButton?: boolean;
+    /** Отключение анимации закрытия */
+    disableCloseAnimation?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        icon?: string;
+        text?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        text?: Record<string, string>;
+        closeButton?: Record<string, string>;
+        textButton?: Record<string, string>;
+    };
+    /** Обработчик клика по кнопке */
+    onButtonClick?: () => void;
+    /** Обработчик на закрытие */
+    onClose?: () => void;
+}
+declare const Snackbar: React.FC<ISnackbarProps>;
+export default Snackbar;

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

@@ -0,0 +1,258 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+
+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 { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import Button from "../Button/Button";
+import Caption from "../Caption/Caption";
+import Header from "../Header/Header";
+import Tile from "../Tile/Tile";
+import useSwipe, { TransitionSteps } from 'hooks/useSwipe';
+import SnackbarTimer from "./SnackbarTimer/SnackbarTimer";
+import "./Snackbar.css";
+
+var HeartIcon16 = function HeartIcon16(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M13.25 3A3.78 3.78 0 0010 4.82 3.78 3.78 0 006.75 3C4.6 3 3 5.18 3 7.13a3.42 3.42 0 00.49 1.77c1.2 2 5 7.64 5.15 7.88l.15.22h2.51l.15-.22c.16-.24 4-5.83 5.1-7.92A4.14 4.14 0 0017 7.13C17 5.18 15.4 3 13.25 3zm2.41 5.4c-.94 1.81-4.16 6.53-4.89 7.59H9.32c-.73-1.09-3.92-5.87-5-7.62A2.42 2.42 0 014 7.13C4 5.71 5.23 4 6.75 4a2.73 2.73 0 012.67 2h1.15a2.73 2.73 0 012.67-2C14.77 4 16 5.71 16 7.13a3.14 3.14 0 01-.34 1.27z"
+  }));
+};
+
+var HeartIcon24 = function HeartIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M20.5 6A5.55 5.55 0 0016 8.27 5.55 5.55 0 0011.5 6C8.35 6 6 9.18 6 12a5 5 0 00.73 2.61c1.67 2.77 6.92 10.59 7.14 10.93l.3.44H18l.3-.43c.23-.33 5.58-8.09 7.09-11A6 6 0 0026 12c0-2.82-2.35-6-5.5-6zm3.07 7.65c-1.25 2.42-5.5 8.65-6.66 10.35h-1.68c-1.16-1.73-5.37-8-6.79-10.4A3 3 0 018 12c0-1.82 1.56-4 3.5-4a3.47 3.47 0 013.38 2.51h2.24A3.47 3.47 0 0120.5 8c1.94 0 3.5 2.2 3.5 4a4 4 0 01-.43 1.65z"
+  }));
+};
+
+var AttentionIcon16 = function AttentionIcon16(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M9 5h2v6H9V5zm1 8c-.2 0-.5.1-.7.3s-.3.4-.3.7.1.5.3.7.5.3.7.3.5-.1.7-.3.3-.4.3-.7-.1-.5-.3-.7c-.1-.2-.4-.3-.7-.3zm0 4c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm-8-7c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8z"
+  }));
+};
+
+var CheckedIcon16 = function CheckedIcon16(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
+  }));
+};
+
+var AttentionIcon24 = function AttentionIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+  }));
+};
+
+var CheckedIcon24 = function CheckedIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+  }));
+};
+
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+  }));
+};
+
+var DEFAULT_MAX_TIMER_SECONDS = 4;
+var CLOSE_DELAY_MS = 80;
+export var SnackbarTypes = {
+  ATTENTION: 'attention',
+  SUCCESS: 'success',
+  TIMER: 'timer',
+  INFO: 'info'
+};
+var ATTENTION = SnackbarTypes.ATTENTION,
+    SUCCESS = SnackbarTypes.SUCCESS,
+    TIMER = SnackbarTypes.TIMER,
+    INFO = SnackbarTypes.INFO;
+var DEFAULT_SNACKBARS = (_DEFAULT_SNACKBARS = {}, _defineProperty(_DEFAULT_SNACKBARS, ATTENTION, {
+  mobileIcon: /*#__PURE__*/React.createElement(AttentionIcon16, null),
+  desktopIcon: /*#__PURE__*/React.createElement(AttentionIcon24, null),
+  buttonText: 'Подробнее'
+}), _defineProperty(_DEFAULT_SNACKBARS, SUCCESS, {
+  mobileIcon: /*#__PURE__*/React.createElement(CheckedIcon16, null),
+  desktopIcon: /*#__PURE__*/React.createElement(CheckedIcon24, null),
+  buttonText: 'Подробнее'
+}), _defineProperty(_DEFAULT_SNACKBARS, TIMER, {
+  buttonText: 'Отмена'
+}), _defineProperty(_DEFAULT_SNACKBARS, INFO, {
+  mobileIcon: /*#__PURE__*/React.createElement(HeartIcon16, null),
+  desktopIcon: /*#__PURE__*/React.createElement(HeartIcon24, null),
+  buttonText: 'Хорошо'
+}), _DEFAULT_SNACKBARS);
+var cn = cnCreate('mfui-snackbar');
+
+var Snackbar = function Snackbar(_ref) {
+  var text = _ref.text,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? INFO : _ref$type,
+      icon = _ref.icon,
+      _ref$hasIcon = _ref.hasIcon,
+      hasIcon = _ref$hasIcon === void 0 ? true : _ref$hasIcon,
+      buttonText = _ref.buttonText,
+      _ref$maxTimerValue = _ref.maxTimerValue,
+      maxTimerValue = _ref$maxTimerValue === void 0 ? DEFAULT_MAX_TIMER_SECONDS : _ref$maxTimerValue,
+      _ref$hasTextButton = _ref.hasTextButton,
+      hasTextButton = _ref$hasTextButton === void 0 ? false : _ref$hasTextButton,
+      _ref$disableCloseAnim = _ref.disableCloseAnimation,
+      disableCloseAnimation = _ref$disableCloseAnim === void 0 ? false : _ref$disableCloseAnim,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      onClose = _ref.onClose,
+      onButtonClick = _ref.onButtonClick;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpened = _useState2[0],
+      setIsOpened = _useState2[1];
+
+  var containerRef = useRef(null);
+
+  var _useSwipe = useSwipe(containerRef),
+      transform = _useSwipe.transform,
+      transitionStep = _useSwipe.transitionStep;
+
+  var isTransitionMoveStep = transitionStep === TransitionSteps.MOVE_STEP;
+  var isTransitionMoveEndStep = transitionStep === TransitionSteps.MOVE_END_STEP;
+  var defaultSnackbar = DEFAULT_SNACKBARS[type];
+  var isTimerType = type === TIMER;
+  var isInfoType = type === INFO;
+  var isHiddenIcon = isTimerType || !hasIcon && isInfoType;
+  var isCustomIcon = isInfoType && icon;
+  var currentButtonText = buttonText && !isTimerType ? buttonText : defaultSnackbar.buttonText;
+  var handleClose = useCallback(function () {
+    setIsOpened(false);
+  }, []);
+  useEffect(function () {
+    if (isOpened) {
+      return undefined;
+    }
+
+    if (disableCloseAnimation) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+
+    var closeTimeoutId = setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, CLOSE_DELAY_MS);
+    return function () {
+      clearTimeout(closeTimeoutId);
+    };
+  }, [isOpened, disableCloseAnimation, onClose]);
+  useEffect(function () {
+    isTransitionMoveEndStep && handleClose();
+  }, [isTransitionMoveEndStep, handleClose]);
+  var handleTextButtonClick = useCallback(function () {
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick();
+  }, [onButtonClick]);
+  var renderedTimer = useMemo(function () {
+    return /*#__PURE__*/React.createElement(SnackbarTimer, {
+      isTimerType: isTimerType,
+      maxTimerValue: maxTimerValue,
+      onTimerEnd: handleClose
+    });
+  }, [isTimerType, maxTimerValue, handleClose]);
+  var renderedIcons = useMemo(function () {
+    return isCustomIcon ? /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', [classes.icon])
+    }, icon) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', {
+        mobile: true
+      }, [classes.icon])
+    }, defaultSnackbar.mobileIcon), /*#__PURE__*/React.createElement("div", {
+      className: cn('icon-container', {
+        desktop: true
+      }, [classes.icon])
+    }, defaultSnackbar.desktopIcon));
+  }, [isCustomIcon, icon, defaultSnackbar, classes]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      move: isTransitionMoveStep
+    }, [className, classes.root]),
+    ref: containerRef,
+    style: {
+      transform: transform
+    }
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Tile, {
+    className: cn('tile', {
+      type: type,
+      closed: !isOpened
+    }, [classes.container]),
+    radius: "rounded"
+  }, !isHiddenIcon && renderedIcons, renderedTimer, /*#__PURE__*/React.createElement(Caption, {
+    className: cn('text', {
+      mobile: true
+    }, [classes.text]),
+    variant: "medium",
+    color: "white",
+    hasMargin: false,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text
+    }
+  }, text), /*#__PURE__*/React.createElement(Header, {
+    as: "h5",
+    color: "white",
+    className: cn('text', {
+      desktop: true,
+      "short": !!hasTextButton
+    }, [classes.text]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text
+    }
+  }, text), hasTextButton && /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    sizeAll: "small",
+    sizeMobile: "extra-small",
+    className: cn('text-button'),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.textButton
+    },
+    onClick: handleTextButtonClick
+  }, currentButtonText), /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: cn('close-button')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton), {
+    onClick: handleClose
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
+    className: cn('close-button-icon')
+  }))));
+};
+
+Snackbar.propTypes = {
+  text: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.values(SnackbarTypes)),
+  icon: PropTypes.element,
+  hasIcon: PropTypes.bool,
+  buttonText: PropTypes.string,
+  hasTextButton: PropTypes.bool,
+  maxTimerValue: PropTypes.number,
+  disableCloseAnimation: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  onButtonClick: PropTypes.func,
+  onClose: PropTypes.func
+};
+export default Snackbar;

package/dist/es/components/Snackbar/SnackbarTimer/SnackbarTimer.css

@@ -0,0 +1,63 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+@-webkit-keyframes snackbar-progress-bar {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes snackbar-progress-bar {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+.mfui-snackbar-timer__timer {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-right: 8px;
+  width: 24px;
+  height: 24px;
+}
+.mfui-snackbar-timer__timer svg {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+}
+.mfui-snackbar-timer__timer-bg {
+  fill: none;
+  stroke-width: 1px;
+  stroke: var(--spbSky0);
+}
+.mfui-snackbar-timer__timer-progress {
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke: var(--content);
+  stroke-dasharray: 100;
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-animation-name: snackbar-progress-bar;
+          animation-name: snackbar-progress-bar;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}

package/dist/es/components/Snackbar/SnackbarTimer/SnackbarTimer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './SnackbarTimer.less';
+declare type SnackbarTimerProps = {
+    isTimerType: boolean;
+    maxTimerValue: number;
+    onTimerEnd: () => void;
+};
+declare const SnackbarTimer: React.FC<SnackbarTimerProps>;
+export default SnackbarTimer;

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

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/web.timers.js";
+import React, { useEffect, useState } from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import Caption from "../../Caption/Caption";
+import "./SnackbarTimer.css";
+var TIMER_END_DELAY_MS = 100;
+var MS_IN_SECOND = 1000;
+var cn = cnCreate('mfui-snackbar-timer');
+
+var SnackbarTimer = function SnackbarTimer(_ref) {
+  var isTimerType = _ref.isTimerType,
+      maxTimerValue = _ref.maxTimerValue,
+      onTimerEnd = _ref.onTimerEnd;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      timerValue = _useState2[0],
+      setTimerValue = _useState2[1];
+
+  useEffect(function () {
+    setTimerValue(maxTimerValue);
+  }, [maxTimerValue]);
+  useEffect(function () {
+    var timerTimeoutId;
+    var closeTimeoutId;
+
+    switch (timerValue) {
+      case null:
+        {
+          break;
+        }
+
+      case 0:
+        {
+          closeTimeoutId = setTimeout(function () {
+            setTimerValue(null);
+            onTimerEnd();
+          }, TIMER_END_DELAY_MS);
+          break;
+        }
+
+      default:
+        {
+          timerTimeoutId = setTimeout(function () {
+            return setTimerValue(timerValue - 1);
+          }, MS_IN_SECOND);
+        }
+    }
+
+    return function () {
+      clearTimeout(timerTimeoutId);
+      clearTimeout(closeTimeoutId);
+    };
+  }, [timerValue, onTimerEnd]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, isTimerType && /*#__PURE__*/React.createElement(Caption, {
+    color: "white",
+    variant: "medium",
+    hasMargin: false,
+    className: cn('timer')
+  }, /*#__PURE__*/React.createElement("svg", null, /*#__PURE__*/React.createElement("circle", {
+    className: cn('timer-bg'),
+    cx: "50%",
+    cy: "50%",
+    r: "11"
+  }), /*#__PURE__*/React.createElement("circle", {
+    className: cn('timer-progress'),
+    style: {
+      animationDuration: "".concat(maxTimerValue * 1.5, "s")
+    },
+    cx: "50%",
+    cy: "50%",
+    r: "11"
+  })), timerValue));
+};
+
+export default SnackbarTimer;

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

@@ -0,0 +1,5 @@
+declare type UseResolutionReturnType = {
+    isMobile: boolean;
+};
+declare function useResolution(): UseResolutionReturnType;
+export default useResolution;