@snack-uikit/toaster 0.11.20 → 0.11.21-preview-83f569e2.0

package/README.md

@@ -6,6 +6,160 @@
 
 [Changelog](./CHANGELOG.md)
 
+## Description
+
+- Пакет `@snack-uikit/toaster` предоставляет систему уведомлений (тостеров) для отображения временных сообщений пользователю: системных событий, результатов действий пользователя и прогресса загрузки файлов.
+- Компоненты автоматически управляют жизненным циклом уведомлений (автозакрытие, позиционирование, лимит количества), поддерживают программное создание, обновление и закрытие через объект `toaster`, а также работают с разными визуальными вариантами (appearance) для передачи типа сообщения.
+- Каждый тип тостера предназначен для своего сценария: `ToastSystemEvent` — для важных системных уведомлений с заголовком и описанием, `ToastUserAction` — для кратких сообщений о результатах действий пользователя, `ToastUpload` — для отслеживания прогресса загрузки файлов с возможностью управления процессом.
+
+## ToastSystemEvent
+
+### Description
+
+- `ToastSystemEvent` — компонент для отображения системных уведомлений о важных событиях приложения (успешные операции, ошибки, предупреждения, информационные сообщения).
+- Поддерживает **разные типы статусов** через проп `appearance` (neutral, success, error, errorCritical, warning) с соответствующей иконкой и цветовой схемой.
+- Позволяет задать **заголовок и описание** с автоматическим усечением длинных текстов (заголовок до 2 строк, описание до 4 строк).
+- Может отображать **прогресс-бар** (`progressBar`), показывающий оставшееся время до автозакрытия уведомления.
+- Поддерживает **кнопку закрытия** (`closable`) с возможностью кастомизации обработчика (`onCloseClick`).
+- Позволяет добавить **текстовую ссылку** (`link`) и **кнопки действий в футере** (`action`) для выполнения связанных с уведомлением операций.
+- Figma: [`ToastSystemEvent`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A196736&mode=design).
+
+### Example
+
+```tsx
+import { toaster } from '@snack-uikit/toaster';
+
+// Создание системного уведомления
+const toastId = await toaster.systemEvent.success({
+  title: 'Настройки сохранены',
+  description: 'Новые параметры будут применены при следующем входе в систему.',
+  link: {
+    text: 'Изменить ещё раз',
+    href: '#',
+  },
+  action: [
+    { label: 'Отменить', onClick: () => console.log('Revert') },
+    { label: 'Подробнее', onClick: () => console.log('Details') },
+  ],
+  progressBar: true,
+  closable: true,
+});
+
+// Обновление существующего уведомления
+toaster.systemEvent.update.error(toastId, {
+  title: 'Ошибка сохранения',
+  description: 'Не удалось сохранить изменения. Попробуйте ещё раз.',
+});
+
+// Закрытие уведомления
+toaster.systemEvent.dismiss(toastId);
+```
+
+## ToastUserAction
+
+### Description
+
+- `ToastUserAction` — компонент для отображения кратких уведомлений о результатах действий пользователя (успешное выполнение операции, ошибка, предупреждение).
+- Поддерживает **разные типы статусов** через проп `appearance` (neutral, success, error, warning) с соответствующей иконкой и цветовой схемой.
+- Отображает **краткий текст** (`label`) без описания, что делает уведомление компактным и ненавязчивым.
+- Может показывать **состояние загрузки** (`loading`) с анимацией вместо иконки статуса.
+- Поддерживает **текстовую ссылку** (`link`) для перехода к связанному контенту или действию.
+- Отличается от `ToastSystemEvent` более компактным размером и отсутствием заголовка, описания и кнопок действий, что делает его подходящим для быстрых обратных связей на действия пользователя.
+- Figma: [`ToastUserAction`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A197658&mode=design).
+
+### Example
+
+```tsx
+import { toaster } from '@snack-uikit/toaster';
+
+// Создание уведомления о действии пользователя
+const toastId = await toaster.userAction.success({
+  label: 'Файл успешно загружен',
+  link: {
+    text: 'Открыть',
+    href: '#',
+  },
+});
+
+// Обновление уведомления с состоянием загрузки
+toaster.userAction.update.neutral(toastId, {
+  label: 'Обработка файла...',
+  loading: true,
+});
+
+// Закрытие уведомления
+toaster.userAction.dismiss(toastId);
+```
+
+## ToastUpload
+
+### Description
+
+- `ToastUpload` — компонент для отображения прогресса загрузки одного или нескольких файлов с возможностью управления процессом (пауза, продолжение, повтор при ошибке, отмена).
+- Отображает **список файлов** (`files`) с индивидуальным прогрессом каждого файла, его статусом (loading, pause, error, uploaded, errorUploaded) и возможностью управления через действия (`actions`).
+- Показывает **общий прогресс загрузки** (`progress`) в виде счётчика (current/total) и процентов, а также прогресс-бар при свёрнутом состоянии.
+- Поддерживает **разные статусы загрузки** (`status`) с соответствующим визуальным оформлением и доступными действиями (продолжить, приостановить, повторить).
+- Позволяет **сворачивать и разворачивать** список файлов (`collapsed`, `onCollapsed`) для экономии места на экране.
+- Может быть **перемещаемым** (`draggable`) с ограничениями области перемещения (`draggableBounds`).
+- Поддерживает **кнопку отмены всей загрузки** (`cancelButton`) и **кнопку закрытия** (`closable`).
+- Отображает **заголовок** (`title`) и **описание статуса** (`description`) для информирования пользователя о текущем состоянии загрузки.
+- Figma: [`ToastUpload`](https://www.figma.com/design/jtGxAPvFJOMir7V0eQFukN/branch/qzePfVaHqZdDKogF2PYKRL/Snack-UI-Kit-5.0.0?node-id=17463-61268&t=O9Jb62r0iZv5zcdY-0).
+
+### Example
+
+```tsx
+import { toaster } from '@snack-uikit/toaster';
+
+// Создание или обновление уведомления о загрузке
+const toastId = toaster.upload.startOrUpdate({
+  title: 'Загрузка файлов',
+  description: '3 минуты осталось',
+  status: 'loading',
+  progress: {
+    current: 4,
+    total: 10,
+  },
+  files: [
+    {
+      id: '1',
+      title: 'document.pdf',
+      formattedSize: '45 MB',
+      progress: 50,
+      status: 'loading',
+      statusLabel: 'Загрузка...',
+      actions: {
+        onPause: () => console.log('Pause file 1'),
+        onRetry: () => console.log('Retry file 1'),
+      },
+    },
+    {
+      id: '2',
+      title: 'image.jpg',
+      formattedSize: '12 MB',
+      progress: 100,
+      status: 'uploaded',
+      statusLabel: 'Загружено',
+      link: { href: '#', text: 'Открыть' },
+    },
+  ],
+  generalActions: {
+    onContinue: () => console.log('Continue all'),
+    onPause: () => console.log('Pause all'),
+    onRetry: () => console.log('Retry all'),
+  },
+  cancelButton: {
+    label: 'Отменить все',
+    onClick: () => console.log('Cancel all'),
+  },
+  closable: true,
+  collapsed: false,
+  draggable: true,
+});
+
+// Закрытие уведомления
+toaster.upload.dismiss(toastId);
+```
+
 ## Usage
 
 ```typescript
@@ -50,8 +204,9 @@ toaster.upload.dismiss(uploadToastId);
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | title* | `string` | - |  |
-| closeToast | `() => void` | - |  |
+| closeToast | `CloseToastFunc` | - |  |
 | toastProps | `ToastProps` | - |  |
+| isPaused | `boolean` | - |  |
 | data | `unknown` | - |  |
 | description | `string` | - |  |
 | appearance | enum ToastSystemEventAppearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral |  |
@@ -67,8 +222,9 @@ toaster.upload.dismiss(uploadToastId);
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | label* | `string` | - |  |
-| closeToast | `() => void` | - |  |
+| closeToast | `CloseToastFunc` | - |  |
 | toastProps | `ToastProps` | - |  |
+| isPaused | `boolean` | - |  |
 | data | `unknown` | - |  |
 | appearance | enum ToastUserActionAppearance: `"neutral"`, `"error"`, `"warning"`, `"success"` | neutral |  |
 | link | `ToastUserActionLink` | - |  |
@@ -83,6 +239,7 @@ toaster.upload.dismiss(uploadToastId);
 | containerId | `Id` | - |  |
 | displayCloseAllButton | `boolean` | - |  |
 | type | enum ToasterType: `"system-event"`, `"user-action"`, `"upload"` | system-event |  |
+| draggable | `boolean` | - |  |
 ## ToastUpload
 ### Props
 | name | type | default value | description |
@@ -92,8 +249,9 @@ toaster.upload.dismiss(uploadToastId);
 | progress* | `{ current: number; total: number; }` | - | Общий прогресс загрузки |
 | description* | `string` | - | Описание статуса загрузки |
 | status* | enum ToastUploadStatus: `"error"`, `"loading"`, `"pause"`, `"uploaded"`, `"errorUploaded"` | - | Общий статус загрузки |
-| closeToast | `() => void` | - |  |
+| closeToast | `CloseToastFunc` | - |  |
 | toastProps | `ToastProps` | - |  |
+| isPaused | `boolean` | - |  |
 | data | `unknown` | - |  |
 | title | `string` | - | Заголовок тостера |
 | onCloseClick | `(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void` | - | Закрыть тостер |

package/dist/cjs/components/ToasterContainer/ToasterContainer.d.ts

@@ -7,5 +7,6 @@ export type ToasterContainerProps = {
     containerId?: RtToastContainerProps['containerId'];
     displayCloseAllButton?: boolean;
     type?: ToasterType;
+    draggable?: boolean;
 };
-export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, draggable, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ToasterContainer/ToasterContainer.js

@@ -14,6 +14,7 @@ require("./style.css");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const react_toastify_1 = require("react-toastify");
+const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const testIds_1 = require("../../testIds");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -23,7 +24,8 @@ function ToasterContainer(_ref) {
     limit = 5,
     containerId,
     displayCloseAllButton,
-    type = constants_1.TOASTER_TYPE.SystemEvent
+    type = constants_1.TOASTER_TYPE.SystemEvent,
+    draggable = false
   } = _ref;
   const [notificationCounter, setNotificationCounter] = (0, react_1.useState)(0);
   const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = (0, react_1.useState)(false);
@@ -31,7 +33,7 @@ function ToasterContainer(_ref) {
     react_toastify_1.toast.dismiss();
     setIsCloseAllButtonHidden(true);
   };
-  (0, react_1.useEffect)(() => {
+  (0, utils_1.useLayoutEffect)(() => {
     const unsubscribe = react_toastify_1.toast.onChange(_ref2 => {
       let {
         status,
@@ -56,7 +58,7 @@ function ToasterContainer(_ref) {
       closeOnClick: false,
       autoClose: false,
       closeButton: false,
-      draggable: false,
+      draggable: draggable,
       className: (0, classnames_1.default)('osThemeSnack', styles_module_scss_1.default[position], {
         [styles_module_scss_1.default.containerWithCloseAllButton]: hasCloseAllButton,
         'osThemeSnack__toast-container__system-event': type === constants_1.TOASTER_TYPE.SystemEvent,
@@ -64,7 +66,6 @@ function ToasterContainer(_ref) {
         'osThemeSnack__toast-container__upload': type === constants_1.TOASTER_TYPE.Upload
       }),
       toastClassName: styles_module_scss_1.default.toaster,
-      bodyClassName: styles_module_scss_1.default.toaster,
       position: position,
       limit: limit,
       containerId: containerId

package/dist/cjs/components/ToasterContainer/styles.module.css

@@ -66,6 +66,7 @@
 }
 :global .osThemeSnack.Toastify__toast-container{
   position:fixed;
+  left:auto;
   box-sizing:border-box;
   padding:0;
 }
@@ -79,6 +80,7 @@
   display:flex;
   justify-content:space-between;
   box-sizing:border-box;
+  width:100%;
   min-height:unset;
   margin:0;
   padding:0;

package/dist/cjs/helpers.d.ts

@@ -7,5 +7,5 @@ export declare const updateToast: UpdateToast;
  * @function
  */
 export declare const dismissToast: (params?: Id) => void;
-export declare const isToastActive: typeof import("react-toastify/dist/core/store").isToastActive;
+export declare const isToastActive: (id: Id, containerId?: Id) => boolean;
 export declare const toaster: Toaster;

package/dist/cjs/helpers.js

@@ -50,12 +50,12 @@ function getToastOptions(_ref2) {
   } = _ref2;
   return {
     toastId: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.id,
-    onClose: data => {
-      var _a;
-      (_a = toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose) === null || _a === void 0 ? void 0 : _a.call(toastOptions, data === null || data === void 0 ? void 0 : data.id);
-    },
+    onClose: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose,
     autoClose: (toasterProps === null || toasterProps === void 0 ? void 0 : toasterProps.loading) ? false : constants_1.AUTO_CLOSE_TIME[type],
-    containerId: containerId || `${constants_1.TOASTER_CONTAINER_PREFIX}${type}`
+    containerId: containerId || `${constants_1.TOASTER_CONTAINER_PREFIX}${type}`,
+    draggable: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.draggable,
+    draggableDirection: type === constants_1.TOASTER_TYPE.UserAction ? 'y' : 'x',
+    draggablePercent: 30
   };
 }
 function getToastComponent(_ref3) {
@@ -150,7 +150,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -162,7 +163,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -174,7 +176,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -186,7 +189,8 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -196,7 +200,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'success'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     neutral(id, options) {
@@ -204,7 +211,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'neutral'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     warning(id, options) {
@@ -212,7 +222,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'warning'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     error(id, options) {
@@ -220,7 +233,10 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'error'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     }
   },
@@ -237,7 +253,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -249,7 +266,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -261,7 +279,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -273,7 +292,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -285,7 +305,8 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose
+        onClose: options.onClose,
+        draggable: options.draggable
       }
     });
   },
@@ -295,7 +316,10 @@ const systemEvent = {
         type: constants_1.TOASTER_TYPE.SystemEvent,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'success'
-        })
+        }),
+        toastOptions: {
+          draggable: options.draggable
+        }
       });
     },
     neutral(id, options) {

package/dist/cjs/types.d.ts

@@ -7,7 +7,8 @@ export type PromisedId = Promise<ToasterId>;
 export type ToastOptions = {
     id?: ToasterId;
     autoClose?: RtToastOptions['autoClose'];
-    onClose?(id?: ToasterId): void;
+    onClose?(reason?: boolean | string): void;
+    draggable?: boolean;
 };
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
@@ -34,8 +35,8 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(id: string | number,
     toastOptions?: ToastOptions;
     containerId?: ToasterContainerProps['containerId'];
 }) => void;
-export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
 export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 export type Toaster = {
     userAction: {

package/dist/esm/components/ToasterContainer/ToasterContainer.d.ts

@@ -7,5 +7,6 @@ export type ToasterContainerProps = {
     containerId?: RtToastContainerProps['containerId'];
     displayCloseAllButton?: boolean;
     type?: ToasterType;
+    draggable?: boolean;
 };
-export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, draggable, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToasterContainer/ToasterContainer.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './style.css';
 import cn from 'classnames';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { toast, ToastContainer as RtToastContainer, } from 'react-toastify';
+import { useLayoutEffect } from '@snack-uikit/utils';
 import { TOASTER_CONTAINER_PREFIX, TOASTER_TYPE } from '../../constants';
 import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
-export function ToasterContainer({ position = 'bottom-right', limit = 5, containerId, displayCloseAllButton, type = TOASTER_TYPE.SystemEvent, }) {
+export function ToasterContainer({ position = 'bottom-right', limit = 5, containerId, displayCloseAllButton, type = TOASTER_TYPE.SystemEvent, draggable = false, }) {
     const [notificationCounter, setNotificationCounter] = useState(0);
     const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = useState(false);
     const closeAll = () => {
         toast.dismiss();
         setIsCloseAllButtonHidden(true);
     };
-    useEffect(() => {
+    useLayoutEffect(() => {
         const unsubscribe = toast.onChange(({ status, containerId }) => {
             if (containerId === `${TOASTER_CONTAINER_PREFIX}${TOASTER_TYPE.SystemEvent}`) {
                 if (status === 'added') {
@@ -28,10 +29,10 @@ export function ToasterContainer({ position = 'bottom-right', limit = 5, contain
         return unsubscribe;
     }, []);
     const hasCloseAllButton = displayCloseAllButton && notificationCounter > 2 && !isCloseAllButtonHidden;
-    return (_jsxs(_Fragment, { children: [_jsx(RtToastContainer, { hideProgressBar: true, closeOnClick: false, autoClose: false, closeButton: false, draggable: false, className: cn('osThemeSnack', styles[position], {
+    return (_jsxs(_Fragment, { children: [_jsx(RtToastContainer, { hideProgressBar: true, closeOnClick: false, autoClose: false, closeButton: false, draggable: draggable, className: cn('osThemeSnack', styles[position], {
                     [styles.containerWithCloseAllButton]: hasCloseAllButton,
                     'osThemeSnack__toast-container__system-event': type === TOASTER_TYPE.SystemEvent,
                     'osThemeSnack__toast-container__user-action': type === TOASTER_TYPE.UserAction,
                     'osThemeSnack__toast-container__upload': type === TOASTER_TYPE.Upload,
-                }), toastClassName: styles.toaster, bodyClassName: styles.toaster, position: position, limit: limit, containerId: containerId }), hasCloseAllButton && (_jsx("div", { className: cn(styles.buttonCloseColumnWrapper, styles[position]), children: _jsx("button", { type: 'button', className: styles.buttonCloseColumn, onClick: closeAll, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonCloseColumn, children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" }) }))] }));
+                }), toastClassName: styles.toaster, position: position, limit: limit, containerId: containerId }), hasCloseAllButton && (_jsx("div", { className: cn(styles.buttonCloseColumnWrapper, styles[position]), children: _jsx("button", { type: 'button', className: styles.buttonCloseColumn, onClick: closeAll, "data-test-id": TOAST_SYSTEM_EVENT_TEST_IDS.buttonCloseColumn, children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" }) }))] }));
 }

package/dist/esm/components/ToasterContainer/styles.module.css

@@ -66,6 +66,7 @@
 }
 :global .osThemeSnack.Toastify__toast-container{
   position:fixed;
+  left:auto;
   box-sizing:border-box;
   padding:0;
 }
@@ -79,6 +80,7 @@
   display:flex;
   justify-content:space-between;
   box-sizing:border-box;
+  width:100%;
   min-height:unset;
   margin:0;
   padding:0;

package/dist/esm/helpers.d.ts

@@ -7,5 +7,5 @@ export declare const updateToast: UpdateToast;
  * @function
  */
 export declare const dismissToast: (params?: Id) => void;
-export declare const isToastActive: typeof import("react-toastify/dist/core/store").isToastActive;
+export declare const isToastActive: (id: Id, containerId?: Id) => boolean;
 export declare const toaster: Toaster;

package/dist/esm/helpers.js

@@ -34,12 +34,12 @@ function getToasterContainer({ type, toasterParent, containerProps, }) {
 function getToastOptions({ type, toastOptions, containerId, toasterProps, }) {
     return {
         toastId: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.id,
-        onClose: ((data) => {
-            var _a;
-            (_a = toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose) === null || _a === void 0 ? void 0 : _a.call(toastOptions, data === null || data === void 0 ? void 0 : data.id);
-        }),
+        onClose: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose,
         autoClose: (toasterProps === null || toasterProps === void 0 ? void 0 : toasterProps.loading) ? false : AUTO_CLOSE_TIME[type],
         containerId: containerId || `${TOASTER_CONTAINER_PREFIX}${type}`,
+        draggable: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.draggable,
+        draggableDirection: type === TOASTER_TYPE.UserAction ? 'y' : 'x',
+        draggablePercent: 30,
     };
 }
 function getToastComponent({ type, toasterProps, }) {
@@ -100,6 +100,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -110,6 +111,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -120,6 +122,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -130,6 +133,7 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -138,24 +142,36 @@ const userAction = {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         neutral(id, options) {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'neutral' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         warning(id, options) {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'warning' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         error(id, options) {
             updateToast(id, {
                 type: TOASTER_TYPE.UserAction,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'error' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
     },
@@ -171,6 +187,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -181,6 +198,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -191,6 +209,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -201,6 +220,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -211,6 +231,7 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
+                draggable: options.draggable,
             },
         });
     },
@@ -219,6 +240,9 @@ const systemEvent = {
             return updateToast(id, {
                 type: TOASTER_TYPE.SystemEvent,
                 toasterProps: Object.assign(Object.assign({}, options), { appearance: 'success' }),
+                toastOptions: {
+                    draggable: options.draggable,
+                },
             });
         },
         neutral(id, options) {

package/dist/esm/types.d.ts

@@ -7,7 +7,8 @@ export type PromisedId = Promise<ToasterId>;
 export type ToastOptions = {
     id?: ToasterId;
     autoClose?: RtToastOptions['autoClose'];
-    onClose?(id?: ToasterId): void;
+    onClose?(reason?: boolean | string): void;
+    draggable?: boolean;
 };
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
@@ -34,8 +35,8 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(id: string | number,
     toastOptions?: ToastOptions;
     containerId?: ToasterContainerProps['containerId'];
 }) => void;
-export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
 export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 export type Toaster = {
     userAction: {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toaster",
-  "version": "0.11.20",
+  "version": "0.11.21-preview-83f569e2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -44,12 +44,12 @@
     "@snack-uikit/truncate-string": "0.7.6",
     "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1",
-    "react-draggable": "4.4.6",
-    "react-toastify": "10.0.5",
+    "react-draggable": "4.5.0",
+    "react-toastify": "11.0.5",
     "uncontrollable": "9.0.0"
   },
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6b39e180766635f8190da903bf560d1fbcbfaf52"
+  "gitHead": "7e7545cd231d23db02cc090a3199a142383ecfc0"
 }

package/src/components/ToasterContainer/ToasterContainer.tsx

@@ -1,7 +1,7 @@
 import './style.css';
 
 import cn from 'classnames';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import {
   toast,
   ToastContainer as RtToastContainer,
@@ -10,6 +10,8 @@ import {
   ToastPosition,
 } from 'react-toastify';
 
+import { useLayoutEffect } from '@snack-uikit/utils';
+
 import { TOASTER_CONTAINER_PREFIX, TOASTER_TYPE } from '../../constants';
 import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
 import { ToasterType } from '../../types';
@@ -21,6 +23,7 @@ export type ToasterContainerProps = {
   containerId?: RtToastContainerProps['containerId'];
   displayCloseAllButton?: boolean;
   type?: ToasterType;
+  draggable?: boolean;
 };
 
 export function ToasterContainer({
@@ -29,6 +32,7 @@ export function ToasterContainer({
   containerId,
   displayCloseAllButton,
   type = TOASTER_TYPE.SystemEvent,
+  draggable = false,
 }: ToasterContainerProps) {
   const [notificationCounter, setNotificationCounter] = useState(0);
   const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = useState(false);
@@ -37,7 +41,7 @@ export function ToasterContainer({
     setIsCloseAllButtonHidden(true);
   };
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const unsubscribe = toast.onChange(({ status, containerId }: ToastItem) => {
       if (containerId === `${TOASTER_CONTAINER_PREFIX}${TOASTER_TYPE.SystemEvent}`) {
         if (status === 'added') {
@@ -62,7 +66,7 @@ export function ToasterContainer({
         closeOnClick={false}
         autoClose={false}
         closeButton={false}
-        draggable={false}
+        draggable={draggable}
         className={cn('osThemeSnack', styles[position], {
           [styles.containerWithCloseAllButton]: hasCloseAllButton,
           'osThemeSnack__toast-container__system-event': type === TOASTER_TYPE.SystemEvent,
@@ -70,7 +74,6 @@ export function ToasterContainer({
           'osThemeSnack__toast-container__upload': type === TOASTER_TYPE.Upload,
         })}
         toastClassName={styles.toaster}
-        bodyClassName={styles.toaster}
         position={position}
         limit={limit}
         containerId={containerId}

package/src/components/ToasterContainer/styles.module.scss

@@ -76,6 +76,7 @@ $theme-name: osThemeSnack;
 :global {
   .#{$theme-name}.Toastify__toast-container {
     position: fixed;
+    left: auto;
     box-sizing: border-box;
     padding: 0;
 
@@ -94,6 +95,7 @@ $theme-name: osThemeSnack;
       justify-content: space-between;
 
       box-sizing: border-box;
+      width: 100%;
       min-height: unset;
       margin: 0;
       padding: 0;

package/src/helpers.tsx

@@ -80,11 +80,12 @@ function getToastOptions<T extends keyof ToasterPropsMap>({
 }): RtToastOptions {
   return {
     toastId: toastOptions?.id,
-    onClose: ((data: { id: ToasterId }) => {
-      toastOptions?.onClose?.(data?.id);
-    }) as RtToastOptions['onClose'],
+    onClose: toastOptions?.onClose,
     autoClose: toasterProps?.loading ? false : AUTO_CLOSE_TIME[type],
     containerId: containerId || `${TOASTER_CONTAINER_PREFIX}${type}`,
+    draggable: toastOptions?.draggable,
+    draggableDirection: type === TOASTER_TYPE.UserAction ? 'y' : 'x',
+    draggablePercent: 30,
   };
 }
 
@@ -172,6 +173,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -183,6 +185,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -194,6 +197,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -205,6 +209,7 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -214,6 +219,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'success' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 
@@ -221,6 +229,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'neutral' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 
@@ -228,6 +239,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'warning' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 
@@ -235,6 +249,9 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'error' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
   },
@@ -252,6 +269,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -263,6 +281,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -274,6 +293,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -285,6 +305,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -296,6 +317,7 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
+        draggable: options.draggable,
       },
     });
   },
@@ -305,6 +327,9 @@ const systemEvent = {
       return updateToast(id, {
         type: TOASTER_TYPE.SystemEvent,
         toasterProps: { ...options, appearance: 'success' },
+        toastOptions: {
+          draggable: options.draggable,
+        },
       });
     },
 

package/src/types.ts

@@ -11,7 +11,8 @@ export type PromisedId = Promise<ToasterId>;
 export type ToastOptions = {
   id?: ToasterId;
   autoClose?: RtToastOptions['autoClose'];
-  onClose?(id?: ToasterId): void;
+  onClose?(reason?: boolean | string): void;
+  draggable?: boolean;
 };
 
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
@@ -48,8 +49,10 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(
   },
 ) => void;
 
-export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> &
+  Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> &
+  Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
 export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 
 export type Toaster = {