@alfalab/core-components-file-upload-item 5.6.10 → 5.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/Component.d.ts +5 -1
  2. package/Component.js +3 -3
  3. package/cssm/Component.d.ts +5 -1
  4. package/cssm/Component.js +2 -2
  5. package/cssm/index.module.css +17 -12
  6. package/esm/Component.d.ts +5 -1
  7. package/esm/Component.js +3 -3
  8. package/esm/index.css +40 -35
  9. package/index.css +40 -35
  10. package/modern/Component.d.ts +5 -1
  11. package/modern/Component.js +3 -3
  12. package/modern/index.css +40 -35
  13. package/package.json +4 -4
  14. package/src/Component.tsx +8 -1
  15. package/src/index.module.css +12 -12
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, MouseEvent, ReactNode } from "react";
3
+ import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
82
82
  * Разрешить многострочное название файла
83
83
  */
84
84
  multiline?: boolean;
85
+ /**
86
+ * Указывает, где открыть скачиваемый документ
87
+ */
88
+ target?: HTMLAttributeAnchorTarget;
85
89
  /**
86
90
  * Идентификатор для систем автоматизированного тестирования
87
91
  */
package/Component.js CHANGED
@@ -19,11 +19,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"file-upload-item__component_1vzfs","infoSection":"file-upload-item__infoSection_1vzfs","info":"file-upload-item__info_1vzfs","icon":"file-upload-item__icon_1vzfs","errorIcon":"file-upload-item__errorIcon_1vzfs","successIcon":"file-upload-item__successIcon_1vzfs","name":"file-upload-item__name_1vzfs","rowLimit":"file-upload-item__rowLimit_1vzfs","meta":"file-upload-item__meta_1vzfs","size":"file-upload-item__size_1vzfs","delete":"file-upload-item__delete_1vzfs","download":"file-upload-item__download_1vzfs","errorWrapper":"file-upload-item__errorWrapper_1vzfs","restore":"file-upload-item__restore_1vzfs","spinnerWrapper":"file-upload-item__spinnerWrapper_1vzfs","spinner":"file-upload-item__spinner_1vzfs","uploadPercent":"file-upload-item__uploadPercent_1vzfs"};
22
+ var styles = {"component":"file-upload-item__component_11i2p","infoSection":"file-upload-item__infoSection_11i2p","info":"file-upload-item__info_11i2p","icon":"file-upload-item__icon_11i2p","errorIcon":"file-upload-item__errorIcon_11i2p","successIcon":"file-upload-item__successIcon_11i2p","name":"file-upload-item__name_11i2p","rowLimit":"file-upload-item__rowLimit_11i2p","meta":"file-upload-item__meta_11i2p","size":"file-upload-item__size_11i2p","delete":"file-upload-item__delete_11i2p","download":"file-upload-item__download_11i2p","errorWrapper":"file-upload-item__errorWrapper_11i2p","restore":"file-upload-item__restore_11i2p","spinnerWrapper":"file-upload-item__spinnerWrapper_11i2p","spinner":"file-upload-item__spinner_11i2p","uploadPercent":"file-upload-item__uploadPercent_11i2p"};
23
23
  require('./index.css')
24
24
 
25
25
  var FileUploadItem = function (_a) {
26
- var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
26
+ var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, target = _a.target, dataTestId = _a.dataTestId;
27
27
  var handleDownload = function (event) {
28
28
  if (onDownload) {
29
29
  event.preventDefault();
@@ -76,7 +76,7 @@ var FileUploadItem = function (_a) {
76
76
  uploadDate && React__default.default.createElement("span", { key: uploadDate }, uploadDate),
77
77
  size && (React__default.default.createElement("span", { key: size, className: styles.size }, utils.humanFileSize(size)))))),
78
78
  showRestore && (React__default.default.createElement(coreComponentsLink.Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
79
- showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
79
+ showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
80
80
  showDelete && !showRestore && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: CrossSIcon.CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
81
81
  };
82
82
 
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, MouseEvent, ReactNode } from "react";
3
+ import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
82
82
  * Разрешить многострочное название файла
83
83
  */
84
84
  multiline?: boolean;
85
+ /**
86
+ * Указывает, где открыть скачиваемый документ
87
+ */
88
+ target?: HTMLAttributeAnchorTarget;
85
89
  /**
86
90
  * Идентификатор для систем автоматизированного тестирования
87
91
  */
package/cssm/Component.js CHANGED
@@ -22,7 +22,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
22
22
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
23
23
 
24
24
  var FileUploadItem = function (_a) {
25
- var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
25
+ var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, target = _a.target, dataTestId = _a.dataTestId;
26
26
  var handleDownload = function (event) {
27
27
  if (onDownload) {
28
28
  event.preventDefault();
@@ -75,7 +75,7 @@ var FileUploadItem = function (_a) {
75
75
  uploadDate && React__default.default.createElement("span", { key: uploadDate }, uploadDate),
76
76
  size && (React__default.default.createElement("span", { key: size, className: styles__default.default.size }, utils.humanFileSize(size)))))),
77
77
  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")),
78
- showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles__default.default.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
78
+ showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles__default.default.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
79
79
  showDelete && !showRestore && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: CrossSIcon.CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles__default.default.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
80
80
  };
81
81
 
package/cssm/index.module.css CHANGED
@@ -27,6 +27,11 @@
27
27
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
28
28
 
29
29
  /* новые значения, используйте их */
30
+ --gap-2: var(--gap-3xs);
31
+ --gap-4: var(--gap-2xs);
32
+ --gap-8: var(--gap-xs);
33
+ --gap-12: var(--gap-s);
34
+ --gap-24: var(--gap-xl);
30
35
  } :root {
31
36
  } :root {
32
37
  } .component {
@@ -37,7 +42,7 @@
37
42
  display: flex;
38
43
  align-items: flex-start;
39
44
  width: 100%;
40
- padding: var(--gap-xs);
45
+ padding: var(--gap-8);
41
46
  color: var(--color-light-text-secondary);
42
47
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
43
48
  box-sizing: border-box
@@ -49,8 +54,8 @@
49
54
  display: flex;
50
55
  flex-direction: column;
51
56
  flex: 1;
52
- margin-top: var(--gap-2xs);
53
- margin-left: var(--gap-s);
57
+ margin-top: var(--gap-4);
58
+ margin-left: var(--gap-12);
54
59
  min-width: 40%;
55
60
  } .info {
56
61
  display: flex;
@@ -79,11 +84,11 @@
79
84
  } .meta {
80
85
  display: flex;
81
86
  white-space: nowrap;
82
- margin-right: var(--gap-2xs);
87
+ margin-right: var(--gap-4);
83
88
  margin-left: 36px;
84
- padding: var(--gap-2xs) 0
89
+ padding: var(--gap-4) 0
85
90
  } .meta > * {
86
- margin-right: var(--gap-s)
91
+ margin-right: var(--gap-12)
87
92
  } .meta > *:last-child {
88
93
  margin-right: 0;
89
94
  } .size {
@@ -92,17 +97,17 @@
92
97
  .download {
93
98
  height: 24px;
94
99
  width: 24px;
95
- margin-left: var(--gap-xs);
100
+ margin-left: var(--gap-8);
96
101
  } .errorWrapper {
97
- margin-top: var(--gap-2xs);
102
+ margin-top: var(--gap-4);
98
103
  color: var(--color-light-text-negative);
99
104
  } .restore {
100
105
  font-size: 14px;
101
106
  line-height: 20px;
102
107
  font-weight: 400;
103
108
 
104
- margin-left: var(--gap-s);
105
- margin-top: var(--gap-3xs);
109
+ margin-left: var(--gap-12);
110
+ margin-top: var(--gap-2);
106
111
  } .spinnerWrapper {
107
112
  display: flex;
108
113
  justify-content: center;
@@ -113,6 +118,6 @@
113
118
  width: 20px;
114
119
  height: 20px;
115
120
  } .uploadPercent {
116
- margin-top: var(--gap-2xs);
117
- margin-left: var(--gap-xl);
121
+ margin-top: var(--gap-4);
122
+ margin-left: var(--gap-24);
118
123
  }
package/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, MouseEvent, ReactNode } from "react";
3
+ import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
82
82
  * Разрешить многострочное название файла
83
83
  */
84
84
  multiline?: boolean;
85
+ /**
86
+ * Указывает, где открыть скачиваемый документ
87
+ */
88
+ target?: HTMLAttributeAnchorTarget;
85
89
  /**
86
90
  * Идентификатор для систем автоматизированного тестирования
87
91
  */
package/esm/Component.js CHANGED
@@ -10,11 +10,11 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { fileIcon, humanFileSize } from './utils.js';
12
12
 
13
- var styles = {"component":"file-upload-item__component_1vzfs","infoSection":"file-upload-item__infoSection_1vzfs","info":"file-upload-item__info_1vzfs","icon":"file-upload-item__icon_1vzfs","errorIcon":"file-upload-item__errorIcon_1vzfs","successIcon":"file-upload-item__successIcon_1vzfs","name":"file-upload-item__name_1vzfs","rowLimit":"file-upload-item__rowLimit_1vzfs","meta":"file-upload-item__meta_1vzfs","size":"file-upload-item__size_1vzfs","delete":"file-upload-item__delete_1vzfs","download":"file-upload-item__download_1vzfs","errorWrapper":"file-upload-item__errorWrapper_1vzfs","restore":"file-upload-item__restore_1vzfs","spinnerWrapper":"file-upload-item__spinnerWrapper_1vzfs","spinner":"file-upload-item__spinner_1vzfs","uploadPercent":"file-upload-item__uploadPercent_1vzfs"};
13
+ var styles = {"component":"file-upload-item__component_11i2p","infoSection":"file-upload-item__infoSection_11i2p","info":"file-upload-item__info_11i2p","icon":"file-upload-item__icon_11i2p","errorIcon":"file-upload-item__errorIcon_11i2p","successIcon":"file-upload-item__successIcon_11i2p","name":"file-upload-item__name_11i2p","rowLimit":"file-upload-item__rowLimit_11i2p","meta":"file-upload-item__meta_11i2p","size":"file-upload-item__size_11i2p","delete":"file-upload-item__delete_11i2p","download":"file-upload-item__download_11i2p","errorWrapper":"file-upload-item__errorWrapper_11i2p","restore":"file-upload-item__restore_11i2p","spinnerWrapper":"file-upload-item__spinnerWrapper_11i2p","spinner":"file-upload-item__spinner_11i2p","uploadPercent":"file-upload-item__uploadPercent_11i2p"};
14
14
  require('./index.css')
15
15
 
16
16
  var FileUploadItem = function (_a) {
17
- var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
17
+ var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, target = _a.target, dataTestId = _a.dataTestId;
18
18
  var handleDownload = function (event) {
19
19
  if (onDownload) {
20
20
  event.preventDefault();
@@ -67,7 +67,7 @@ var FileUploadItem = function (_a) {
67
67
  uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
68
68
  size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
69
69
  showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
70
- showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
70
+ showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
71
71
  showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
72
72
  };
73
73
 
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: dt4qp */
1
+ /* hash: 1ym76 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,9 +28,14 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-2: var(--gap-3xs);
32
+ --gap-4: var(--gap-2xs);
33
+ --gap-8: var(--gap-xs);
34
+ --gap-12: var(--gap-s);
35
+ --gap-24: var(--gap-xl);
31
36
  } :root {
32
37
  } :root {
33
- } .file-upload-item__component_1vzfs {
38
+ } .file-upload-item__component_11i2p {
34
39
  font-size: 13px;
35
40
  line-height: 16px;
36
41
  font-weight: 400;
@@ -38,82 +43,82 @@
38
43
  display: flex;
39
44
  align-items: flex-start;
40
45
  width: 100%;
41
- padding: var(--gap-xs);
46
+ padding: var(--gap-8);
42
47
  color: var(--color-light-text-secondary);
43
48
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
44
49
  box-sizing: border-box
45
- } .file-upload-item__component_1vzfs svg {
50
+ } .file-upload-item__component_11i2p svg {
46
51
  display: block;
47
- } .file-upload-item__component_1vzfs:last-child {
52
+ } .file-upload-item__component_11i2p:last-child {
48
53
  box-shadow: none;
49
- } .file-upload-item__infoSection_1vzfs {
54
+ } .file-upload-item__infoSection_11i2p {
50
55
  display: flex;
51
56
  flex-direction: column;
52
57
  flex: 1;
53
- margin-top: var(--gap-2xs);
54
- margin-left: var(--gap-s);
58
+ margin-top: var(--gap-4);
59
+ margin-left: var(--gap-12);
55
60
  min-width: 40%;
56
- } .file-upload-item__info_1vzfs {
61
+ } .file-upload-item__info_11i2p {
57
62
  display: flex;
58
63
  flex-wrap: wrap;
59
64
  flex: 1;
60
65
  overflow: hidden;
61
- } .file-upload-item__icon_1vzfs {
66
+ } .file-upload-item__icon_11i2p {
62
67
  display: block;
63
68
  flex-shrink: 0;
64
69
  color: var(--color-light-neutral-translucent-1300);
65
- } .file-upload-item__errorIcon_1vzfs {
70
+ } .file-upload-item__errorIcon_11i2p {
66
71
  flex-shrink: 0;
67
72
  color: var(--color-light-status-negative);
68
- } .file-upload-item__successIcon_1vzfs {
73
+ } .file-upload-item__successIcon_11i2p {
69
74
  flex-shrink: 0;
70
75
  color: var(--color-light-status-positive);
71
- } .file-upload-item__name_1vzfs {
76
+ } .file-upload-item__name_11i2p {
72
77
  color: var(--color-light-text-primary)
73
- } .file-upload-item__name_1vzfs a {
78
+ } .file-upload-item__name_11i2p a {
74
79
  display: block;
75
80
  margin-bottom: 1px;
76
- } .file-upload-item__name_1vzfs.file-upload-item__rowLimit_1vzfs {
81
+ } .file-upload-item__name_11i2p.file-upload-item__rowLimit_11i2p {
77
82
  white-space: nowrap;
78
83
  overflow: hidden;
79
84
  text-overflow: ellipsis;
80
- } .file-upload-item__meta_1vzfs {
85
+ } .file-upload-item__meta_11i2p {
81
86
  display: flex;
82
87
  white-space: nowrap;
83
- margin-right: var(--gap-2xs);
88
+ margin-right: var(--gap-4);
84
89
  margin-left: 36px;
85
- padding: var(--gap-2xs) 0
86
- } .file-upload-item__meta_1vzfs > * {
87
- margin-right: var(--gap-s)
88
- } .file-upload-item__meta_1vzfs > *:last-child {
90
+ padding: var(--gap-4) 0
91
+ } .file-upload-item__meta_11i2p > * {
92
+ margin-right: var(--gap-12)
93
+ } .file-upload-item__meta_11i2p > *:last-child {
89
94
  margin-right: 0;
90
- } .file-upload-item__size_1vzfs {
95
+ } .file-upload-item__size_11i2p {
91
96
  text-align: right;
92
- } .file-upload-item__delete_1vzfs,
93
- .file-upload-item__download_1vzfs {
97
+ } .file-upload-item__delete_11i2p,
98
+ .file-upload-item__download_11i2p {
94
99
  height: 24px;
95
100
  width: 24px;
96
- margin-left: var(--gap-xs);
97
- } .file-upload-item__errorWrapper_1vzfs {
98
- margin-top: var(--gap-2xs);
101
+ margin-left: var(--gap-8);
102
+ } .file-upload-item__errorWrapper_11i2p {
103
+ margin-top: var(--gap-4);
99
104
  color: var(--color-light-text-negative);
100
- } .file-upload-item__restore_1vzfs {
105
+ } .file-upload-item__restore_11i2p {
101
106
  font-size: 14px;
102
107
  line-height: 20px;
103
108
  font-weight: 400;
104
109
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
107
- } .file-upload-item__spinnerWrapper_1vzfs {
110
+ margin-left: var(--gap-12);
111
+ margin-top: var(--gap-2);
112
+ } .file-upload-item__spinnerWrapper_11i2p {
108
113
  display: flex;
109
114
  justify-content: center;
110
115
  align-items: center;
111
116
  width: 24px;
112
117
  height: 24px;
113
- } .file-upload-item__spinner_1vzfs {
118
+ } .file-upload-item__spinner_11i2p {
114
119
  width: 20px;
115
120
  height: 20px;
116
- } .file-upload-item__uploadPercent_1vzfs {
117
- margin-top: var(--gap-2xs);
118
- margin-left: var(--gap-xl);
121
+ } .file-upload-item__uploadPercent_11i2p {
122
+ margin-top: var(--gap-4);
123
+ margin-left: var(--gap-24);
119
124
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: dt4qp */
1
+ /* hash: 1ym76 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,9 +28,14 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-2: var(--gap-3xs);
32
+ --gap-4: var(--gap-2xs);
33
+ --gap-8: var(--gap-xs);
34
+ --gap-12: var(--gap-s);
35
+ --gap-24: var(--gap-xl);
31
36
  } :root {
32
37
  } :root {
33
- } .file-upload-item__component_1vzfs {
38
+ } .file-upload-item__component_11i2p {
34
39
  font-size: 13px;
35
40
  line-height: 16px;
36
41
  font-weight: 400;
@@ -38,82 +43,82 @@
38
43
  display: flex;
39
44
  align-items: flex-start;
40
45
  width: 100%;
41
- padding: var(--gap-xs);
46
+ padding: var(--gap-8);
42
47
  color: var(--color-light-text-secondary);
43
48
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
44
49
  box-sizing: border-box
45
- } .file-upload-item__component_1vzfs svg {
50
+ } .file-upload-item__component_11i2p svg {
46
51
  display: block;
47
- } .file-upload-item__component_1vzfs:last-child {
52
+ } .file-upload-item__component_11i2p:last-child {
48
53
  box-shadow: none;
49
- } .file-upload-item__infoSection_1vzfs {
54
+ } .file-upload-item__infoSection_11i2p {
50
55
  display: flex;
51
56
  flex-direction: column;
52
57
  flex: 1;
53
- margin-top: var(--gap-2xs);
54
- margin-left: var(--gap-s);
58
+ margin-top: var(--gap-4);
59
+ margin-left: var(--gap-12);
55
60
  min-width: 40%;
56
- } .file-upload-item__info_1vzfs {
61
+ } .file-upload-item__info_11i2p {
57
62
  display: flex;
58
63
  flex-wrap: wrap;
59
64
  flex: 1;
60
65
  overflow: hidden;
61
- } .file-upload-item__icon_1vzfs {
66
+ } .file-upload-item__icon_11i2p {
62
67
  display: block;
63
68
  flex-shrink: 0;
64
69
  color: var(--color-light-neutral-translucent-1300);
65
- } .file-upload-item__errorIcon_1vzfs {
70
+ } .file-upload-item__errorIcon_11i2p {
66
71
  flex-shrink: 0;
67
72
  color: var(--color-light-status-negative);
68
- } .file-upload-item__successIcon_1vzfs {
73
+ } .file-upload-item__successIcon_11i2p {
69
74
  flex-shrink: 0;
70
75
  color: var(--color-light-status-positive);
71
- } .file-upload-item__name_1vzfs {
76
+ } .file-upload-item__name_11i2p {
72
77
  color: var(--color-light-text-primary)
73
- } .file-upload-item__name_1vzfs a {
78
+ } .file-upload-item__name_11i2p a {
74
79
  display: block;
75
80
  margin-bottom: 1px;
76
- } .file-upload-item__name_1vzfs.file-upload-item__rowLimit_1vzfs {
81
+ } .file-upload-item__name_11i2p.file-upload-item__rowLimit_11i2p {
77
82
  white-space: nowrap;
78
83
  overflow: hidden;
79
84
  text-overflow: ellipsis;
80
- } .file-upload-item__meta_1vzfs {
85
+ } .file-upload-item__meta_11i2p {
81
86
  display: flex;
82
87
  white-space: nowrap;
83
- margin-right: var(--gap-2xs);
88
+ margin-right: var(--gap-4);
84
89
  margin-left: 36px;
85
- padding: var(--gap-2xs) 0
86
- } .file-upload-item__meta_1vzfs > * {
87
- margin-right: var(--gap-s)
88
- } .file-upload-item__meta_1vzfs > *:last-child {
90
+ padding: var(--gap-4) 0
91
+ } .file-upload-item__meta_11i2p > * {
92
+ margin-right: var(--gap-12)
93
+ } .file-upload-item__meta_11i2p > *:last-child {
89
94
  margin-right: 0;
90
- } .file-upload-item__size_1vzfs {
95
+ } .file-upload-item__size_11i2p {
91
96
  text-align: right;
92
- } .file-upload-item__delete_1vzfs,
93
- .file-upload-item__download_1vzfs {
97
+ } .file-upload-item__delete_11i2p,
98
+ .file-upload-item__download_11i2p {
94
99
  height: 24px;
95
100
  width: 24px;
96
- margin-left: var(--gap-xs);
97
- } .file-upload-item__errorWrapper_1vzfs {
98
- margin-top: var(--gap-2xs);
101
+ margin-left: var(--gap-8);
102
+ } .file-upload-item__errorWrapper_11i2p {
103
+ margin-top: var(--gap-4);
99
104
  color: var(--color-light-text-negative);
100
- } .file-upload-item__restore_1vzfs {
105
+ } .file-upload-item__restore_11i2p {
101
106
  font-size: 14px;
102
107
  line-height: 20px;
103
108
  font-weight: 400;
104
109
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
107
- } .file-upload-item__spinnerWrapper_1vzfs {
110
+ margin-left: var(--gap-12);
111
+ margin-top: var(--gap-2);
112
+ } .file-upload-item__spinnerWrapper_11i2p {
108
113
  display: flex;
109
114
  justify-content: center;
110
115
  align-items: center;
111
116
  width: 24px;
112
117
  height: 24px;
113
- } .file-upload-item__spinner_1vzfs {
118
+ } .file-upload-item__spinner_11i2p {
114
119
  width: 20px;
115
120
  height: 20px;
116
- } .file-upload-item__uploadPercent_1vzfs {
117
- margin-top: var(--gap-2xs);
118
- margin-left: var(--gap-xl);
121
+ } .file-upload-item__uploadPercent_11i2p {
122
+ margin-top: var(--gap-4);
123
+ margin-left: var(--gap-24);
119
124
  }
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, MouseEvent, ReactNode } from "react";
3
+ import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
82
82
  * Разрешить многострочное название файла
83
83
  */
84
84
  multiline?: boolean;
85
+ /**
86
+ * Указывает, где открыть скачиваемый документ
87
+ */
88
+ target?: HTMLAttributeAnchorTarget;
85
89
  /**
86
90
  * Идентификатор для систем автоматизированного тестирования
87
91
  */
package/modern/Component.js CHANGED
@@ -10,10 +10,10 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { humanFileSize, fileIcon } from './utils.js';
12
12
 
13
- const styles = {"component":"file-upload-item__component_1vzfs","infoSection":"file-upload-item__infoSection_1vzfs","info":"file-upload-item__info_1vzfs","icon":"file-upload-item__icon_1vzfs","errorIcon":"file-upload-item__errorIcon_1vzfs","successIcon":"file-upload-item__successIcon_1vzfs","name":"file-upload-item__name_1vzfs","rowLimit":"file-upload-item__rowLimit_1vzfs","meta":"file-upload-item__meta_1vzfs","size":"file-upload-item__size_1vzfs","delete":"file-upload-item__delete_1vzfs","download":"file-upload-item__download_1vzfs","errorWrapper":"file-upload-item__errorWrapper_1vzfs","restore":"file-upload-item__restore_1vzfs","spinnerWrapper":"file-upload-item__spinnerWrapper_1vzfs","spinner":"file-upload-item__spinner_1vzfs","uploadPercent":"file-upload-item__uploadPercent_1vzfs"};
13
+ const styles = {"component":"file-upload-item__component_11i2p","infoSection":"file-upload-item__infoSection_11i2p","info":"file-upload-item__info_11i2p","icon":"file-upload-item__icon_11i2p","errorIcon":"file-upload-item__errorIcon_11i2p","successIcon":"file-upload-item__successIcon_11i2p","name":"file-upload-item__name_11i2p","rowLimit":"file-upload-item__rowLimit_11i2p","meta":"file-upload-item__meta_11i2p","size":"file-upload-item__size_11i2p","delete":"file-upload-item__delete_11i2p","download":"file-upload-item__download_11i2p","errorWrapper":"file-upload-item__errorWrapper_11i2p","restore":"file-upload-item__restore_11i2p","spinnerWrapper":"file-upload-item__spinnerWrapper_11i2p","spinner":"file-upload-item__spinner_11i2p","uploadPercent":"file-upload-item__uploadPercent_11i2p"};
14
14
  require('./index.css')
15
15
 
16
- const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, multiline = false, dataTestId, }) => {
16
+ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, multiline = false, target, dataTestId, }) => {
17
17
  const handleDownload = (event) => {
18
18
  if (onDownload) {
19
19
  event.preventDefault();
@@ -65,7 +65,7 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
65
65
  uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
66
66
  size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
67
67
  showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
68
- showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
68
+ showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
69
69
  showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
70
70
  };
71
71
 
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: dt4qp */
1
+ /* hash: 1ym76 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -28,9 +28,14 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-2: var(--gap-3xs);
32
+ --gap-4: var(--gap-2xs);
33
+ --gap-8: var(--gap-xs);
34
+ --gap-12: var(--gap-s);
35
+ --gap-24: var(--gap-xl);
31
36
  } :root {
32
37
  } :root {
33
- } .file-upload-item__component_1vzfs {
38
+ } .file-upload-item__component_11i2p {
34
39
  font-size: 13px;
35
40
  line-height: 16px;
36
41
  font-weight: 400;
@@ -38,82 +43,82 @@
38
43
  display: flex;
39
44
  align-items: flex-start;
40
45
  width: 100%;
41
- padding: var(--gap-xs);
46
+ padding: var(--gap-8);
42
47
  color: var(--color-light-text-secondary);
43
48
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
44
49
  box-sizing: border-box
45
- } .file-upload-item__component_1vzfs svg {
50
+ } .file-upload-item__component_11i2p svg {
46
51
  display: block;
47
- } .file-upload-item__component_1vzfs:last-child {
52
+ } .file-upload-item__component_11i2p:last-child {
48
53
  box-shadow: none;
49
- } .file-upload-item__infoSection_1vzfs {
54
+ } .file-upload-item__infoSection_11i2p {
50
55
  display: flex;
51
56
  flex-direction: column;
52
57
  flex: 1;
53
- margin-top: var(--gap-2xs);
54
- margin-left: var(--gap-s);
58
+ margin-top: var(--gap-4);
59
+ margin-left: var(--gap-12);
55
60
  min-width: 40%;
56
- } .file-upload-item__info_1vzfs {
61
+ } .file-upload-item__info_11i2p {
57
62
  display: flex;
58
63
  flex-wrap: wrap;
59
64
  flex: 1;
60
65
  overflow: hidden;
61
- } .file-upload-item__icon_1vzfs {
66
+ } .file-upload-item__icon_11i2p {
62
67
  display: block;
63
68
  flex-shrink: 0;
64
69
  color: var(--color-light-neutral-translucent-1300);
65
- } .file-upload-item__errorIcon_1vzfs {
70
+ } .file-upload-item__errorIcon_11i2p {
66
71
  flex-shrink: 0;
67
72
  color: var(--color-light-status-negative);
68
- } .file-upload-item__successIcon_1vzfs {
73
+ } .file-upload-item__successIcon_11i2p {
69
74
  flex-shrink: 0;
70
75
  color: var(--color-light-status-positive);
71
- } .file-upload-item__name_1vzfs {
76
+ } .file-upload-item__name_11i2p {
72
77
  color: var(--color-light-text-primary)
73
- } .file-upload-item__name_1vzfs a {
78
+ } .file-upload-item__name_11i2p a {
74
79
  display: block;
75
80
  margin-bottom: 1px;
76
- } .file-upload-item__name_1vzfs.file-upload-item__rowLimit_1vzfs {
81
+ } .file-upload-item__name_11i2p.file-upload-item__rowLimit_11i2p {
77
82
  white-space: nowrap;
78
83
  overflow: hidden;
79
84
  text-overflow: ellipsis;
80
- } .file-upload-item__meta_1vzfs {
85
+ } .file-upload-item__meta_11i2p {
81
86
  display: flex;
82
87
  white-space: nowrap;
83
- margin-right: var(--gap-2xs);
88
+ margin-right: var(--gap-4);
84
89
  margin-left: 36px;
85
- padding: var(--gap-2xs) 0
86
- } .file-upload-item__meta_1vzfs > * {
87
- margin-right: var(--gap-s)
88
- } .file-upload-item__meta_1vzfs > *:last-child {
90
+ padding: var(--gap-4) 0
91
+ } .file-upload-item__meta_11i2p > * {
92
+ margin-right: var(--gap-12)
93
+ } .file-upload-item__meta_11i2p > *:last-child {
89
94
  margin-right: 0;
90
- } .file-upload-item__size_1vzfs {
95
+ } .file-upload-item__size_11i2p {
91
96
  text-align: right;
92
- } .file-upload-item__delete_1vzfs,
93
- .file-upload-item__download_1vzfs {
97
+ } .file-upload-item__delete_11i2p,
98
+ .file-upload-item__download_11i2p {
94
99
  height: 24px;
95
100
  width: 24px;
96
- margin-left: var(--gap-xs);
97
- } .file-upload-item__errorWrapper_1vzfs {
98
- margin-top: var(--gap-2xs);
101
+ margin-left: var(--gap-8);
102
+ } .file-upload-item__errorWrapper_11i2p {
103
+ margin-top: var(--gap-4);
99
104
  color: var(--color-light-text-negative);
100
- } .file-upload-item__restore_1vzfs {
105
+ } .file-upload-item__restore_11i2p {
101
106
  font-size: 14px;
102
107
  line-height: 20px;
103
108
  font-weight: 400;
104
109
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
107
- } .file-upload-item__spinnerWrapper_1vzfs {
110
+ margin-left: var(--gap-12);
111
+ margin-top: var(--gap-2);
112
+ } .file-upload-item__spinnerWrapper_11i2p {
108
113
  display: flex;
109
114
  justify-content: center;
110
115
  align-items: center;
111
116
  width: 24px;
112
117
  height: 24px;
113
- } .file-upload-item__spinner_1vzfs {
118
+ } .file-upload-item__spinner_11i2p {
114
119
  width: 20px;
115
120
  height: 20px;
116
- } .file-upload-item__uploadPercent_1vzfs {
117
- margin-top: var(--gap-2xs);
118
- margin-left: var(--gap-xl);
121
+ } .file-upload-item__uploadPercent_11i2p {
122
+ margin-top: var(--gap-4);
123
+ margin-left: var(--gap-24);
119
124
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "5.6.10",
3
+ "version": "5.7.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,13 +14,13 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-icon-button": "^6.7.4",
18
- "@alfalab/core-components-link": "^5.2.2",
17
+ "@alfalab/core-components-icon-button": "^6.7.5",
18
+ "@alfalab/core-components-link": "^5.2.3",
19
19
  "@alfalab/core-components-spinner": "^3.4.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.0.1",
24
+ "themesVersion": "13.0.2",
25
25
  "varsVersion": "9.11.1"
26
26
  }
package/src/Component.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { ElementType, MouseEvent, ReactNode } from 'react';
1
+ import React, { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from 'react';
2
2
  import cn from 'classnames';
3
3
 
4
4
  import { IconButton } from '@alfalab/core-components-icon-button';
@@ -113,6 +113,11 @@ export type FileUploadItemProps = {
113
113
  */
114
114
  multiline?: boolean;
115
115
 
116
+ /**
117
+ * Указывает, где открыть скачиваемый документ
118
+ */
119
+ target?: HTMLAttributeAnchorTarget;
120
+
116
121
  /**
117
122
  * Идентификатор для систем автоматизированного тестирования
118
123
  */
@@ -139,6 +144,7 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
139
144
  onRestore,
140
145
  disableButtons,
141
146
  multiline = false,
147
+ target,
142
148
  dataTestId,
143
149
  }) => {
144
150
  const handleDownload = (event: MouseEvent<HTMLElement>) => {
@@ -249,6 +255,7 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
249
255
  onClick={handleDownload}
250
256
  disabled={disableButtons}
251
257
  download={download}
258
+ target={target}
252
259
  />
253
260
  )}
254
261
 
package/src/index.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  display: flex;
7
7
  align-items: flex-start;
8
8
  width: 100%;
9
- padding: var(--gap-xs);
9
+ padding: var(--gap-8);
10
10
  color: var(--color-light-text-secondary);
11
11
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
12
12
  box-sizing: border-box;
@@ -24,8 +24,8 @@
24
24
  display: flex;
25
25
  flex-direction: column;
26
26
  flex: 1;
27
- margin-top: var(--gap-2xs);
28
- margin-left: var(--gap-s);
27
+ margin-top: var(--gap-4);
28
+ margin-left: var(--gap-12);
29
29
  min-width: 40%;
30
30
  }
31
31
 
@@ -70,12 +70,12 @@
70
70
  .meta {
71
71
  display: flex;
72
72
  white-space: nowrap;
73
- margin-right: var(--gap-2xs);
73
+ margin-right: var(--gap-4);
74
74
  margin-left: 36px;
75
- padding: var(--gap-2xs) 0;
75
+ padding: var(--gap-4) 0;
76
76
 
77
77
  & > * {
78
- margin-right: var(--gap-s);
78
+ margin-right: var(--gap-12);
79
79
 
80
80
  &:last-child {
81
81
  margin-right: 0;
@@ -91,19 +91,19 @@
91
91
  .download {
92
92
  height: 24px;
93
93
  width: 24px;
94
- margin-left: var(--gap-xs);
94
+ margin-left: var(--gap-8);
95
95
  }
96
96
 
97
97
  .errorWrapper {
98
- margin-top: var(--gap-2xs);
98
+ margin-top: var(--gap-4);
99
99
  color: var(--color-light-text-negative);
100
100
  }
101
101
 
102
102
  .restore {
103
103
  @mixin paragraph_primary_small;
104
104
 
105
- margin-left: var(--gap-s);
106
- margin-top: var(--gap-3xs);
105
+ margin-left: var(--gap-12);
106
+ margin-top: var(--gap-2);
107
107
  }
108
108
 
109
109
  .spinnerWrapper {
@@ -120,6 +120,6 @@
120
120
  }
121
121
 
122
122
  .uploadPercent {
123
- margin-top: var(--gap-2xs);
124
- margin-left: var(--gap-xl);
123
+ margin-top: var(--gap-4);
124
+ margin-left: var(--gap-24);
125
125
  }