@alfalab/core-components 22.3.0 → 23.2.0

package/file-upload-item/cssm/Component.js

@@ -8,7 +8,8 @@ var coreComponentsSpinner = require('../../spinner/cssm');
 var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
 var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 var AlertCircleMIcon = require('@alfalab/icons-glyph/AlertCircleMIcon');
-require('@alfalab/icons-glyph');
+var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
+var iconsGlyph = require('@alfalab/icons-glyph');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
 
@@ -35,6 +36,9 @@ var FileUploadItem = function (_a) {
             onRestore(id);
     }, [id, onRestore]);
     var renderIcon = React.useCallback(function () {
+        if (showRestore) {
+            return React__default['default'].createElement(iconsGlyph.ClockMIcon, { className: styles__default['default'].restoreIcon });
+        }
         switch (uploadStatus) {
             case 'ERROR':
                 return React__default['default'].createElement(AlertCircleMIcon.AlertCircleMIcon, { className: styles__default['default'].errorIcon });
@@ -42,25 +46,29 @@ var FileUploadItem = function (_a) {
                 return React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles__default['default'].successIcon });
             case 'LOADING':
             case 'UPLOADING':
-                return React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true });
+                return (React__default['default'].createElement("div", { className: styles__default['default'].spinnerWrapper },
+                    React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true, className: styles__default['default'].spinner })));
             default: {
                 return React__default['default'].createElement(Icon, { className: styles__default['default'].icon });
             }
         }
-    }, [uploadStatus]);
-    var renderName = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles__default['default'].name }, downloadLink ? (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
+    }, [showRestore, uploadStatus]);
+    var renderInfoSection = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles__default['default'].infoSection },
+        React__default['default'].createElement("div", { className: styles__default['default'].name }, name),
+        uploadStatus === 'ERROR' && error && (React__default['default'].createElement("div", { className: styles__default['default'].errorWrapper, role: 'alert' }, error)))); }, [name, uploadStatus, error]);
     var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
+    var showDownload = Boolean(downloadLink) && !showRestore;
     return (React__default['default'].createElement("div", { className: cn__default['default'](className, styles__default['default'].component, uploadStatus && styles__default['default'][uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
         React__default['default'].createElement("div", { className: styles__default['default'].info },
             renderIcon(),
-            renderName(),
+            renderInfoSection(),
             children,
-            uploadStatus === 'UPLOADING' && React__default['default'].createElement("span", null, Math.round(uploadPercent) + "%"),
-            uploadStatus === 'ERROR' && (React__default['default'].createElement("span", { className: styles__default['default'].error, role: 'alert' }, error)),
+            uploadStatus === 'UPLOADING' && (React__default['default'].createElement("span", { className: styles__default['default'].uploadPercent }, Math.round(uploadPercent) + "%")),
             showMeta && (React__default['default'].createElement("div", { className: styles__default['default'].meta },
                 uploadDate && React__default['default'].createElement("span", { key: uploadDate }, uploadDate),
                 size && (React__default['default'].createElement("span", { key: size, className: styles__default['default'].size }, utils.humanFileSize(size)))))),
         showRestore && (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, className: styles__default['default'].restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
+        showDownload && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownMIcon.PointerDownMIcon, className: styles__default['default'].download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, download: download })),
         showDelete && !showRestore && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: CrossMIcon.CrossMIcon, onClick: handleDelete, className: styles__default['default'].delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
 };
 

package/file-upload-item/cssm/index.js

@@ -8,6 +8,7 @@ require('../../spinner/cssm');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/AlertCircleMIcon');
+require('@alfalab/icons-glyph/PointerDownMIcon');
 require('@alfalab/icons-glyph');
 require('./utils.js');
 require('./index.module.css');

package/file-upload-item/cssm/index.module.css

@@ -16,8 +16,10 @@
 }
 :root {
     --gap-3xs: 2px;
+    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
+    --gap-xl: 24px;
 }
 .component {
     font-size: 13px;
@@ -26,18 +28,24 @@
 
     display: flex;
     width: 100%;
-    align-items: center;
-    border-bottom: 1px solid var(--color-light-border-primary);
+    padding: var(--gap-xs);
     color: var(--color-light-text-secondary);
-    padding: 0 0 var(--gap-xs) 0;
-    margin-bottom: var(--gap-xs)
+    box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
+    box-sizing: border-box
 }
 .component svg {
         display: block;
     }
+.infoSection {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-top: var(--gap-2xs);
+    margin-left: var(--gap-s);
+    min-width: 40%;
+}
 .info {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
     flex: 1;
 }
@@ -55,13 +63,10 @@
     color: var(--color-light-graphic-positive);
 }
 .name {
-    flex: 1;
-    margin-left: var(--gap-xs);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--color-light-text-primary);
-    min-width: 40%
+    color: var(--color-light-text-primary)
 }
 .name a {
         display: block;
@@ -70,8 +75,9 @@
 .meta {
     display: flex;
     align-items: center;
-
-    white-space: nowrap
+    white-space: nowrap;
+    margin-right: var(--gap-2xs);
+    margin-left: var(--gap-xl)
 }
 .meta > * {
         margin-right: var(--gap-s)
@@ -80,20 +86,47 @@
             margin-right: 0;
         }
 .size {
-    width: 65px;
     text-align: right;
 }
-.delete {
+.delete,
+.download {
     height: 24px;
     width: 24px;
-    margin-left: var(--gap-s);
+    margin-left: var(--gap-xs)
 }
-.error {
+.delete svg, .download svg {
+        width: 18px;
+        height: 18px;
+    }
+.errorWrapper {
+    margin-top: var(--gap-s);
     color: var(--color-light-text-accent)
 }
 @media (--small-only) {
-.error {
+.errorWrapper {
         flex: 1 0 100%;
         margin-top: var(--gap-3xs)
 }
     }
+.restore {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    margin-left: var(--gap-s);
+}
+.spinnerWrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+}
+.spinner {
+    width: 20px;
+    height: 20px;
+}
+.uploadPercent {
+    margin-top: var(--gap-2xs);
+    margin-left: var(--gap-xl);
+}

package/file-upload-item/esm/Component.d.ts

@@ -24,7 +24,7 @@ type FileUploadItemProps = {
      */
     uploadDate?: string;
     /**
-     * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
+     * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
      */
     downloadLink?: string;
     /**

package/file-upload-item/esm/Component.js

@@ -6,10 +6,11 @@ import { Spinner } from '../../spinner/esm';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
-import '@alfalab/icons-glyph';
+import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
+import { ClockMIcon } from '@alfalab/icons-glyph';
 import { fileIcon, humanFileSize } from './utils.js';
 
-var styles = {"component":"file-upload-item__component_76rbl","info":"file-upload-item__info_76rbl","icon":"file-upload-item__icon_76rbl","errorIcon":"file-upload-item__errorIcon_76rbl","successIcon":"file-upload-item__successIcon_76rbl","name":"file-upload-item__name_76rbl","meta":"file-upload-item__meta_76rbl","size":"file-upload-item__size_76rbl","delete":"file-upload-item__delete_76rbl","error":"file-upload-item__error_76rbl"};
+var styles = {"component":"file-upload-item__component_1x70o","infoSection":"file-upload-item__infoSection_1x70o","info":"file-upload-item__info_1x70o","icon":"file-upload-item__icon_1x70o","errorIcon":"file-upload-item__errorIcon_1x70o","successIcon":"file-upload-item__successIcon_1x70o","name":"file-upload-item__name_1x70o","meta":"file-upload-item__meta_1x70o","size":"file-upload-item__size_1x70o","delete":"file-upload-item__delete_1x70o","download":"file-upload-item__download_1x70o","errorWrapper":"file-upload-item__errorWrapper_1x70o","restore":"file-upload-item__restore_1x70o","spinnerWrapper":"file-upload-item__spinnerWrapper_1x70o","spinner":"file-upload-item__spinner_1x70o","uploadPercent":"file-upload-item__uploadPercent_1x70o"};
 require('./index.css');
 
 var FileUploadItem = function (_a) {
@@ -29,6 +30,9 @@ var FileUploadItem = function (_a) {
             onRestore(id);
     }, [id, onRestore]);
     var renderIcon = useCallback(function () {
+        if (showRestore) {
+            return React.createElement(ClockMIcon, { className: styles.restoreIcon });
+        }
         switch (uploadStatus) {
             case 'ERROR':
                 return React.createElement(AlertCircleMIcon, { className: styles.errorIcon });
@@ -36,25 +40,29 @@ var FileUploadItem = function (_a) {
                 return React.createElement(CheckmarkCircleMIcon, { className: styles.successIcon });
             case 'LOADING':
             case 'UPLOADING':
-                return React.createElement(Spinner, { visible: true });
+                return (React.createElement("div", { className: styles.spinnerWrapper },
+                    React.createElement(Spinner, { visible: true, className: styles.spinner })));
             default: {
                 return React.createElement(Icon, { className: styles.icon });
             }
         }
-    }, [uploadStatus]);
-    var renderName = useCallback(function () { return (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
+    }, [showRestore, uploadStatus]);
+    var renderInfoSection = useCallback(function () { return (React.createElement("div", { className: styles.infoSection },
+        React.createElement("div", { className: styles.name }, name),
+        uploadStatus === 'ERROR' && error && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, error)))); }, [name, uploadStatus, error]);
     var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
+    var showDownload = Boolean(downloadLink) && !showRestore;
     return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
         React.createElement("div", { className: styles.info },
             renderIcon(),
-            renderName(),
+            renderInfoSection(),
             children,
-            uploadStatus === 'UPLOADING' && React.createElement("span", null, Math.round(uploadPercent) + "%"),
-            uploadStatus === 'ERROR' && (React.createElement("span", { className: styles.error, role: 'alert' }, error)),
+            uploadStatus === 'UPLOADING' && (React.createElement("span", { className: styles.uploadPercent }, Math.round(uploadPercent) + "%")),
             showMeta && (React.createElement("div", { className: styles.meta },
                 uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
                 size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
         showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
+        showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownMIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, download: download })),
         showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossMIcon, onClick: handleDelete, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
 };
 

package/file-upload-item/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1e54w */
+/* hash: 1m858 */
 :root {
     --color-light-border-primary: #dbdee1;
     --color-light-graphic-negative: #f15045;
@@ -17,84 +17,117 @@
 }
 :root {
     --gap-3xs: 2px;
+    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
+    --gap-xl: 24px;
 }
-.file-upload-item__component_76rbl {
+.file-upload-item__component_1x70o {
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
 
     display: flex;
     width: 100%;
-    align-items: center;
-    border-bottom: 1px solid var(--color-light-border-primary);
+    padding: var(--gap-xs);
     color: var(--color-light-text-secondary);
-    padding: 0 0 var(--gap-xs) 0;
-    margin-bottom: var(--gap-xs)
+    box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
+    box-sizing: border-box
 }
-.file-upload-item__component_76rbl svg {
+.file-upload-item__component_1x70o svg {
         display: block;
     }
-.file-upload-item__info_76rbl {
+.file-upload-item__infoSection_1x70o {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-top: var(--gap-2xs);
+    margin-left: var(--gap-s);
+    min-width: 40%;
+}
+.file-upload-item__info_1x70o {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
     flex: 1;
 }
-.file-upload-item__icon_76rbl {
+.file-upload-item__icon_1x70o {
     display: block;
     flex-shrink: 0;
     color: var(--color-light-text-primary);
 }
-.file-upload-item__errorIcon_76rbl {
+.file-upload-item__errorIcon_1x70o {
     flex-shrink: 0;
     color: var(--color-light-graphic-negative);
 }
-.file-upload-item__successIcon_76rbl {
+.file-upload-item__successIcon_1x70o {
     flex-shrink: 0;
     color: var(--color-light-graphic-positive);
 }
-.file-upload-item__name_76rbl {
-    flex: 1;
-    margin-left: var(--gap-xs);
+.file-upload-item__name_1x70o {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--color-light-text-primary);
-    min-width: 40%
+    color: var(--color-light-text-primary)
 }
-.file-upload-item__name_76rbl a {
+.file-upload-item__name_1x70o a {
         display: block;
         margin-bottom: 1px;
     }
-.file-upload-item__meta_76rbl {
+.file-upload-item__meta_1x70o {
     display: flex;
     align-items: center;
-
-    white-space: nowrap
+    white-space: nowrap;
+    margin-right: var(--gap-2xs);
+    margin-left: var(--gap-xl)
 }
-.file-upload-item__meta_76rbl > * {
+.file-upload-item__meta_1x70o > * {
         margin-right: var(--gap-s)
     }
-.file-upload-item__meta_76rbl > *:last-child {
+.file-upload-item__meta_1x70o > *:last-child {
             margin-right: 0;
         }
-.file-upload-item__size_76rbl {
-    width: 65px;
+.file-upload-item__size_1x70o {
     text-align: right;
 }
-.file-upload-item__delete_76rbl {
+.file-upload-item__delete_1x70o,
+.file-upload-item__download_1x70o {
     height: 24px;
     width: 24px;
-    margin-left: var(--gap-s);
+    margin-left: var(--gap-xs)
 }
-.file-upload-item__error_76rbl {
+.file-upload-item__delete_1x70o svg, .file-upload-item__download_1x70o svg {
+        width: 18px;
+        height: 18px;
+    }
+.file-upload-item__errorWrapper_1x70o {
+    margin-top: var(--gap-s);
     color: var(--color-light-text-accent)
 }
 @media (--small-only) {
-.file-upload-item__error_76rbl {
+.file-upload-item__errorWrapper_1x70o {
         flex: 1 0 100%;
         margin-top: var(--gap-3xs)
 }
     }
+.file-upload-item__restore_1x70o {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    margin-left: var(--gap-s);
+}
+.file-upload-item__spinnerWrapper_1x70o {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+}
+.file-upload-item__spinner_1x70o {
+    width: 20px;
+    height: 20px;
+}
+.file-upload-item__uploadPercent_1x70o {
+    margin-top: var(--gap-2xs);
+    margin-left: var(--gap-xl);
+}

package/file-upload-item/esm/index.js

@@ -6,6 +6,7 @@ import '../../spinner/esm';
 import '@alfalab/icons-glyph/CrossMIcon';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/AlertCircleMIcon';
+import '@alfalab/icons-glyph/PointerDownMIcon';
 import '@alfalab/icons-glyph';
 import './utils.js';
 export { FileUploadItem } from './Component.js';

package/file-upload-item/index.css

@@ -1,4 +1,4 @@
-/* hash: 1e54w */
+/* hash: 1m858 */
 :root {
     --color-light-border-primary: #dbdee1;
     --color-light-graphic-negative: #f15045;
@@ -17,84 +17,117 @@
 }
 :root {
     --gap-3xs: 2px;
+    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
+    --gap-xl: 24px;
 }
-.file-upload-item__component_76rbl {
+.file-upload-item__component_1x70o {
     font-size: 13px;
     line-height: 16px;
     font-weight: 400;
 
     display: flex;
     width: 100%;
-    align-items: center;
-    border-bottom: 1px solid var(--color-light-border-primary);
+    padding: var(--gap-xs);
     color: var(--color-light-text-secondary);
-    padding: 0 0 var(--gap-xs) 0;
-    margin-bottom: var(--gap-xs)
+    box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
+    box-sizing: border-box
 }
-.file-upload-item__component_76rbl svg {
+.file-upload-item__component_1x70o svg {
         display: block;
     }
-.file-upload-item__info_76rbl {
+.file-upload-item__infoSection_1x70o {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin-top: var(--gap-2xs);
+    margin-left: var(--gap-s);
+    min-width: 40%;
+}
+.file-upload-item__info_1x70o {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
     flex: 1;
 }
-.file-upload-item__icon_76rbl {
+.file-upload-item__icon_1x70o {
     display: block;
     flex-shrink: 0;
     color: var(--color-light-text-primary);
 }
-.file-upload-item__errorIcon_76rbl {
+.file-upload-item__errorIcon_1x70o {
     flex-shrink: 0;
     color: var(--color-light-graphic-negative);
 }
-.file-upload-item__successIcon_76rbl {
+.file-upload-item__successIcon_1x70o {
     flex-shrink: 0;
     color: var(--color-light-graphic-positive);
 }
-.file-upload-item__name_76rbl {
-    flex: 1;
-    margin-left: var(--gap-xs);
+.file-upload-item__name_1x70o {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--color-light-text-primary);
-    min-width: 40%
+    color: var(--color-light-text-primary)
 }
-.file-upload-item__name_76rbl a {
+.file-upload-item__name_1x70o a {
         display: block;
         margin-bottom: 1px;
     }
-.file-upload-item__meta_76rbl {
+.file-upload-item__meta_1x70o {
     display: flex;
     align-items: center;
-
-    white-space: nowrap
+    white-space: nowrap;
+    margin-right: var(--gap-2xs);
+    margin-left: var(--gap-xl)
 }
-.file-upload-item__meta_76rbl > * {
+.file-upload-item__meta_1x70o > * {
         margin-right: var(--gap-s)
     }
-.file-upload-item__meta_76rbl > *:last-child {
+.file-upload-item__meta_1x70o > *:last-child {
             margin-right: 0;
         }
-.file-upload-item__size_76rbl {
-    width: 65px;
+.file-upload-item__size_1x70o {
     text-align: right;
 }
-.file-upload-item__delete_76rbl {
+.file-upload-item__delete_1x70o,
+.file-upload-item__download_1x70o {
     height: 24px;
     width: 24px;
-    margin-left: var(--gap-s);
+    margin-left: var(--gap-xs)
 }
-.file-upload-item__error_76rbl {
+.file-upload-item__delete_1x70o svg, .file-upload-item__download_1x70o svg {
+        width: 18px;
+        height: 18px;
+    }
+.file-upload-item__errorWrapper_1x70o {
+    margin-top: var(--gap-s);
     color: var(--color-light-text-accent)
 }
 @media (--small-only) {
-.file-upload-item__error_76rbl {
+.file-upload-item__errorWrapper_1x70o {
         flex: 1 0 100%;
         margin-top: var(--gap-3xs)
 }
     }
+.file-upload-item__restore_1x70o {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    margin-left: var(--gap-s);
+}
+.file-upload-item__spinnerWrapper_1x70o {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+}
+.file-upload-item__spinner_1x70o {
+    width: 20px;
+    height: 20px;
+}
+.file-upload-item__uploadPercent_1x70o {
+    margin-top: var(--gap-2xs);
+    margin-left: var(--gap-xl);
+}

package/file-upload-item/index.js

@@ -8,6 +8,7 @@ require('../spinner');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/AlertCircleMIcon');
+require('@alfalab/icons-glyph/PointerDownMIcon');
 require('@alfalab/icons-glyph');
 require('./utils.js');
 var Component = require('./Component.js');

package/file-upload-item/modern/Component.d.ts

@@ -24,7 +24,7 @@ type FileUploadItemProps = {
      */
     uploadDate?: string;
     /**
-     * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
+     * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
      */
     downloadLink?: string;
     /**

package/file-upload-item/modern/Component.js

@@ -3,13 +3,14 @@ import cn from 'classnames';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
-import '@alfalab/icons-glyph';
+import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
+import { ClockMIcon } from '@alfalab/icons-glyph';
 import { IconButton } from '../../icon-button/modern';
 import { Link } from '../../link/modern';
 import { Spinner } from '../../spinner/modern';
 import { fileIcon, humanFileSize } from './utils.js';
 
-var styles = {"component":"file-upload-item__component_76rbl","info":"file-upload-item__info_76rbl","icon":"file-upload-item__icon_76rbl","errorIcon":"file-upload-item__errorIcon_76rbl","successIcon":"file-upload-item__successIcon_76rbl","name":"file-upload-item__name_76rbl","meta":"file-upload-item__meta_76rbl","size":"file-upload-item__size_76rbl","delete":"file-upload-item__delete_76rbl","error":"file-upload-item__error_76rbl"};
+var styles = {"component":"file-upload-item__component_1x70o","infoSection":"file-upload-item__infoSection_1x70o","info":"file-upload-item__info_1x70o","icon":"file-upload-item__icon_1x70o","errorIcon":"file-upload-item__errorIcon_1x70o","successIcon":"file-upload-item__successIcon_1x70o","name":"file-upload-item__name_1x70o","meta":"file-upload-item__meta_1x70o","size":"file-upload-item__size_1x70o","delete":"file-upload-item__delete_1x70o","download":"file-upload-item__download_1x70o","errorWrapper":"file-upload-item__errorWrapper_1x70o","restore":"file-upload-item__restore_1x70o","spinnerWrapper":"file-upload-item__spinnerWrapper_1x70o","spinner":"file-upload-item__spinner_1x70o","uploadPercent":"file-upload-item__uploadPercent_1x70o"};
 require('./index.css');
 
 const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error = uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined, showDelete, showRestore, onDelete, onDownload, onRestore, dataTestId, }) => {
@@ -28,6 +29,9 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
             onRestore(id);
     }, [id, onRestore]);
     const renderIcon = useCallback(() => {
+        if (showRestore) {
+            return React.createElement(ClockMIcon, { className: styles.restoreIcon });
+        }
         switch (uploadStatus) {
             case 'ERROR':
                 return React.createElement(AlertCircleMIcon, { className: styles.errorIcon });
@@ -35,25 +39,29 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
                 return React.createElement(CheckmarkCircleMIcon, { className: styles.successIcon });
             case 'LOADING':
             case 'UPLOADING':
-                return React.createElement(Spinner, { visible: true });
+                return (React.createElement("div", { className: styles.spinnerWrapper },
+                    React.createElement(Spinner, { visible: true, className: styles.spinner })));
             default: {
                 return React.createElement(Icon, { className: styles.icon });
             }
         }
-    }, [uploadStatus]);
-    const renderName = useCallback(() => (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))), [downloadLink, handleDownload, download, name]);
+    }, [showRestore, uploadStatus]);
+    const renderInfoSection = useCallback(() => (React.createElement("div", { className: styles.infoSection },
+        React.createElement("div", { className: styles.name }, name),
+        uploadStatus === 'ERROR' && error && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, error)))), [name, uploadStatus, error]);
     const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
+    const showDownload = Boolean(downloadLink) && !showRestore;
     return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
         React.createElement("div", { className: styles.info },
             renderIcon(),
-            renderName(),
+            renderInfoSection(),
             children,
-            uploadStatus === 'UPLOADING' && React.createElement("span", null, `${Math.round(uploadPercent)}%`),
-            uploadStatus === 'ERROR' && (React.createElement("span", { className: styles.error, role: 'alert' }, error)),
+            uploadStatus === 'UPLOADING' && (React.createElement("span", { className: styles.uploadPercent }, `${Math.round(uploadPercent)}%`)),
             showMeta && (React.createElement("div", { className: styles.meta },
                 uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
                 size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
         showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
+        showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownMIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, download: download })),
         showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossMIcon, onClick: handleDelete, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
 };