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

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.11.21 (2026-01-19)</small>
+
+* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
+* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
+* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
+
+
+
+
+
 ## <small>0.11.20 (2025-11-28)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -204,9 +204,8 @@ toaster.upload.dismiss(uploadToastId);
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | title* | `string` | - |  |
-| closeToast | `CloseToastFunc` | - |  |
+| closeToast | `() => void` | - |  |
 | toastProps | `ToastProps` | - |  |
-| isPaused | `boolean` | - |  |
 | data | `unknown` | - |  |
 | description | `string` | - |  |
 | appearance | enum ToastSystemEventAppearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral |  |
@@ -222,9 +221,8 @@ toaster.upload.dismiss(uploadToastId);
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | label* | `string` | - |  |
-| closeToast | `CloseToastFunc` | - |  |
+| closeToast | `() => void` | - |  |
 | toastProps | `ToastProps` | - |  |
-| isPaused | `boolean` | - |  |
 | data | `unknown` | - |  |
 | appearance | enum ToastUserActionAppearance: `"neutral"`, `"error"`, `"warning"`, `"success"` | neutral |  |
 | link | `ToastUserActionLink` | - |  |
@@ -239,7 +237,6 @@ 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 |
@@ -249,9 +246,8 @@ toaster.upload.dismiss(uploadToastId);
 | progress* | `{ current: number; total: number; }` | - | Общий прогресс загрузки |
 | description* | `string` | - | Описание статуса загрузки |
 | status* | enum ToastUploadStatus: `"error"`, `"loading"`, `"pause"`, `"uploaded"`, `"errorUploaded"` | - | Общий статус загрузки |
-| closeToast | `CloseToastFunc` | - |  |
+| closeToast | `() => void` | - |  |
 | 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,6 +7,5 @@ export type ToasterContainerProps = {
     containerId?: RtToastContainerProps['containerId'];
     displayCloseAllButton?: boolean;
     type?: ToasterType;
-    draggable?: boolean;
 };
-export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, draggable, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToasterContainer({ position, limit, containerId, displayCloseAllButton, type, }: ToasterContainerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,7 +14,6 @@ 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'));
@@ -24,8 +23,7 @@ function ToasterContainer(_ref) {
     limit = 5,
     containerId,
     displayCloseAllButton,
-    type = constants_1.TOASTER_TYPE.SystemEvent,
-    draggable = false
+    type = constants_1.TOASTER_TYPE.SystemEvent
   } = _ref;
   const [notificationCounter, setNotificationCounter] = (0, react_1.useState)(0);
   const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = (0, react_1.useState)(false);
@@ -33,7 +31,7 @@ function ToasterContainer(_ref) {
     react_toastify_1.toast.dismiss();
     setIsCloseAllButtonHidden(true);
   };
-  (0, utils_1.useLayoutEffect)(() => {
+  (0, react_1.useEffect)(() => {
     const unsubscribe = react_toastify_1.toast.onChange(_ref2 => {
       let {
         status,
@@ -58,7 +56,7 @@ function ToasterContainer(_ref) {
       closeOnClick: false,
       autoClose: false,
       closeButton: false,
-      draggable: draggable,
+      draggable: false,
       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,
@@ -66,6 +64,7 @@ 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,7 +66,6 @@
 }
 :global .osThemeSnack.Toastify__toast-container{
   position:fixed;
-  left:auto;
   box-sizing:border-box;
   padding:0;
 }
@@ -80,7 +79,6 @@
   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: (id: Id, containerId?: Id) => boolean;
+export declare const isToastActive: typeof import("react-toastify/dist/core/store").isToastActive;
 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: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose,
+    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);
+    },
     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}`,
-    draggable: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.draggable,
-    draggableDirection: type === constants_1.TOASTER_TYPE.UserAction ? 'y' : 'x',
-    draggablePercent: 30
+    containerId: containerId || `${constants_1.TOASTER_CONTAINER_PREFIX}${type}`
   };
 }
 function getToastComponent(_ref3) {
@@ -150,8 +150,7 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -163,8 +162,7 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -176,8 +174,7 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -189,8 +186,7 @@ const userAction = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -200,10 +196,7 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'success'
-        }),
-        toastOptions: {
-          draggable: options.draggable
-        }
+        })
       });
     },
     neutral(id, options) {
@@ -211,10 +204,7 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'neutral'
-        }),
-        toastOptions: {
-          draggable: options.draggable
-        }
+        })
       });
     },
     warning(id, options) {
@@ -222,10 +212,7 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'warning'
-        }),
-        toastOptions: {
-          draggable: options.draggable
-        }
+        })
       });
     },
     error(id, options) {
@@ -233,10 +220,7 @@ const userAction = {
         type: constants_1.TOASTER_TYPE.UserAction,
         toasterProps: Object.assign(Object.assign({}, options), {
           appearance: 'error'
-        }),
-        toastOptions: {
-          draggable: options.draggable
-        }
+        })
       });
     }
   },
@@ -253,8 +237,7 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -266,8 +249,7 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -279,8 +261,7 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -292,8 +273,7 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -305,8 +285,7 @@ const systemEvent = {
       }),
       toastOptions: {
         id: options.id,
-        onClose: options.onClose,
-        draggable: options.draggable
+        onClose: options.onClose
       }
     });
   },
@@ -316,10 +295,7 @@ 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,8 +7,7 @@ export type PromisedId = Promise<ToasterId>;
 export type ToastOptions = {
     id?: ToasterId;
     autoClose?: RtToastOptions['autoClose'];
-    onClose?(reason?: boolean | string): void;
-    draggable?: boolean;
+    onClose?(id?: ToasterId): void;
 };
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
@@ -35,8 +34,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' | 'draggable'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
 export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 export type Toaster = {
     userAction: {

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

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

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

@@ -1,20 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './style.css';
 import cn from 'classnames';
-import { useState } from 'react';
+import { useEffect, 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, draggable = false, }) {
+export function ToasterContainer({ position = 'bottom-right', limit = 5, containerId, displayCloseAllButton, type = TOASTER_TYPE.SystemEvent, }) {
     const [notificationCounter, setNotificationCounter] = useState(0);
     const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = useState(false);
     const closeAll = () => {
         toast.dismiss();
         setIsCloseAllButtonHidden(true);
     };
-    useLayoutEffect(() => {
+    useEffect(() => {
         const unsubscribe = toast.onChange(({ status, containerId }) => {
             if (containerId === `${TOASTER_CONTAINER_PREFIX}${TOASTER_TYPE.SystemEvent}`) {
                 if (status === 'added') {
@@ -29,10 +28,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: draggable, className: cn('osThemeSnack', styles[position], {
+    return (_jsxs(_Fragment, { children: [_jsx(RtToastContainer, { hideProgressBar: true, closeOnClick: false, autoClose: false, closeButton: false, draggable: false, 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, 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, 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" }) }))] }));
 }

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

@@ -66,7 +66,6 @@
 }
 :global .osThemeSnack.Toastify__toast-container{
   position:fixed;
-  left:auto;
   box-sizing:border-box;
   padding:0;
 }
@@ -80,7 +79,6 @@
   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: (id: Id, containerId?: Id) => boolean;
+export declare const isToastActive: typeof import("react-toastify/dist/core/store").isToastActive;
 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: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.onClose,
+        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);
+        }),
         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,7 +100,6 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -111,7 +110,6 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -122,7 +120,6 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -133,7 +130,6 @@ const userAction = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -142,36 +138,24 @@ 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,
-                },
             });
         },
     },
@@ -187,7 +171,6 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -198,7 +181,6 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -209,7 +191,6 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -220,7 +201,6 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -231,7 +211,6 @@ const systemEvent = {
             toastOptions: {
                 id: options.id,
                 onClose: options.onClose,
-                draggable: options.draggable,
             },
         });
     },
@@ -240,9 +219,6 @@ 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,8 +7,7 @@ export type PromisedId = Promise<ToasterId>;
 export type ToastOptions = {
     id?: ToasterId;
     autoClose?: RtToastOptions['autoClose'];
-    onClose?(reason?: boolean | string): void;
-    draggable?: boolean;
+    onClose?(id?: ToasterId): void;
 };
 export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
@@ -35,8 +34,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' | 'draggable'>;
-export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose' | 'draggable'>;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
 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.21-preview-83f569e2.0",
+  "version": "0.11.21",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,20 +36,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.27.4",
-    "@snack-uikit/link": "0.17.15",
-    "@snack-uikit/loaders": "0.9.9",
-    "@snack-uikit/progress-bar": "0.1.10",
-    "@snack-uikit/scroll": "0.10.5",
-    "@snack-uikit/truncate-string": "0.7.6",
-    "@snack-uikit/utils": "4.0.0",
+    "@snack-uikit/icons": "0.27.5",
+    "@snack-uikit/link": "0.17.16",
+    "@snack-uikit/loaders": "0.9.10",
+    "@snack-uikit/progress-bar": "0.1.11",
+    "@snack-uikit/scroll": "0.10.6",
+    "@snack-uikit/truncate-string": "0.7.7",
+    "@snack-uikit/utils": "4.0.1",
     "classnames": "2.5.1",
-    "react-draggable": "4.5.0",
-    "react-toastify": "11.0.5",
+    "react-draggable": "4.4.6",
+    "react-toastify": "10.0.5",
     "uncontrollable": "9.0.0"
   },
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "7e7545cd231d23db02cc090a3199a142383ecfc0"
+  "gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
 }

package/src/components/ToasterContainer/ToasterContainer.tsx

@@ -1,7 +1,7 @@
 import './style.css';
 
 import cn from 'classnames';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   toast,
   ToastContainer as RtToastContainer,
@@ -10,8 +10,6 @@ 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';
@@ -23,7 +21,6 @@ export type ToasterContainerProps = {
   containerId?: RtToastContainerProps['containerId'];
   displayCloseAllButton?: boolean;
   type?: ToasterType;
-  draggable?: boolean;
 };
 
 export function ToasterContainer({
@@ -32,7 +29,6 @@ export function ToasterContainer({
   containerId,
   displayCloseAllButton,
   type = TOASTER_TYPE.SystemEvent,
-  draggable = false,
 }: ToasterContainerProps) {
   const [notificationCounter, setNotificationCounter] = useState(0);
   const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = useState(false);
@@ -41,7 +37,7 @@ export function ToasterContainer({
     setIsCloseAllButtonHidden(true);
   };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const unsubscribe = toast.onChange(({ status, containerId }: ToastItem) => {
       if (containerId === `${TOASTER_CONTAINER_PREFIX}${TOASTER_TYPE.SystemEvent}`) {
         if (status === 'added') {
@@ -66,7 +62,7 @@ export function ToasterContainer({
         closeOnClick={false}
         autoClose={false}
         closeButton={false}
-        draggable={draggable}
+        draggable={false}
         className={cn('osThemeSnack', styles[position], {
           [styles.containerWithCloseAllButton]: hasCloseAllButton,
           'osThemeSnack__toast-container__system-event': type === TOASTER_TYPE.SystemEvent,
@@ -74,6 +70,7 @@ 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,7 +76,6 @@ $theme-name: osThemeSnack;
 :global {
   .#{$theme-name}.Toastify__toast-container {
     position: fixed;
-    left: auto;
     box-sizing: border-box;
     padding: 0;
 
@@ -95,7 +94,6 @@ $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,12 +80,11 @@ function getToastOptions<T extends keyof ToasterPropsMap>({
 }): RtToastOptions {
   return {
     toastId: toastOptions?.id,
-    onClose: toastOptions?.onClose,
+    onClose: ((data: { id: ToasterId }) => {
+      toastOptions?.onClose?.(data?.id);
+    }) as RtToastOptions['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,
   };
 }
 
@@ -173,7 +172,6 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -185,7 +183,6 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -197,7 +194,6 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -209,7 +205,6 @@ const userAction = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -219,9 +214,6 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'success' },
-        toastOptions: {
-          draggable: options.draggable,
-        },
       });
     },
 
@@ -229,9 +221,6 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'neutral' },
-        toastOptions: {
-          draggable: options.draggable,
-        },
       });
     },
 
@@ -239,9 +228,6 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'warning' },
-        toastOptions: {
-          draggable: options.draggable,
-        },
       });
     },
 
@@ -249,9 +235,6 @@ const userAction = {
       updateToast(id, {
         type: TOASTER_TYPE.UserAction,
         toasterProps: { ...options, appearance: 'error' },
-        toastOptions: {
-          draggable: options.draggable,
-        },
       });
     },
   },
@@ -269,7 +252,6 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -281,7 +263,6 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -293,7 +274,6 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -305,7 +285,6 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -317,7 +296,6 @@ const systemEvent = {
       toastOptions: {
         id: options.id,
         onClose: options.onClose,
-        draggable: options.draggable,
       },
     });
   },
@@ -327,9 +305,6 @@ const systemEvent = {
       return updateToast(id, {
         type: TOASTER_TYPE.SystemEvent,
         toasterProps: { ...options, appearance: 'success' },
-        toastOptions: {
-          draggable: options.draggable,
-        },
       });
     },
 

package/src/types.ts

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