@sima-land/ui-nucleons 45.0.0-alpha.39 → 45.0.0-alpha.40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sima-land/ui-nucleons",
   "type": "commonjs",
-  "version": "45.0.0-alpha.39",
+  "version": "45.0.0-alpha.40",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "1.46.1",
     "@sima-land/linters": "^5.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -138,6 +138,7 @@
     "./side-page": "./side-page/index.js",
     "./side-page/side-page-util.scss": "./side-page/side-page-util.scss",
     "./skeleton": "./skeleton/index.js",
+    "./snackbar": "./snackbar/index.js",
     "./spinner": "./spinner/index.js",
     "./stepper": "./stepper/index.js",
     "./stroked-svg": "./stroked-svg/index.js",

package/snack-bar/context.d.ts

@@ -0,0 +1,17 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+/**
+ * Провайдер контекста для вывода нескольких снекбаров.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+export declare function SnackbarContextProvider({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const SnackbarContext: import("react").Context<ContextProps>;
+interface ContextProps {
+    closePrevious?: VoidFunction;
+    setClose?: Dispatch<SetStateAction<{
+        closePrevious?: VoidFunction;
+    }>>;
+}
+export {};

package/snack-bar/context.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarContext = void 0;
+exports.SnackbarContextProvider = SnackbarContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * Провайдер контекста для вывода нескольких снекбаров.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+function SnackbarContextProvider({ children }) {
+    const [value, setClose] = (0, react_1.useState)({});
+    return ((0, jsx_runtime_1.jsx)(exports.SnackbarContext.Provider, { value: { ...value, setClose }, children: children }));
+}
+exports.SnackbarContext = (0, react_1.createContext)({});
+//# sourceMappingURL=context.js.map

package/snack-bar/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../src/snack-bar/context.tsx"],"names":[],"mappings":";;;AAOA,0DAMC;;AAbD,iCAAqF;AAErF;;;;GAIG;AACH,SAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAA4B;IAC5E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAmC,EAAE,CAAC,CAAC;IAEzE,OAAO,CACL,uBAAC,uBAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,YAAG,QAAQ,GAA4B,CAC/F,CAAC;AACJ,CAAC;AAEY,QAAA,eAAe,GAAG,IAAA,qBAAa,EAAe,EAAE,CAAC,CAAC"}

package/snack-bar/index.d.ts

@@ -0,0 +1,5 @@
+export { SnackBarImage, SnackBarStartIcon, SnackBarEndIcon, SnackBarTitle, SnackBarSubtitle, } from './slots';
+export { SnackBar } from './snack-bar';
+export { useSnackBarPositioning } from './utils';
+export { SnackbarContextProvider } from './context';
+export type { SnackBarProps } from './types';

package/snack-bar/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarContextProvider = exports.useSnackBarPositioning = exports.SnackBar = exports.SnackBarSubtitle = exports.SnackBarTitle = exports.SnackBarEndIcon = exports.SnackBarStartIcon = exports.SnackBarImage = void 0;
+var slots_1 = require("./slots");
+Object.defineProperty(exports, "SnackBarImage", { enumerable: true, get: function () { return slots_1.SnackBarImage; } });
+Object.defineProperty(exports, "SnackBarStartIcon", { enumerable: true, get: function () { return slots_1.SnackBarStartIcon; } });
+Object.defineProperty(exports, "SnackBarEndIcon", { enumerable: true, get: function () { return slots_1.SnackBarEndIcon; } });
+Object.defineProperty(exports, "SnackBarTitle", { enumerable: true, get: function () { return slots_1.SnackBarTitle; } });
+Object.defineProperty(exports, "SnackBarSubtitle", { enumerable: true, get: function () { return slots_1.SnackBarSubtitle; } });
+var snack_bar_1 = require("./snack-bar");
+Object.defineProperty(exports, "SnackBar", { enumerable: true, get: function () { return snack_bar_1.SnackBar; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "useSnackBarPositioning", { enumerable: true, get: function () { return utils_1.useSnackBarPositioning; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "SnackbarContextProvider", { enumerable: true, get: function () { return context_1.SnackbarContextProvider; } });
+//# sourceMappingURL=index.js.map

package/snack-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/snack-bar/index.tsx"],"names":[],"mappings":";;;AAAA,iCAMiB;AALf,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AACjB,wGAAA,eAAe,OAAA;AACf,sGAAA,aAAa,OAAA;AACb,yGAAA,gBAAgB,OAAA;AAElB,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,iCAAiD;AAAxC,+GAAA,sBAAsB,OAAA;AAC/B,qCAAoD;AAA3C,kHAAA,uBAAuB,OAAA"}

package/snack-bar/slots.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import { SnackBarIconProps, SnackBarImageProps } from './types';
+/**
+ * Компонент для вывода изображения в Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+export declare function SnackBarImage(props: SnackBarImageProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Компонент для вывода иконки в начале контента Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+export declare const SnackBarStartIcon: (props: SnackBarIconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Компонент для вывода иконки в конце контента Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+export declare const SnackBarEndIcon: (props: SnackBarIconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Компонент для вывода заголовка в Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+export declare function SnackBarTitle({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Компонент для вывода подзаголовка в Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+export declare function SnackBarSubtitle({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/snack-bar/slots.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackBarEndIcon = exports.SnackBarStartIcon = void 0;
+exports.SnackBarImage = SnackBarImage;
+exports.SnackBarTitle = SnackBarTitle;
+exports.SnackBarSubtitle = SnackBarSubtitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const snack_bar_m_scss_1 = __importDefault(require("./snack-bar.m.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * Компонент для вывода изображения в Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+function SnackBarImage(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: snack_bar_m_scss_1.default.image, children: (0, jsx_runtime_1.jsx)("img", { ...props }) }));
+}
+/**
+ * Компонент для вывода иконки в Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+function Icon({ icon, onClick, className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(snack_bar_m_scss_1.default.icon, className), onClick: onClick
+            ? event => {
+                event.stopPropagation();
+                onClick(event);
+            }
+            : undefined, ...props, children: icon }));
+}
+/**
+ * Компонент для вывода иконки в начале контента Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+const SnackBarStartIcon = (props) => (0, jsx_runtime_1.jsx)(Icon, { ...props });
+exports.SnackBarStartIcon = SnackBarStartIcon;
+/**
+ * Компонент для вывода иконки в конце контента Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+const SnackBarEndIcon = (props) => (0, jsx_runtime_1.jsx)(Icon, { ...props });
+exports.SnackBarEndIcon = SnackBarEndIcon;
+/**
+ * Компонент для вывода заголовка в Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+function SnackBarTitle({ children, className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(snack_bar_m_scss_1.default.title, className), ...props, children: children }));
+}
+/**
+ * Компонент для вывода подзаголовка в Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+function SnackBarSubtitle({ children, className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(snack_bar_m_scss_1.default.subtitle, className), ...props, children: children }));
+}
+//# sourceMappingURL=slots.js.map

package/snack-bar/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../../src/snack-bar/slots.tsx"],"names":[],"mappings":";;;;;;AAUA,sCAMC;AA6CD,sCAMC;AAOD,4CAUC;;AApFD,0EAAwC;AAExC,4DAA4B;AAG5B;;;;GAIG;AACH,SAAgB,aAAa,CAAC,KAAyB;IACrD,OAAO,CACL,gCAAK,SAAS,EAAE,0BAAM,CAAC,KAAK,YAC1B,mCAAS,KAAK,GAAI,GACd,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAS,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAqB;IACrE,OAAO,CACL,gCACE,SAAS,EAAE,IAAA,oBAAE,EAAC,0BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EACrC,OAAO,EACL,OAAO;YACL,CAAC,CAAC,KAAK,CAAC,EAAE;gBACN,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC;YACH,CAAC,CAAC,SAAS,KAEX,KAAK,YAER,IAAI,GACD,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,uBAAC,IAAI,OAAK,KAAK,GAAI,CAAC;AAAtE,QAAA,iBAAiB,qBAAqD;AAEnF;;;;GAIG;AACI,MAAM,eAAe,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,uBAAC,IAAI,OAAK,KAAK,GAAI,CAAC;AAApE,QAAA,eAAe,mBAAqD;AAEjF;;;;GAIG;AACH,SAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IAC7F,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,0BAAM,CAAC,KAAK,EAAE,SAAS,CAAC,KAAM,KAAK,YACnD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACuB;IAC/B,OAAO,CACL,gCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,0BAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,KAAM,KAAK,YACtD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/snack-bar/snack-bar.d.ts

@@ -0,0 +1,7 @@
+import { SnackBarProps } from './types';
+/**
+ * Компонент Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+export declare function SnackBar({ onClick, children, className, onMount, ...props }: SnackBarProps): import("react/jsx-runtime").JSX.Element;

package/snack-bar/snack-bar.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackBar = SnackBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("../button");
+const helpers_1 = require("../helpers");
+const text_button_1 = require("../text-button");
+const snack_bar_m_scss_1 = __importDefault(require("./snack-bar.m.scss"));
+const slots_1 = require("./slots");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * Компонент Snackbar.
+ * @param props Параметры.
+ * @return Элемент.
+ */
+function SnackBar({ onClick, children, className, onMount, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const { image, title, subtitle, startIcon, button, textButton, endIcon } = (0, helpers_1.defineSlots)(children, {
+        image: slots_1.SnackBarImage,
+        startIcon: slots_1.SnackBarStartIcon,
+        title: slots_1.SnackBarTitle,
+        subtitle: slots_1.SnackBarSubtitle,
+        button: button_1.Button,
+        textButton: text_button_1.TextButton,
+        endIcon: slots_1.SnackBarEndIcon,
+    });
+    (0, react_1.useEffect)(() => {
+        onMount?.();
+    }, []);
+    const asButtonProps = { tabIndex: props.tabIndex || 0, role: props.role || 'button' };
+    const hasButton = Boolean(button || textButton);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(snack_bar_m_scss_1.default.root, snack_bar_m_scss_1.default.shown, className), onClick: !hasButton ? onClick : undefined, ref: ref, ...(!hasButton && asButtonProps), ...props, children: [image || startIcon, title && ((0, jsx_runtime_1.jsxs)("div", { className: snack_bar_m_scss_1.default.content, children: [title, subtitle] })), hasButton && ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: snack_bar_m_scss_1.default.button, ...asButtonProps, children: button || textButton })), endIcon] }));
+}
+//# sourceMappingURL=snack-bar.js.map

package/snack-bar/snack-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snack-bar.js","sourceRoot":"","sources":["../../src/snack-bar/snack-bar.tsx"],"names":[],"mappings":";;;;;AAoBA,4BA2CC;;AA/DD,sCAAmC;AACnC,wCAAyC;AACzC,gDAA4C;AAE5C,0EAAwC;AACxC,mCAMiB;AACjB,iCAA0C;AAC1C,4DAA4B;AAE5B;;;;GAIG;AACH,SAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAiB;IACzF,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAA,qBAAW,EAAC,QAAQ,EAAE;QAC/F,KAAK,EAAE,qBAAa;QACpB,SAAS,EAAE,yBAAiB;QAC5B,KAAK,EAAE,qBAAa;QACpB,QAAQ,EAAE,wBAAgB;QAC1B,MAAM,EAAE,eAAM;QACd,UAAU,EAAE,wBAAU;QACtB,OAAO,EAAE,uBAAe;KACzB,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;IAEtF,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,IAAI,UAAU,CAAC,CAAC;IAEhD,OAAO,CACL,iCACE,SAAS,EAAE,IAAA,oBAAE,EAAC,0BAAM,CAAC,IAAI,EAAE,0BAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EACnD,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzC,GAAG,EAAE,GAAG,KACJ,CAAC,CAAC,SAAS,IAAI,aAAa,CAAC,KAC7B,KAAK,aAER,KAAK,IAAI,SAAS,EAClB,KAAK,IAAI,CACR,iCAAK,SAAS,EAAE,0BAAM,CAAC,OAAO,aAC3B,KAAK,EACL,QAAQ,IACL,CACP,EACA,SAAS,IAAI,CACZ,gCAAK,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,0BAAM,CAAC,MAAM,KAAM,aAAa,YAC/D,MAAM,IAAI,UAAU,GACjB,CACP,EACA,OAAO,IACJ,CACP,CAAC;AACJ,CAAC"}

package/snack-bar/snack-bar.m.scss

@@ -0,0 +1,102 @@
+@use '../colors';
+@use '../breakpoints.scss';
+
+.root {
+  --max-width: 464px;
+  --snackbar-bottom-gap: 12px;
+  background: colors.$basic-gray76;
+  border-radius: 10px;
+  padding: 12px;
+  display: flex;
+  width: fit-content;
+  max-width: var(--max-width);
+  position: fixed;
+  bottom: var(--snackbar-bottom-gap);
+  // частично иммитируем поведение layout
+  margin: 0 auto;
+  @include breakpoints.up('xs') {
+    --snackbar-bottom-gap: 40px;
+  }
+  @include breakpoints.down('ms') {
+    left: var(--snackbar-position-left, 8px);
+    margin-right: 8px;
+  }
+  @include breakpoints.up('ms') {
+    @include breakpoints.down('xs') {
+      left: var(--snackbar-position-left, 50%);
+      margin-left: calc(-1 * (var(--max-width) / 2));
+    }
+  }
+  @include breakpoints.up('xs') {
+    @include breakpoints.down('l') {
+      left: var(--snackbar-position-left, 56px);
+    }
+  }
+  @include breakpoints.up('l') {
+    @include breakpoints.down('xl') {
+      // 1472 - максимальная ширина контейнера Layout на данном разрешении.
+      left: var(--snackbar-position-left, calc(((100% - 1472px) / 2) - 8px));
+    }
+  }
+  @include breakpoints.up('xl') {
+    // 1504 - максимальная ширина контейнера Layout на данном разрешении.
+    left: var(--snackbar-position-left, calc(((100% - 1504px) / 2) - 8px));
+  }
+  .icon:last-child,
+  .button:last-child {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-right: -12px;
+  }
+  .button {
+    padding-left: 12px;
+  }
+}
+
+.image + .content,
+.icon + .content {
+  margin-left: 8px;
+}
+
+.content {
+  .title,
+  .subtitle {
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  margin-top: -12px;
+  margin-bottom: -12px;
+}
+
+.image {
+  display: flex;
+  align-items: center;
+  img {
+    height: 40px;
+  }
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  margin-top: -12px;
+  margin-bottom: -12px;
+}
+
+.title {
+  color: colors.$basic-white;
+}
+
+.subtitle {
+  color: colors.$basic-gray38;
+}

package/snack-bar/types.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { WithTestId } from '../types';
+export interface SnackBarProps extends HTMLAttributes<HTMLDivElement>, WithTestId {
+    /** Будет вызван при мoнтировании. */
+    onMount?: VoidFunction;
+}
+export interface SnackBarImageProps extends HTMLAttributes<HTMLImageElement> {
+    src: string;
+}
+export interface SnackBarIconProps extends HTMLAttributes<HTMLDivElement> {
+    icon: ReactNode;
+}

package/snack-bar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/snack-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/snack-bar/types.ts"],"names":[],"mappings":""}

package/snack-bar/utils.d.ts

@@ -0,0 +1,302 @@
+import { SnackBarProps } from './types';
+import { CSSProperties, RefObject, TouchEvent } from 'react';
+type CSSPosition = CSSProperties & {
+    '--snackbar-position-bottom'?: string;
+    '--snackbar-position-left'?: string;
+    '--snackbar-transition-duration'?: string;
+};
+/**
+ * Хук для управления позиционированием (анимированным появлением/исчезанием) SnackBar.
+ * @param config Конфиг.
+ * @param config.props Свойства SnackBar.
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @return Состояние перехода и Свойства SnackBar.
+ */
+export declare function useSnackBarPositioning({ shown, onClose, relatedRef, timeout, duration, props, }: {
+    shown: boolean;
+    onClose: VoidFunction;
+    relatedRef?: RefObject<HTMLElement>;
+    timeout?: number;
+    duration?: number;
+    props?: SnackBarProps;
+}): {
+    state: Readonly<{
+        status: import("react-transition-state").TransitionStatus;
+        isMounted: boolean;
+        isEnter: boolean;
+        isResolved: boolean;
+    }>;
+    snackBarProps: {
+        className: string;
+        style: CSSPosition;
+        onMount: (() => void) | undefined;
+        onTouchStart: (event: TouchEvent<HTMLElement>) => void;
+        onTouchEnd: (event: TouchEvent<HTMLElement>) => void;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | ReadonlyArray<string> | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-braillelabel'?: string | undefined;
+        'aria-brailleroledescription'?: string | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colindextext'?: string | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-description'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowindextext'?: string | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        children?: import("react").ReactNode | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        'data-testid'?: string;
+    };
+};
+export {};

package/snack-bar/utils.js

@@ -0,0 +1,164 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackBarPositioning = useSnackBarPositioning;
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../hooks");
+const react_transition_state_1 = require("react-transition-state");
+const react_1 = require("react");
+const utils_m_scss_1 = __importDefault(require("./utils.m.scss"));
+const bounds_of_1 = require("../helpers/bounds-of");
+const context_1 = require("./context");
+const SWIPE_THRESHOLD = 50;
+/**
+ * Хук для управления позиционированием (анимированным появлением/исчезанием) SnackBar.
+ * @param config Конфиг.
+ * @param config.props Свойства SnackBar.
+ * Неиспользуемые свойства будут выведены в результат без изменений.
+ * @return Состояние перехода и Свойства SnackBar.
+ */
+function useSnackBarPositioning({ shown, onClose, relatedRef, timeout = 300, duration = 4000, props, }) {
+    const timeoutId = (0, react_1.useRef)();
+    const hideStyle = (0, react_1.useRef)({});
+    const touchStart = (0, react_1.useRef)({ x: 0, y: 0 });
+    const closeRef = (0, react_1.useRef)();
+    const { closePrevious, setClose } = (0, react_1.useContext)(context_1.SnackbarContext);
+    const [state, toggle] = (0, react_transition_state_1.useTransition)({
+        initialEntered: shown,
+        preEnter: true,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        timeout,
+    });
+    let style = { ...props?.style, ['--snackbar-transition-duration']: `${timeout}ms` };
+    const onPreEnter = (0, react_1.useCallback)(() => {
+        if (!closePrevious || closePrevious !== closeRef.current) {
+            closePrevious?.();
+            closeRef.current = () => {
+                hideStyle.current = {
+                    ...getEnteredStyle(relatedRef?.current),
+                    opacity: 0,
+                };
+                onClose();
+            };
+        }
+        setClose?.({ closePrevious: closeRef.current });
+    }, [closePrevious, setClose, closeRef]);
+    if (state.status === 'entering' || state.status === 'entered') {
+        style = { ...style, ...getEnteredStyle(relatedRef?.current) };
+    }
+    if (state.status === 'entered') {
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(onClose, duration);
+    }
+    else if (state.status === 'exiting') {
+        clearTimeout(timeoutId.current);
+        style = { ...style, ...hideStyle.current };
+    }
+    else if (state.status === 'unmounted') {
+        hideStyle.current = {};
+    }
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        toggle(shown);
+    }, [shown]);
+    return {
+        state,
+        snackBarProps: {
+            ...props,
+            className: (0, classnames_1.default)(props?.className, utils_m_scss_1.default.animated),
+            style,
+            onMount: state.status === 'preEnter' ? onPreEnter : undefined,
+            // ТО DO вынести логику определения свайпа в отдельный хук.
+            onTouchStart: (0, react_1.useCallback)((event) => {
+                event.stopPropagation();
+                touchStart.current = {
+                    x: event.changedTouches[0].clientX,
+                    y: event.changedTouches[0].clientY,
+                };
+            }, [touchStart]),
+            onTouchEnd: (0, react_1.useCallback)((event) => {
+                event.stopPropagation();
+                const direction = getSwipeDirection(touchStart.current, {
+                    x: event.changedTouches[0].clientX,
+                    y: event.changedTouches[0].clientY,
+                });
+                const distance = Math.sqrt(Math.pow(event.changedTouches[0].clientX - touchStart.current.x, 2) +
+                    Math.pow(event.changedTouches[0].clientY - touchStart.current.y, 2));
+                if (distance >= SWIPE_THRESHOLD) {
+                    hideStyle.current = getSwipeCloseStyle(event.currentTarget, direction);
+                    onClose();
+                }
+            }, [touchStart, hideStyle]),
+        },
+    };
+}
+/**
+ * Определяет направление свайпа.
+ * @param start Начальная точка касания.
+ * @param end Конечная точка касания.
+ * @return Направление свайпа.
+ */
+function getSwipeDirection(start, end) {
+    const xDistance = start.x - end.x;
+    const yDistance = start.y - end.y;
+    if (Math.abs(xDistance) > Math.abs(yDistance)) {
+        return xDistance > 0 ? 'left' : 'right';
+    }
+    return yDistance > 0 ? 'up' : 'down';
+}
+/**
+ * Формирует стили для запуска анимации скрытия элемент на свайп по нему.
+ * @param target Элемент для которого произошло событие свайпа.
+ * @param direction Направление свайпа.
+ * @return Набор CSS-переменных для анимированного изменения положения элемента.
+ */
+function getSwipeCloseStyle(target, direction) {
+    const { height, width, left } = (0, bounds_of_1.boundsOf)(target);
+    const position = {
+        '--snackbar-position-bottom': target.style.getPropertyValue('--snackbar-position-bottom'),
+    };
+    if (direction === 'left') {
+        position['--snackbar-position-left'] = '-100%';
+        position.width = `${width}px`;
+    }
+    else if (direction === 'right') {
+        position['--snackbar-position-left'] = `calc(100vw - ${left}px + 100%)`;
+        position.width = `${width}px`;
+    }
+    else if (direction === 'up') {
+        position['--snackbar-position-bottom'] =
+            `calc(100vh - ${position['--snackbar-position-bottom']} + ${height}px)`;
+    }
+    else {
+        position['--snackbar-position-bottom'] = undefined;
+    }
+    return position;
+}
+/**
+ * Формирует стили для анимированного появления элемента.
+ * @param relative Элемент относительно которого ведётся расчёт.
+ * @return Набор CSS-переменных для анимированного изменения положения элемента.
+ */
+function getEnteredStyle(relative) {
+    const relativeBottom = relative ? getRelativeBottom(relative) : 0;
+    return {
+        ['--snackbar-position-bottom']: `calc(${relativeBottom}px + var(--snackbar-bottom-gap, 12px))`,
+    };
+}
+/**
+ * Вычисляет расстояние от нижней границы экрана для элемента SnackBar, относительно переданного элемента в соответствии с дизайн-гайдами.
+ * @param relative Элемент на основе положения которого ведётся расчёт.
+ * @return Расстояние от нижней границы экрана в пикселях.
+ */
+function getRelativeBottom(relative) {
+    const bottom = Number(getComputedStyle(relative)?.bottom.replace('px', ''));
+    const { height, bottom: rectBottom } = (0, bounds_of_1.boundsOf)(relative);
+    // Определяем зафиксирован ли внизу экрана элемент относительно которого ведётся расчёт.
+    if (rectBottom === window.innerHeight - bottom) {
+        return bottom + height;
+    }
+    return 0;
+}
+//# sourceMappingURL=utils.js.map

package/snack-bar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/snack-bar/utils.tsx"],"names":[],"mappings":"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"}

package/snack-bar/utils.m.scss

@@ -0,0 +1,7 @@
+.animated {
+  transition:
+    bottom var(--snackbar-transition-duration, 300ms) ease-out,
+    left var(--snackbar-transition-duration, 300ms) ease-out,
+    opacity var(--snackbar-transition-duration, 300ms) ease-out;
+  bottom: var(--snackbar-position-bottom, -110px);
+}