@snack-uikit/toaster 0.9.4 → 0.9.5-preview-960d787f.0

package/README.md

@@ -102,6 +102,8 @@ toaster.upload.dismiss(uploadToastId);
 | collapsed | `boolean` | - | Тостер свернут/развернут |
 | onCollapsed | `(collapsed: boolean) => void` | - | Развернуть/свернуть тостер |
 | cancelButton | `ButtonTextNeutralProps` | - | Отмена всей загрузки |
+| draggable | `boolean` | - | Перемещение тостера |
+| draggableBounds | `string \| false \| DraggableBounds` | - | Ограничения перемещения тостера |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import { DraggableProps } from 'react-draggable';
 import { ToastContentProps as RtToastContentProps } from 'react-toastify';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ButtonTextNeutralProps } from './helperComponents/ButtonTextNeutral';
@@ -55,5 +56,13 @@ export type ToastUploadProps = Partial<RtToastContentProps> & WithSupportProps<{
      *  Отмена всей загрузки
      */
     cancelButton?: ButtonTextNeutralProps;
+    /**
+     *  Перемещение тостера
+     */
+    draggable?: boolean;
+    /**
+     *  Ограничения перемещения тостера
+     */
+    draggableBounds?: DraggableProps['bounds'];
 }>;
-export declare function ToastUpload({ status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastUpload({ status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress, draggable, draggableBounds, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ToastUpload/ToastUpload.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToastUpload = ToastUpload;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const react_draggable_1 = __importDefault(require("react-draggable"));
 const uncontrollable_1 = require("uncontrollable");
 const icons_1 = require("@snack-uikit/icons");
 const locale_1 = require("@snack-uikit/locale");
@@ -48,9 +49,11 @@ function ToastUpload(_a) {
       onCollapsed,
       generalActions,
       cancelButton,
-      progress
+      progress,
+      draggable = false,
+      draggableBounds
     } = _a,
-    rest = __rest(_a, ["status", "title", "description", "closeToast", "onCloseClick", "closable", "className", "files", "collapsed", "onCollapsed", "generalActions", "cancelButton", "progress"]);
+    rest = __rest(_a, ["status", "title", "description", "closeToast", "onCloseClick", "closable", "className", "files", "collapsed", "onCollapsed", "generalActions", "cancelButton", "progress", "draggable", "draggableBounds"]);
   const [isCollapsed, setIsCollapsed] = (0, uncontrollable_1.useUncontrolledProp)(collapsed, false, onCollapsed);
   const {
     t
@@ -66,67 +69,72 @@ function ToastUpload(_a) {
   };
   const progressPercent = Math.round(progress.current / progress.total * 100);
   const isErrorUploaded = status === 'errorUploaded';
-  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
-    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
-  }, (0, utils_1.extractSupportProps)(rest), {
-    "data-collapsed": isCollapsed || undefined,
-    children: [(0, jsx_runtime_1.jsxs)("div", {
-      className: styles_module_scss_1.default.titleLine,
+  return (0, jsx_runtime_1.jsx)(react_draggable_1.default, {
+    bounds: draggableBounds,
+    disabled: !draggable,
+    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
+      className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
+    }, (0, utils_1.extractSupportProps)(rest), {
+      "data-collapsed": isCollapsed || undefined,
+      "data-draggable": draggable || undefined,
       children: [(0, jsx_runtime_1.jsxs)("div", {
-        className: styles_module_scss_1.default.titleLineBody,
-        children: [(0, jsx_runtime_1.jsx)("div", {
-          className: styles_module_scss_1.default.title,
-          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.title,
-          children: showingTitle
-        }), cancelButton && (0, jsx_runtime_1.jsx)(ButtonTextNeutral_1.ButtonTextNeutral, Object.assign({}, cancelButton)), (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
-          onClick: handleCollapseClick,
-          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.collapseButton,
-          children: !isCollapsed ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {})
-        }), closable && (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
-          className: styles_module_scss_1.default.buttonAction,
-          onClick: handleCloseClick,
-          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.close,
-          children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
-        })]
-      }), (0, jsx_runtime_1.jsxs)("div", {
-        className: styles_module_scss_1.default.generalProgress,
+        className: styles_module_scss_1.default.titleLine,
         children: [(0, jsx_runtime_1.jsxs)("div", {
-          className: styles_module_scss_1.default.statusLine,
+          className: styles_module_scss_1.default.titleLineBody,
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: styles_module_scss_1.default.title,
+            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.title,
+            children: showingTitle
+          }), cancelButton && (0, jsx_runtime_1.jsx)(ButtonTextNeutral_1.ButtonTextNeutral, Object.assign({}, cancelButton)), (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+            onClick: handleCollapseClick,
+            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.collapseButton,
+            children: !isCollapsed ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {})
+          }), closable && (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
+            className: styles_module_scss_1.default.buttonAction,
+            onClick: handleCloseClick,
+            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.close,
+            children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
+          })]
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: styles_module_scss_1.default.generalProgress,
           children: [(0, jsx_runtime_1.jsxs)("div", {
-            className: styles_module_scss_1.default.statusWrap,
-            children: [(0, jsx_runtime_1.jsx)(LoadingStatus_1.LoadingStatus, {
-              status: status,
-              actions: generalActions
-            }), (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-              className: styles_module_scss_1.default.description,
-              "data-status": status,
-              text: description,
-              "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.description
+            className: styles_module_scss_1.default.statusLine,
+            children: [(0, jsx_runtime_1.jsxs)("div", {
+              className: styles_module_scss_1.default.statusWrap,
+              children: [(0, jsx_runtime_1.jsx)(LoadingStatus_1.LoadingStatus, {
+                status: status,
+                actions: generalActions
+              }), (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+                className: styles_module_scss_1.default.description,
+                "data-status": status,
+                text: description,
+                "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.description
+              })]
+            }), (0, jsx_runtime_1.jsx)("span", {
+              className: styles_module_scss_1.default.totalCounter,
+              "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.counter,
+              children: `${progress.current}/${progress.total}`
+            }), (0, jsx_runtime_1.jsx)("span", {
+              className: styles_module_scss_1.default.totalPercentage,
+              "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progress,
+              children: (0, utils_2.formatPercent)(isErrorUploaded ? 0 : progressPercent)
             })]
-          }), (0, jsx_runtime_1.jsx)("span", {
-            className: styles_module_scss_1.default.totalCounter,
-            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.counter,
-            children: `${progress.current}/${progress.total}`
-          }), (0, jsx_runtime_1.jsx)("span", {
-            className: styles_module_scss_1.default.totalPercentage,
-            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progress,
-            children: (0, utils_2.formatPercent)(isErrorUploaded ? 0 : progressPercent)
+          }), isCollapsed && (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
+            progress: isErrorUploaded ? 100 : progressPercent,
+            size: 'xs',
+            appearance: constants_1.progressBarAppearanceByStatus[status],
+            "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progressBar
           })]
-        }), isCollapsed && (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
-          progress: isErrorUploaded ? 100 : progressPercent,
-          size: 'xs',
-          appearance: constants_1.progressBarAppearanceByStatus[status],
-          "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progressBar
         })]
+      }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
+        className: styles_module_scss_1.default.list,
+        size: 's',
+        "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.list,
+        barHideStrategy: 'never',
+        children: files.map(item => (0, jsx_runtime_1.jsx)(FileItem_1.FileItem, {
+          item: item
+        }, item.id || item.title))
       })]
-    }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
-      className: styles_module_scss_1.default.list,
-      size: 's',
-      "data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.list,
-      barHideStrategy: 'never',
-      children: files.map(item => (0, jsx_runtime_1.jsx)(FileItem_1.FileItem, {
-        item: item
-      }, item.id || item.title))
-    })]
-  }));
+    }))
+  });
 }

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

@@ -1,7 +1,5 @@
 .container{
-  padding:var(--space-toaster-toast-system-event-container-padding, 16px);
-  border-radius:var(--radius-toaster-toast-system-event-container, 16px);
-  gap:var(--space-toaster-toast-system-event-container-gap, 16px);
+  pointer-events:all;
   cursor:default;
   position:relative;
   overflow:hidden;
@@ -12,10 +10,19 @@
   max-width:100%;
   max-height:386px;
   background-color:var(--sys-invert-neutral-background, #30303c);
+  padding:var(--space-toaster-toast-system-event-container-padding, 16px);
+  border-radius:var(--radius-toaster-toast-system-event-container, 16px);
+  gap:var(--space-toaster-toast-system-event-container-gap, 16px);
 }
 .container[data-collapsed]{
   gap:0;
 }
+.container[data-draggable]{
+  cursor:grab;
+}
+.container[data-draggable]:active{
+  cursor:grabbing;
+}
 
 .titleLine{
   display:flex;

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

@@ -60,7 +60,8 @@ function ToasterContainer(_ref) {
       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,
-        'osThemeSnack__toast-container__user-action': type === constants_1.TOASTER_TYPE.UserAction
+        'osThemeSnack__toast-container__user-action': type === constants_1.TOASTER_TYPE.UserAction,
+        'osThemeSnack__toast-container__upload': type === constants_1.TOASTER_TYPE.Upload
       }),
       toastClassName: styles_module_scss_1.default.toaster,
       bodyClassName: styles_module_scss_1.default.toaster,

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

@@ -154,6 +154,23 @@
   width:-moz-fit-content;
   width:fit-content;
 }
+:global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload{
+  pointer-events:none;
+  z-index:1;
+  top:var(--space-toaster-toast-system-event-container-padding, 16px);
+  right:var(--space-toaster-toast-system-event-container-padding, 16px);
+  bottom:var(--space-toaster-toast-system-event-container-padding, 16px);
+  left:var(--space-toaster-toast-system-event-container-padding, 16px);
+  display:flex;
+  flex-direction:column;
+}
+:global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload > div{
+  display:flex;
+  align-items:flex-end;
+  justify-content:flex-start;
+  width:100%;
+  height:100%;
+}
 :global .osThemeSnack.Toastify__toast-container--bottom-right{
   right:0;
   bottom:0;

package/dist/cjs/constants.js

@@ -23,10 +23,10 @@ exports.TOASTER_CONTAINER_DEFAULT_PROPS = {
     type: exports.TOASTER_TYPE.UserAction
   },
   [exports.TOASTER_TYPE.Upload]: {
-    limit: 5,
+    limit: 1,
     position: 'bottom-right',
-    displayCloseAllButton: true,
-    type: exports.TOASTER_TYPE.SystemEvent
+    displayCloseAllButton: false,
+    type: exports.TOASTER_TYPE.Upload
   }
 };
 exports.AUTO_CLOSE_TIME = {

package/dist/cjs/helpers.js

@@ -69,7 +69,10 @@ function getToastComponent(_ref3) {
     case constants_1.TOASTER_TYPE.SystemEvent:
       return (0, jsx_runtime_1.jsx)(components_1.ToastSystemEvent, Object.assign({}, toasterProps));
     case constants_1.TOASTER_TYPE.Upload:
-      return (0, jsx_runtime_1.jsx)(components_1.ToastUpload, Object.assign({}, toasterProps));
+      return (0, jsx_runtime_1.jsx)(components_1.ToastUpload, Object.assign({
+        draggable: true,
+        draggableBounds: '.Toastify__toast-container'
+      }, toasterProps));
     default:
       return undefined;
   }

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

@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import { DraggableProps } from 'react-draggable';
 import { ToastContentProps as RtToastContentProps } from 'react-toastify';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ButtonTextNeutralProps } from './helperComponents/ButtonTextNeutral';
@@ -55,5 +56,13 @@ export type ToastUploadProps = Partial<RtToastContentProps> & WithSupportProps<{
      *  Отмена всей загрузки
      */
     cancelButton?: ButtonTextNeutralProps;
+    /**
+     *  Перемещение тостера
+     */
+    draggable?: boolean;
+    /**
+     *  Ограничения перемещения тостера
+     */
+    draggableBounds?: DraggableProps['bounds'];
 }>;
-export declare function ToastUpload({ status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastUpload({ status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress, draggable, draggableBounds, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToastUpload/ToastUpload.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import Draggable from 'react-draggable';
 import { useUncontrolledProp } from 'uncontrollable';
 import { ChevronDownSVG, ChevronUpSVG, CrossSVG } from '@snack-uikit/icons';
 import { useLocale } from '@snack-uikit/locale';
@@ -27,7 +28,7 @@ import { LoadingStatus } from './helperComponents/LoadingStatus';
 import styles from './styles.module.css';
 import { formatPercent } from './utils';
 export function ToastUpload(_a) {
-    var { status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress } = _a, rest = __rest(_a, ["status", "title", "description", "closeToast", "onCloseClick", "closable", "className", "files", "collapsed", "onCollapsed", "generalActions", "cancelButton", "progress"]);
+    var { status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress, draggable = false, draggableBounds } = _a, rest = __rest(_a, ["status", "title", "description", "closeToast", "onCloseClick", "closable", "className", "files", "collapsed", "onCollapsed", "generalActions", "cancelButton", "progress", "draggable", "draggableBounds"]);
     const [isCollapsed, setIsCollapsed] = useUncontrolledProp(collapsed, false, onCollapsed);
     const { t } = useLocale('ToastUpload');
     const showingTitle = title || t(`title.${status}`);
@@ -41,5 +42,5 @@ export function ToastUpload(_a) {
     };
     const progressPercent = Math.round((progress.current / progress.total) * 100);
     const isErrorUploaded = status === 'errorUploaded';
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-collapsed": isCollapsed || undefined, children: [_jsxs("div", { className: styles.titleLine, children: [_jsxs("div", { className: styles.titleLineBody, children: [_jsx("div", { className: styles.title, "data-test-id": TOAST_UPLOAD_TEST_IDS.title, children: showingTitle }), cancelButton && _jsx(ButtonTextNeutral, Object.assign({}, cancelButton)), _jsx(ButtonIcon, { onClick: handleCollapseClick, "data-test-id": TOAST_UPLOAD_TEST_IDS.collapseButton, children: !isCollapsed ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) }), closable && (_jsx(ButtonIcon, { className: styles.buttonAction, onClick: handleCloseClick, "data-test-id": TOAST_UPLOAD_TEST_IDS.close, children: _jsx(CrossSVG, {}) }))] }), _jsxs("div", { className: styles.generalProgress, children: [_jsxs("div", { className: styles.statusLine, children: [_jsxs("div", { className: styles.statusWrap, children: [_jsx(LoadingStatus, { status: status, actions: generalActions }), _jsx(TruncateString, { className: styles.description, "data-status": status, text: description, "data-test-id": TOAST_UPLOAD_TEST_IDS.description })] }), _jsx("span", { className: styles.totalCounter, "data-test-id": TOAST_UPLOAD_TEST_IDS.counter, children: `${progress.current}/${progress.total}` }), _jsx("span", { className: styles.totalPercentage, "data-test-id": TOAST_UPLOAD_TEST_IDS.progress, children: formatPercent(isErrorUploaded ? 0 : progressPercent) })] }), isCollapsed && (_jsx(ProgressBar, { progress: isErrorUploaded ? 100 : progressPercent, size: 'xs', appearance: progressBarAppearanceByStatus[status], "data-test-id": TOAST_UPLOAD_TEST_IDS.progressBar }))] })] }), _jsx(Scroll, { className: styles.list, size: 's', "data-test-id": TOAST_UPLOAD_TEST_IDS.list, barHideStrategy: 'never', children: files.map(item => (_jsx(FileItem, { item: item }, item.id || item.title))) })] })));
+    return (_jsx(Draggable, { bounds: draggableBounds, disabled: !draggable, children: _jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-collapsed": isCollapsed || undefined, "data-draggable": draggable || undefined, children: [_jsxs("div", { className: styles.titleLine, children: [_jsxs("div", { className: styles.titleLineBody, children: [_jsx("div", { className: styles.title, "data-test-id": TOAST_UPLOAD_TEST_IDS.title, children: showingTitle }), cancelButton && _jsx(ButtonTextNeutral, Object.assign({}, cancelButton)), _jsx(ButtonIcon, { onClick: handleCollapseClick, "data-test-id": TOAST_UPLOAD_TEST_IDS.collapseButton, children: !isCollapsed ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) }), closable && (_jsx(ButtonIcon, { className: styles.buttonAction, onClick: handleCloseClick, "data-test-id": TOAST_UPLOAD_TEST_IDS.close, children: _jsx(CrossSVG, {}) }))] }), _jsxs("div", { className: styles.generalProgress, children: [_jsxs("div", { className: styles.statusLine, children: [_jsxs("div", { className: styles.statusWrap, children: [_jsx(LoadingStatus, { status: status, actions: generalActions }), _jsx(TruncateString, { className: styles.description, "data-status": status, text: description, "data-test-id": TOAST_UPLOAD_TEST_IDS.description })] }), _jsx("span", { className: styles.totalCounter, "data-test-id": TOAST_UPLOAD_TEST_IDS.counter, children: `${progress.current}/${progress.total}` }), _jsx("span", { className: styles.totalPercentage, "data-test-id": TOAST_UPLOAD_TEST_IDS.progress, children: formatPercent(isErrorUploaded ? 0 : progressPercent) })] }), isCollapsed && (_jsx(ProgressBar, { progress: isErrorUploaded ? 100 : progressPercent, size: 'xs', appearance: progressBarAppearanceByStatus[status], "data-test-id": TOAST_UPLOAD_TEST_IDS.progressBar }))] })] }), _jsx(Scroll, { className: styles.list, size: 's', "data-test-id": TOAST_UPLOAD_TEST_IDS.list, barHideStrategy: 'never', children: files.map(item => (_jsx(FileItem, { item: item }, item.id || item.title))) })] })) }));
 }

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

@@ -1,7 +1,5 @@
 .container{
-  padding:var(--space-toaster-toast-system-event-container-padding, 16px);
-  border-radius:var(--radius-toaster-toast-system-event-container, 16px);
-  gap:var(--space-toaster-toast-system-event-container-gap, 16px);
+  pointer-events:all;
   cursor:default;
   position:relative;
   overflow:hidden;
@@ -12,10 +10,19 @@
   max-width:100%;
   max-height:386px;
   background-color:var(--sys-invert-neutral-background, #30303c);
+  padding:var(--space-toaster-toast-system-event-container-padding, 16px);
+  border-radius:var(--radius-toaster-toast-system-event-container, 16px);
+  gap:var(--space-toaster-toast-system-event-container-gap, 16px);
 }
 .container[data-collapsed]{
   gap:0;
 }
+.container[data-draggable]{
+  cursor:grab;
+}
+.container[data-draggable]:active{
+  cursor:grabbing;
+}
 
 .titleLine{
   display:flex;

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

@@ -32,5 +32,6 @@ export function ToasterContainer({ position = 'bottom-right', limit = 5, contain
                     [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" }) }))] }));
 }

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

@@ -154,6 +154,23 @@
   width:-moz-fit-content;
   width:fit-content;
 }
+:global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload{
+  pointer-events:none;
+  z-index:1;
+  top:var(--space-toaster-toast-system-event-container-padding, 16px);
+  right:var(--space-toaster-toast-system-event-container-padding, 16px);
+  bottom:var(--space-toaster-toast-system-event-container-padding, 16px);
+  left:var(--space-toaster-toast-system-event-container-padding, 16px);
+  display:flex;
+  flex-direction:column;
+}
+:global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload > div{
+  display:flex;
+  align-items:flex-end;
+  justify-content:flex-start;
+  width:100%;
+  height:100%;
+}
 :global .osThemeSnack.Toastify__toast-container--bottom-right{
   right:0;
   bottom:0;

package/dist/esm/constants.js

@@ -17,10 +17,10 @@ export const TOASTER_CONTAINER_DEFAULT_PROPS = {
         type: TOASTER_TYPE.UserAction,
     },
     [TOASTER_TYPE.Upload]: {
-        limit: 5,
+        limit: 1,
         position: 'bottom-right',
-        displayCloseAllButton: true,
-        type: TOASTER_TYPE.SystemEvent,
+        displayCloseAllButton: false,
+        type: TOASTER_TYPE.Upload,
     },
 };
 export const AUTO_CLOSE_TIME = {

package/dist/esm/helpers.js

@@ -49,7 +49,7 @@ function getToastComponent({ type, toasterProps, }) {
         case TOASTER_TYPE.SystemEvent:
             return _jsx(ToastSystemEvent, Object.assign({}, toasterProps));
         case TOASTER_TYPE.Upload:
-            return _jsx(ToastUpload, Object.assign({}, toasterProps));
+            return (_jsx(ToastUpload, Object.assign({ draggable: true, draggableBounds: '.Toastify__toast-container' }, toasterProps)));
         default:
             return undefined;
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toaster",
-  "version": "0.9.4",
+  "version": "0.9.5-preview-960d787f.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -45,8 +45,9 @@
     "@snack-uikit/truncate-string": "0.6.18",
     "@snack-uikit/utils": "3.8.1",
     "classnames": "2.5.1",
+    "react-draggable": "4.4.6",
     "react-toastify": "10.0.5",
     "uncontrollable": "9.0.0"
   },
-  "gitHead": "2c50d707746c6aeab336e4097df6e4c8494d67a4"
+  "gitHead": "561faf69684b4958bf5cf41950a7e530e5564509"
 }

package/src/components/ToastUpload/ToastUpload.tsx

@@ -1,5 +1,6 @@
 import cn from 'classnames';
 import { MouseEvent } from 'react';
+import Draggable, { DraggableProps } from 'react-draggable';
 import { ToastContentProps as RtToastContentProps } from 'react-toastify';
 import { useUncontrolledProp } from 'uncontrollable';
 
@@ -73,6 +74,14 @@ export type ToastUploadProps = Partial<RtToastContentProps> &
      *  Отмена всей загрузки
      */
     cancelButton?: ButtonTextNeutralProps;
+    /**
+     *  Перемещение тостера
+     */
+    draggable?: boolean;
+    /**
+     *  Ограничения перемещения тостера
+     */
+    draggableBounds?: DraggableProps['bounds'];
   }>;
 
 export function ToastUpload({
@@ -89,6 +98,8 @@ export function ToastUpload({
   generalActions,
   cancelButton,
   progress,
+  draggable = false,
+  draggableBounds,
   ...rest
 }: ToastUploadProps) {
   const [isCollapsed, setIsCollapsed] = useUncontrolledProp(collapsed, false, onCollapsed);
@@ -111,72 +122,75 @@ export function ToastUpload({
   const isErrorUploaded = status === 'errorUploaded';
 
   return (
-    <div
-      className={cn(styles.container, className)}
-      {...extractSupportProps(rest)}
-      data-collapsed={isCollapsed || undefined}
-    >
-      <div className={styles.titleLine}>
-        <div className={styles.titleLineBody}>
-          <div className={styles.title} data-test-id={TOAST_UPLOAD_TEST_IDS.title}>
-            {showingTitle}
-          </div>
-
-          {cancelButton && <ButtonTextNeutral {...cancelButton} />}
+    <Draggable bounds={draggableBounds} disabled={!draggable}>
+      <div
+        className={cn(styles.container, className)}
+        {...extractSupportProps(rest)}
+        data-collapsed={isCollapsed || undefined}
+        data-draggable={draggable || undefined}
+      >
+        <div className={styles.titleLine}>
+          <div className={styles.titleLineBody}>
+            <div className={styles.title} data-test-id={TOAST_UPLOAD_TEST_IDS.title}>
+              {showingTitle}
+            </div>
 
-          <ButtonIcon onClick={handleCollapseClick} data-test-id={TOAST_UPLOAD_TEST_IDS.collapseButton}>
-            {!isCollapsed ? <ChevronUpSVG /> : <ChevronDownSVG />}
-          </ButtonIcon>
+            {cancelButton && <ButtonTextNeutral {...cancelButton} />}
 
-          {closable && (
-            <ButtonIcon
-              className={styles.buttonAction}
-              onClick={handleCloseClick}
-              data-test-id={TOAST_UPLOAD_TEST_IDS.close}
-            >
-              <CrossSVG />
+            <ButtonIcon onClick={handleCollapseClick} data-test-id={TOAST_UPLOAD_TEST_IDS.collapseButton}>
+              {!isCollapsed ? <ChevronUpSVG /> : <ChevronDownSVG />}
             </ButtonIcon>
-          )}
-        </div>
 
-        <div className={styles.generalProgress}>
-          <div className={styles.statusLine}>
-            <div className={styles.statusWrap}>
-              <LoadingStatus status={status} actions={generalActions} />
+            {closable && (
+              <ButtonIcon
+                className={styles.buttonAction}
+                onClick={handleCloseClick}
+                data-test-id={TOAST_UPLOAD_TEST_IDS.close}
+              >
+                <CrossSVG />
+              </ButtonIcon>
+            )}
+          </div>
 
-              <TruncateString
-                className={styles.description}
-                data-status={status}
-                text={description}
-                data-test-id={TOAST_UPLOAD_TEST_IDS.description}
-              />
+          <div className={styles.generalProgress}>
+            <div className={styles.statusLine}>
+              <div className={styles.statusWrap}>
+                <LoadingStatus status={status} actions={generalActions} />
+
+                <TruncateString
+                  className={styles.description}
+                  data-status={status}
+                  text={description}
+                  data-test-id={TOAST_UPLOAD_TEST_IDS.description}
+                />
+              </div>
+
+              <span className={styles.totalCounter} data-test-id={TOAST_UPLOAD_TEST_IDS.counter}>
+                {`${progress.current}/${progress.total}`}
+              </span>
+
+              <span className={styles.totalPercentage} data-test-id={TOAST_UPLOAD_TEST_IDS.progress}>
+                {formatPercent(isErrorUploaded ? 0 : progressPercent)}
+              </span>
             </div>
 
-            <span className={styles.totalCounter} data-test-id={TOAST_UPLOAD_TEST_IDS.counter}>
-              {`${progress.current}/${progress.total}`}
-            </span>
-
-            <span className={styles.totalPercentage} data-test-id={TOAST_UPLOAD_TEST_IDS.progress}>
-              {formatPercent(isErrorUploaded ? 0 : progressPercent)}
-            </span>
+            {isCollapsed && (
+              <ProgressBar
+                progress={isErrorUploaded ? 100 : progressPercent}
+                size='xs'
+                appearance={progressBarAppearanceByStatus[status]}
+                data-test-id={TOAST_UPLOAD_TEST_IDS.progressBar}
+              />
+            )}
           </div>
-
-          {isCollapsed && (
-            <ProgressBar
-              progress={isErrorUploaded ? 100 : progressPercent}
-              size='xs'
-              appearance={progressBarAppearanceByStatus[status]}
-              data-test-id={TOAST_UPLOAD_TEST_IDS.progressBar}
-            />
-          )}
         </div>
-      </div>
 
-      <Scroll className={styles.list} size='s' data-test-id={TOAST_UPLOAD_TEST_IDS.list} barHideStrategy='never'>
-        {files.map(item => (
-          <FileItem key={item.id || item.title} item={item} />
-        ))}
-      </Scroll>
-    </div>
+        <Scroll className={styles.list} size='s' data-test-id={TOAST_UPLOAD_TEST_IDS.list} barHideStrategy='never'>
+          {files.map(item => (
+            <FileItem key={item.id || item.title} item={item} />
+          ))}
+        </Scroll>
+      </div>
+    </Draggable>
   );
 }

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

@@ -3,8 +3,7 @@
 @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
 
 .container {
-  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-toast-container);
-
+  pointer-events: all;
   cursor: default;
 
   position: relative;
@@ -25,6 +24,16 @@
   &[data-collapsed] {
     gap: 0;
   }
+
+  &[data-draggable] {
+    cursor: grab;
+  }
+
+  &[data-draggable]:active {
+    cursor: grabbing;
+  }
+
+  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-toast-container);
 }
 
 .titleLine {

package/src/components/ToasterContainer/ToasterContainer.tsx

@@ -67,6 +67,7 @@ export function ToasterContainer({
           [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}

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

@@ -183,6 +183,30 @@ $theme-name: osThemeSnack;
     width: fit-content;
   }
 
+  .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__upload {
+    pointer-events: none;
+
+    // Необходимо, чтобы тостер с загрузкой был всегда выше остальных тостеров
+    /* stylelint-disable-next-line declaration-property-value-allowed-list */
+    z-index: 1;
+    top: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
+    right: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
+    bottom: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
+    left: styles-theme-variables.$space-toaster-toast-system-event-container-padding;
+
+    display: flex;
+    flex-direction: column;
+
+    > div {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-start;
+
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   .#{$theme-name}.Toastify__toast-container--bottom-right {
     right: 0;
     bottom: 0;

package/src/constants.ts

@@ -21,10 +21,10 @@ export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContain
     type: TOASTER_TYPE.UserAction,
   },
   [TOASTER_TYPE.Upload]: {
-    limit: 5,
+    limit: 1,
     position: 'bottom-right',
-    displayCloseAllButton: true,
-    type: TOASTER_TYPE.SystemEvent,
+    displayCloseAllButton: false,
+    type: TOASTER_TYPE.Upload,
   },
 };
 

package/src/helpers.tsx

@@ -101,7 +101,9 @@ function getToastComponent<T extends keyof ToasterPropsMap>({
     case TOASTER_TYPE.SystemEvent:
       return <ToastSystemEvent {...(toasterProps as ToastSystemEventProps)} />;
     case TOASTER_TYPE.Upload:
-      return <ToastUpload {...(toasterProps as ToastUploadProps)} />;
+      return (
+        <ToastUpload draggable draggableBounds='.Toastify__toast-container' {...(toasterProps as ToastUploadProps)} />
+      );
     default:
       return undefined;
   }