@snack-uikit/toaster 0.8.16 → 0.8.17-preview-bc9ca5dd.0

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

@@ -0,0 +1 @@
+export declare const formatPercent: (value: number) => string;

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

@@ -0,0 +1 @@
+export const formatPercent = (value) => `${value}%`;

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

@@ -0,0 +1 @@
+export * from './formatPercent';

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

@@ -0,0 +1 @@
+export * from './formatPercent';

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

@@ -1,6 +1,6 @@
 .buttonCloseColumnWrapper{
-  gap:var(--space-toaster-system-event-gap, 8px);
-  padding:var(--space-toaster-system-event-padding, 8px);
+  gap:var(--space-toaster-toast-system-event-gap, 8px);
+  padding:var(--space-toaster-toast-system-event-padding, 8px);
   width:var(--size-toaster-toast-system-event-container, 320px);
   position:fixed;
   box-sizing:border-box;
@@ -56,7 +56,7 @@
 }
 
 .containerWithCloseAllButton{
-  margin-bottom:calc(var(--size-toaster-button-close-column, 40px) + var(--space-toaster-system-event-gap, 8px));
+  margin-bottom:calc(var(--size-toaster-button-close-column, 40px) + var(--space-toaster-toast-system-event-gap, 8px));
 }
 
 @media only screen and (max-width: 480px){
@@ -95,8 +95,8 @@
   max-width:100%;
 }
 :global .osThemeSnack.Toastify__toast-container .container-user-action{
-  padding-bottom:var(--space-toaster-user-action-padding-bottom, 8px);
-  gap:var(--space-toaster-user-action-gap, 8px);
+  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
+  gap:var(--space-toaster-toast-user-action-gap, 8px);
   display:flex;
   flex-direction:column;
   align-items:center;
@@ -138,16 +138,16 @@
   animation-name:osSnackTheme__toast__bounceOutDown;
 }
 :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__system-event{
-  gap:var(--space-toaster-system-event-gap, 8px);
-  padding:var(--space-toaster-system-event-padding, 8px);
+  gap:var(--space-toaster-toast-system-event-gap, 8px);
+  padding:var(--space-toaster-toast-system-event-padding, 8px);
   width:var(--size-toaster-toast-system-event-container, 320px);
   display:flex;
   flex-direction:column;
   max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 16px));
 }
 :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action{
-  padding-bottom:var(--space-toaster-user-action-padding-bottom, 8px);
-  gap:var(--space-toaster-user-action-gap, 8px);
+  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
+  gap:var(--space-toaster-toast-user-action-gap, 8px);
   display:flex;
   flex-direction:column;
   align-items:center;

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

@@ -1,3 +1,4 @@
 export * from './ToastSystemEvent';
 export * from './ToastUserAction';
 export * from './ToasterContainer';
+export * from './ToastUpload';

package/dist/esm/components/index.js

@@ -1,3 +1,4 @@
 export * from './ToastSystemEvent';
 export * from './ToastUserAction';
 export * from './ToasterContainer';
+export * from './ToastUpload';

package/dist/esm/constants.d.ts

@@ -1,13 +1,18 @@
-import { ToasterContainerProps } from './components';
+import { ToasterContainerProps, ToastUploadProps } from './components';
+import { UploadItem } from './components/ToastUpload/types';
 import { ToasterType } from './types';
 export declare const TOASTER_TYPE: {
     readonly SystemEvent: "system-event";
     readonly UserAction: "user-action";
+    readonly Upload: "upload";
 };
 export declare const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContainerProps>;
-export declare const AUTO_CLOSE_TIME: {
-    "system-event": number;
-    "user-action": number;
-};
+export declare const AUTO_CLOSE_TIME: Record<ToasterType, number | false>;
 export declare const TOASTER_ROOT_ID = "toaster-root";
 export declare const TOASTER_CONTAINER_PREFIX = "toaster-container__";
+export declare const MOCK_TOAST_LOADING_ITEM: UploadItem;
+export declare const MOCK_TOAST_PAUSED_ITEM: UploadItem;
+export declare const MOCK_TOAST_ERROR_ITEM: UploadItem;
+export declare const MOCK_TOAST_UPLOADED_ITEM: UploadItem;
+export declare const MOCK_TOAST_PROPS: Partial<ToastUploadProps>;
+export declare const MOCK_UPLOAD_ITEMS_LIST: UploadItem[];

package/dist/esm/constants.js

@@ -1,6 +1,7 @@
 export const TOASTER_TYPE = {
     SystemEvent: 'system-event',
     UserAction: 'user-action',
+    Upload: 'upload',
 };
 export const TOASTER_CONTAINER_DEFAULT_PROPS = {
     [TOASTER_TYPE.SystemEvent]: {
@@ -15,10 +16,85 @@ export const TOASTER_CONTAINER_DEFAULT_PROPS = {
         displayCloseAllButton: false,
         type: TOASTER_TYPE.UserAction,
     },
+    [TOASTER_TYPE.Upload]: {
+        limit: 5,
+        position: 'bottom-right',
+        displayCloseAllButton: true,
+        type: TOASTER_TYPE.SystemEvent,
+    },
 };
 export const AUTO_CLOSE_TIME = {
     [TOASTER_TYPE.SystemEvent]: 5000,
     [TOASTER_TYPE.UserAction]: 2000,
+    [TOASTER_TYPE.Upload]: false,
 };
 export const TOASTER_ROOT_ID = 'toaster-root';
 export const TOASTER_CONTAINER_PREFIX = 'toaster-container__';
+export const MOCK_TOAST_LOADING_ITEM = {
+    id: '1',
+    progress: 10,
+    size: '45 MB',
+    title: 'file name.extensions',
+    status: 'loading',
+    statusLabel: 'Loading...',
+    actions: {},
+};
+export const MOCK_TOAST_PAUSED_ITEM = {
+    id: '2',
+    progress: 20,
+    size: '45 MB',
+    title: 'file name.extensions',
+    status: 'pause',
+    statusLabel: 'Paused',
+    actions: {},
+};
+export const MOCK_TOAST_ERROR_ITEM = {
+    id: '3',
+    progress: 20,
+    size: '45 MB',
+    title: 'file name.extensions',
+    status: 'error',
+    statusLabel: 'Error',
+    actions: {},
+};
+export const MOCK_TOAST_UPLOADED_ITEM = {
+    id: '4',
+    progress: 100,
+    size: '45 MB',
+    title: 'file name.extensions',
+    status: 'uploaded',
+    statusLabel: 'Uploaded',
+    actions: {},
+    link: {
+        href: '#',
+        text: 'Show',
+    },
+};
+export const MOCK_TOAST_PROPS = {
+    title: 'Loading...',
+    description: '3 minutes left',
+    status: 'loading',
+    closable: true,
+    collapsed: true,
+    totalProgressCounter: '10/15',
+    totalProgressPercentage: 30,
+    cancelButton: {
+        label: 'Cancel all',
+        onClick: () => { },
+    },
+    generalActions: {
+        onCancel: () => { },
+        onContinue: () => { },
+        onPause: () => { },
+        onRetry: () => { },
+    },
+    onCollapsed: () => { },
+};
+export const MOCK_UPLOAD_ITEMS_LIST = [
+    MOCK_TOAST_LOADING_ITEM,
+    MOCK_TOAST_PAUSED_ITEM,
+    MOCK_TOAST_ERROR_ITEM,
+    MOCK_TOAST_UPLOADED_ITEM,
+    Object.assign(Object.assign({}, MOCK_TOAST_UPLOADED_ITEM), { id: '5' }),
+    Object.assign(Object.assign({}, MOCK_TOAST_UPLOADED_ITEM), { id: '6' }),
+];

package/dist/esm/helperComponents/ButtonAction/styles.module.css

@@ -1,8 +1,8 @@
 .buttonAction{
   border-radius:var(--radius-toaster-toast-system-event-button, 8px);
   height:var(--size-toaster-toast-system-event-button, 32px);
-  padding-left:var(--space-toaster-system-event-padding, 8px);
-  padding-right:var(--space-toaster-system-event-padding, 8px);
+  padding-left:var(--space-toaster-toast-system-event-padding, 8px);
+  padding-right:var(--space-toaster-toast-system-event-padding, 8px);
   font-family:var(--sans-body-m-font-family, SB Sans Interface);
   font-weight:var(--sans-body-m-font-weight, Regular);
   line-height:var(--sans-body-m-line-height, 20px);

package/dist/esm/helperComponents/ButtonTextNeutral/ButtonTextNeutral.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from 'react';
+export type ButtonTextNeutralProps = {
+    label: string;
+    onClick(e: MouseEvent<HTMLButtonElement>): void;
+    critical?: boolean;
+};
+export declare function ButtonTextNeutral({ label, onClick, critical }: ButtonTextNeutralProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ButtonTextNeutral/ButtonTextNeutral.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './styles.module.css';
+export function ButtonTextNeutral({ label, onClick, critical }) {
+    return (_jsx("button", { type: 'button', className: styles.buttonTextNeutral, onClick: onClick, "aria-label": 'action', "data-critical": critical || undefined, children: label }));
+}

package/dist/esm/helperComponents/ButtonTextNeutral/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonTextNeutral';

package/dist/esm/helperComponents/ButtonTextNeutral/index.js

@@ -0,0 +1 @@
+export * from './ButtonTextNeutral';

package/dist/esm/helperComponents/ButtonTextNeutral/styles.module.css

@@ -0,0 +1,32 @@
+.buttonTextNeutral{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  color:var(--sys-invert-neutral-text-light, #8b8e9b);
+  background-color:transparent;
+  border:none;
+}
+.buttonTextNeutral:hover{
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.buttonTextNeutral:focus, .buttonTextNeutral:active{
+  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
+}
+.buttonTextNeutral:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+  outline-color:var(--sys-available-on-complementary, #ffffff);
+  outline-offset:var(--spacing-state-focus-offset, 2px);
+}

package/dist/esm/helpers.js

@@ -1,9 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 // eslint-disable-next-line react/no-deprecated
 import { render } from 'react-dom';
 import { toast } from 'react-toastify';
 import { isBrowser } from '@snack-uikit/utils';
 import { ToasterContainer, ToastSystemEvent, ToastUserAction, } from './components';
+import { ToastUploadForToaster } from './components/ToastUpload/ToastUploadToaster';
 import { AUTO_CLOSE_TIME, TOASTER_CONTAINER_DEFAULT_PROPS, TOASTER_CONTAINER_PREFIX, TOASTER_ROOT_ID, TOASTER_TYPE, } from './constants';
 function getToasterContainer({ type, toasterParent, containerProps, }) {
     const containerId = (containerProps === null || containerProps === void 0 ? void 0 : containerProps.containerId) || `${TOASTER_CONTAINER_PREFIX}${type}`;
@@ -37,6 +49,8 @@ function getToastComponent({ type, toasterProps, }) {
             return _jsx(ToastUserAction, Object.assign({}, toasterProps));
         case TOASTER_TYPE.SystemEvent:
             return _jsx(ToastSystemEvent, Object.assign({}, toasterProps));
+        case TOASTER_TYPE.Upload:
+            return _jsx(ToastUploadForToaster, Object.assign({}, toasterProps));
         default:
             return undefined;
     }
@@ -233,7 +247,31 @@ const systemEvent = {
         return toast.dismiss(id);
     },
 };
+const upload = {
+    startOrUpdate(_a) {
+        var { id } = _a, options = __rest(_a, ["id"]);
+        const toastId = id || TOASTER_TYPE.Upload;
+        if (toast.isActive(toastId)) {
+            return updateToast(toastId, {
+                type: TOASTER_TYPE.Upload,
+                toasterProps: Object.assign(Object.assign({}, options), { loading: true }),
+            });
+        }
+        return openToast({
+            type: TOASTER_TYPE.Upload,
+            toasterProps: Object.assign(Object.assign({}, options), { loading: true }),
+            toastOptions: {
+                id: toastId,
+                onClose: options.onClose,
+            },
+        });
+    },
+    dismiss(id) {
+        return toast.dismiss(id);
+    },
+};
 export const toaster = {
     userAction,
     systemEvent,
+    upload,
 };

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
 export { toaster, openToast, updateToast, dismissToast } from './helpers';
-export type { ToastSystemEventProps, ToastUserActionProps, ToasterContainerProps } from './components';
-export type { Toaster, UpdateToast, OpenToast, UserActionOptions, SystemEventOptions, ToasterId, ToastOptions, } from './types';
+export type { ToastSystemEventProps, ToastUserActionProps, ToasterContainerProps, ToastUploadProps, } from './components';
+export type { Toaster, UpdateToast, OpenToast, UserActionOptions, SystemEventOptions, ToasterId, ToastOptions, UploadOptions, } from './types';
 export { TOASTER_TYPE } from './constants';

package/dist/esm/testIds.d.ts

@@ -16,3 +16,17 @@ export declare const TOAST_USER_ACTION_TEST_IDS: {
     loader: string;
     link: string;
 };
+export declare const TOAST_UPLOAD_TEST_IDS: {
+    main: string;
+    close: string;
+    title: string;
+    description: string;
+    counter: string;
+    progress: string;
+    list: string;
+    collapseButton: string;
+    progressBar: string;
+    uploadItem: string;
+    uploadItemLink: string;
+    uploadItemCancel: string;
+};

package/dist/esm/testIds.js

@@ -18,3 +18,18 @@ export const TOAST_USER_ACTION_TEST_IDS = {
     loader: `${TOAST_USER_ACTION_TEST_ID}__loader`,
     link: `${TOAST_USER_ACTION_TEST_ID}__link`,
 };
+const TOAST_UPLOAD_TEST_ID = 'toast-upload';
+export const TOAST_UPLOAD_TEST_IDS = {
+    main: TOAST_UPLOAD_TEST_ID,
+    close: `${TOAST_UPLOAD_TEST_ID}__close`,
+    title: `${TOAST_UPLOAD_TEST_ID}__title`,
+    description: `${TOAST_UPLOAD_TEST_ID}__description`,
+    counter: `${TOAST_UPLOAD_TEST_ID}__counter`,
+    progress: `${TOAST_UPLOAD_TEST_ID}__progress`,
+    list: `${TOAST_UPLOAD_TEST_ID}__list`,
+    collapseButton: `${TOAST_UPLOAD_TEST_ID}__collapseButton`,
+    progressBar: `${TOAST_UPLOAD_TEST_ID}__progressBar`,
+    uploadItem: `${TOAST_UPLOAD_TEST_ID}__uploadItem`,
+    uploadItemLink: `${TOAST_UPLOAD_TEST_ID}__uploadItemLink`,
+    uploadItemCancel: `${TOAST_UPLOAD_TEST_ID}__uploadItemCancel`,
+};

package/dist/esm/types.d.ts

@@ -1,6 +1,6 @@
 import { Id, ToastOptions as RtToastOptions } from 'react-toastify';
 import { ValueOf } from '@snack-uikit/utils';
-import { ToasterContainerProps, ToastSystemEventProps, ToastUserActionProps } from './components';
+import { ToasterContainerProps, ToastSystemEventProps, ToastUploadProps, ToastUserActionProps } from './components';
 import { TOASTER_TYPE } from './constants';
 export type ToasterId = Id;
 export type PromisedId = Promise<ToasterId>;
@@ -13,6 +13,9 @@ export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
     [TOASTER_TYPE.UserAction]: ToastUserActionProps;
     [TOASTER_TYPE.SystemEvent]: ToastSystemEventProps;
+    [TOASTER_TYPE.Upload]: ToastUploadProps & {
+        loading: boolean;
+    };
 };
 type OpenNotificationProps<T extends keyof ToasterPropsMap> = {
     type: T;
@@ -33,6 +36,7 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(id: string | number,
 }) => void;
 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: {
         success(options: UserActionOptions): PromisedId;
@@ -62,5 +66,9 @@ export type Toaster = {
         };
         dismiss(id?: ToasterId): void;
     };
+    upload: {
+        startOrUpdate(options: UploadOptions): void;
+        dismiss(id?: ToasterId): void;
+    };
 };
 export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toaster",
-  "version": "0.8.16",
+  "version": "0.8.17-preview-bc9ca5dd.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,13 +36,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.25.1",
-    "@snack-uikit/link": "0.15.12",
+    "@snack-uikit/icons": "0.25.2-preview-bc9ca5dd.0",
+    "@snack-uikit/link": "0.15.13-preview-bc9ca5dd.0",
     "@snack-uikit/loaders": "0.9.2",
-    "@snack-uikit/truncate-string": "0.6.12",
+    "@snack-uikit/progress-bar": "0.1.4",
+    "@snack-uikit/truncate-string": "0.6.13-preview-bc9ca5dd.0",
     "@snack-uikit/utils": "3.8.0",
     "classnames": "2.5.1",
     "react-toastify": "10.0.5"
   },
-  "gitHead": "83190fc4f4d6dac84d3801ac3fe18c73354e1029"
+  "gitHead": "c0c351479d4c36d31cfc204781692ab972d7262d"
 }

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

@@ -33,7 +33,7 @@
 
 .buttonClose {
   @include styles-theme-variables.composite-var(
-    styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-close
+    styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral
   );
 
   cursor: pointer;
@@ -159,7 +159,7 @@
   box-sizing: border-box;
   width: calc(
     styles-tokens-toaster-toasterSystemEvent.$size-toaster-toast-system-event-container -
-      (2 * styles-tokens-toaster-toasterSystemEvent.$space-toaster-system-event-padding)
+      (2 * styles-tokens-toaster-toasterSystemEvent.$space-toaster-toast-system-event-padding)
   );
   max-width: 100%;
 

package/src/components/ToastUpload/ToastUpload.tsx

@@ -0,0 +1,169 @@
+import cn from 'classnames';
+import { MouseEvent } from 'react';
+import { ToastContentProps as RtToastContentProps } from 'react-toastify';
+
+import { ChevronDownSVG, ChevronUpSVG, CrossSVG } from '@snack-uikit/icons';
+import { ProgressBar } from '@snack-uikit/progress-bar';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ButtonTextNeutral, ButtonTextNeutralProps } from '../../helperComponents/ButtonTextNeutral';
+import { TOAST_UPLOAD_TEST_IDS } from '../../testIds';
+import { progressBarAppearanceByStatus } from './constants';
+import { ButtonIcon } from './helperComponents/ButtonIcon';
+import { FileItem } from './helperComponents/FileItem';
+import { LoadingStatus } from './helperComponents/LoadingStatus';
+import styles from './styles.module.scss';
+import { ToastUploadStatus, UploadActions, UploadItem } from './types';
+import { formatPercent } from './utils';
+
+export type ToastUploadProps = Partial<RtToastContentProps> &
+  WithSupportProps<{
+    /**
+     * Общий статус загрузки
+     */
+    status: ToastUploadStatus;
+    /**
+     * Заголовок тостера
+     */
+    title: string;
+    /**
+     * Описание статуса загрузки
+     */
+    description: string;
+    /**
+     * Каунтер общего прогресса
+     */
+    totalProgressCounter: string;
+    /**
+     * Процент прогресса
+     */
+    totalProgressPercentage: number;
+    /**
+     * Закрыть тостер
+     */
+    onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+    /**
+     * Показывать кнопку закрытия тостера
+     */
+    closable?: boolean;
+    /**
+     * CSS-класс контейнера
+     */
+    className?: string;
+    /**
+     * Загружаемые элементы
+     */
+    items: UploadItem[];
+    /**
+     * Тостер свернут/развернут
+     */
+    collapsed: boolean;
+    /**
+     * Развернуть/свернуть тостер
+     */
+    onCollapsed: (collapsed: boolean) => void;
+    /**
+     * Экшены для управления загрузкой
+     */
+    generalActions: UploadActions;
+    /**
+     *  Отмена всей загрузки
+     */
+    cancelButton?: ButtonTextNeutralProps;
+  }>;
+
+export function ToastUpload({
+  status,
+  title,
+  description,
+  totalProgressCounter,
+  totalProgressPercentage,
+  closeToast,
+  onCloseClick,
+  closable,
+  className,
+  items,
+  collapsed,
+  onCollapsed,
+  generalActions,
+  cancelButton,
+  ...rest
+}: ToastUploadProps) {
+  const handleCloseClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onCloseClick ? onCloseClick(e, closeToast) : closeToast?.();
+  };
+
+  const handleCollapseClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onCollapsed(!collapsed);
+  };
+
+  return (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-collapsed={collapsed}>
+      <div className={styles.titleLine}>
+        <div className={styles.titleLineBody}>
+          <div className={styles.title} data-test-id={TOAST_UPLOAD_TEST_IDS.title}>
+            {title}
+          </div>
+
+          {cancelButton && <ButtonTextNeutral {...cancelButton} />}
+
+          <ButtonIcon onClick={handleCollapseClick} data-test-id={TOAST_UPLOAD_TEST_IDS.collapseButton}>
+            {collapsed ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          </ButtonIcon>
+
+          {closable && (
+            <ButtonIcon
+              type='button'
+              className={styles.buttonAction}
+              onClick={handleCloseClick}
+              data-test-id={TOAST_UPLOAD_TEST_IDS.close}
+            >
+              <CrossSVG />
+            </ButtonIcon>
+          )}
+        </div>
+
+        <div className={styles.generalProgress}>
+          <div className={styles.statusLine}>
+            <div className={styles.statusWrap}>
+              <LoadingStatus status={status} actions={generalActions} />
+
+              <span
+                className={styles.description}
+                data-status={status}
+                data-test-id={TOAST_UPLOAD_TEST_IDS.description}
+              >
+                {description}
+              </span>
+            </div>
+
+            <span className={styles.totalCounter} data-test-id={TOAST_UPLOAD_TEST_IDS.counter}>
+              {totalProgressCounter}
+            </span>
+
+            <span className={styles.totalPercentage} data-test-id={TOAST_UPLOAD_TEST_IDS.progress}>
+              {formatPercent(totalProgressPercentage)}
+            </span>
+          </div>
+
+          {!collapsed && (
+            <ProgressBar
+              progress={totalProgressPercentage}
+              size='xs'
+              appearance={progressBarAppearanceByStatus[status]}
+              data-test-id={TOAST_UPLOAD_TEST_IDS.progressBar}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className={styles.list} data-collapsed={collapsed} data-test-id={TOAST_UPLOAD_TEST_IDS.list}>
+        {items.map(item => (
+          <FileItem key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ToastUpload/ToastUploadToaster.tsx

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+import { ToastUpload, ToastUploadProps } from './ToastUpload';
+
+export type ToastUploadToasterProps = Omit<ToastUploadProps, 'collapsed' | 'onCollapsed'>;
+
+export function ToastUploadForToaster(props: ToastUploadToasterProps) {
+  const [collapsed, setCollapsed] = useState(true);
+
+  return <ToastUpload {...props} collapsed={collapsed} onCollapsed={setCollapsed} />;
+}

package/src/components/ToastUpload/constants.ts

@@ -0,0 +1,26 @@
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+
+import { ToastUploadStatus } from './types';
+
+export const TOAST_UPLOAD_STATUS = {
+  Loading: 'loading',
+  Pause: 'pause',
+  Error: 'error',
+  Uploaded: 'uploaded',
+  ErrorUploaded: 'errorUploaded',
+} as const;
+
+export const TOAST_UPLOAD_ITEM_STATUS = {
+  Loading: 'loading',
+  Pause: 'pause',
+  Error: 'error',
+  Uploaded: 'uploaded',
+} as const;
+
+export const progressBarAppearanceByStatus: Record<ToastUploadStatus, ProgressBarProps['appearance']> = {
+  pause: 'neutral',
+  loading: 'green',
+  uploaded: 'green',
+  errorUploaded: 'red',
+  error: 'red',
+};