@hh.ru/magritte-ui-upload 3.2.17 → 3.3.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 (19) hide show
  1. package/FileName.js +1 -1
  2. package/FileView.js +2 -3
  3. package/FileView.js.map +1 -1
  4. package/FileViewWithPreview.js +1 -2
  5. package/FileViewWithPreview.js.map +1 -1
  6. package/MultiUpload.js +1 -2
  7. package/MultiUpload.js.map +1 -1
  8. package/SingleUpload.js +8 -24
  9. package/SingleUpload.js.map +1 -1
  10. package/Upload.js +1 -2
  11. package/Upload.js.map +1 -1
  12. package/index.css +45 -33
  13. package/index.js +1 -2
  14. package/index.js.map +1 -1
  15. package/package.json +10 -11
  16. package/upload-C9cZwMko.js +5 -0
  17. package/upload-C9cZwMko.js.map +1 -0
  18. package/upload-CHF-Lmcl.js +0 -5
  19. package/upload-CHF-Lmcl.js.map +0 -1
package/FileName.js CHANGED
@@ -2,7 +2,7 @@ import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import classnames from 'classnames';
4
4
 
5
- var styles = {"file-name-body":"magritte-file-name-body___PTTMc_3-2-17","fileNameBody":"magritte-file-name-body___PTTMc_3-2-17","file-name-body_medium":"magritte-file-name-body_medium___sfmmq_3-2-17","fileNameBodyMedium":"magritte-file-name-body_medium___sfmmq_3-2-17","file-name":"magritte-file-name___ZSL2g_3-2-17","fileName":"magritte-file-name___ZSL2g_3-2-17"};
5
+ var styles = {"file-name-body":"magritte-file-name-body___PTTMc_3-3-1","fileNameBody":"magritte-file-name-body___PTTMc_3-3-1","file-name-body_medium":"magritte-file-name-body_medium___sfmmq_3-3-1","fileNameBodyMedium":"magritte-file-name-body_medium___sfmmq_3-3-1","file-name":"magritte-file-name___ZSL2g_3-3-1","fileName":"magritte-file-name___ZSL2g_3-3-1"};
6
6
 
7
7
  const parse = (file) => {
8
8
  const name = file.name;
package/FileView.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import './index.css';
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
- import { Action } from '@hh.ru/magritte-ui-action';
4
3
  import { Avatar } from '@hh.ru/magritte-ui-avatar';
5
4
  import { Divider } from '@hh.ru/magritte-ui-divider';
6
5
  import { ExclamationTriangleOutlinedSize16, CheckCircleOutlinedSize16, CrossOutlinedSize24, TrashOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
@@ -10,7 +9,7 @@ import { FileName } from './FileName.js';
10
9
  import { getUploadIcon, bytes2mb } from './utils.js';
11
10
  import 'classnames';
12
11
 
13
- var styles = {"file-info-body":"magritte-file-info-body___HmfXd_3-2-17","fileInfoBody":"magritte-file-info-body___HmfXd_3-2-17","file-info-and-controls":"magritte-file-info-and-controls___61iyY_3-2-17","fileInfoAndControls":"magritte-file-info-and-controls___61iyY_3-2-17","file-info-container":"magritte-file-info-container___WFab8_3-2-17","fileInfoContainer":"magritte-file-info-container___WFab8_3-2-17","file-info":"magritte-file-info___HrqiB_3-2-17","fileInfo":"magritte-file-info___HrqiB_3-2-17","controls":"magritte-controls___WdH7A_3-2-17"};
12
+ var styles = {"file-info-body":"magritte-file-info-body___HmfXd_3-3-1","fileInfoBody":"magritte-file-info-body___HmfXd_3-3-1","file-info-and-controls":"magritte-file-info-and-controls___61iyY_3-3-1","fileInfoAndControls":"magritte-file-info-and-controls___61iyY_3-3-1","file-info-container":"magritte-file-info-container___WFab8_3-3-1","fileInfoContainer":"magritte-file-info-container___WFab8_3-3-1","file-info":"magritte-file-info___HrqiB_3-3-1","fileInfo":"magritte-file-info___HrqiB_3-3-1","controls":"magritte-controls___WdH7A_3-3-1"};
14
13
 
15
14
  const FileView = ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelete, 'aria-label': ariaLabel, isLast = false, }) => {
16
15
  const isLoading = Boolean(loadedFile?.loading);
@@ -19,7 +18,7 @@ const FileView = ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelet
19
18
  return (jsxs(Fragment, { children: [jsx(Avatar, { mode: isImageType && !isLoading && !isInvalid ? 'image' : 'icon', style: "secondary", image: preview, size: 48, icon: getUploadIcon(uploadType, loadedFile, true), "aria-label": ariaLabel }), jsxs("div", { className: styles.fileInfoBody, children: [jsxs("div", { className: styles.fileInfoAndControls, children: [jsxs("div", { className: styles.fileInfoContainer, children: [jsx(FileName, { file: loadedFile.data }), jsx(VSpacing, { default: 4 }), jsxs("div", { className: styles.fileInfo, children: [isInvalid && jsx(ExclamationTriangleOutlinedSize16, { initialColor: "negative" }), isLoading && jsx(Loader, { size: 16 }), !isInvalid && !isLoading && jsx(CheckCircleOutlinedSize16, { initialColor: "positive" }), renderFileInfo({
20
19
  ...loadedFile,
21
20
  fileSizeMB: bytes2mb(loadedFile.data.size),
22
- })] })] }), jsxs("div", { className: styles.controls, children: [isLoading && jsx(Action, { icon: CrossOutlinedSize24, mode: "secondary", onClick: onFileDelete }), !isLoading && (jsx(Action, { icon: TrashOutlinedSize24, mode: "secondary", onClick: onFileDelete, "data-qa": "magritte-upload-delete-file-action" }))] })] }), !isLast && (jsxs("div", { children: [jsx(VSpacing, { default: 16 }), jsx(Divider, {}), jsx(VSpacing, { default: 16 })] }))] })] }));
21
+ })] })] }), jsxs("div", { className: styles.controls, children: [isLoading && (jsx(CrossOutlinedSize24, { padding: 8, borderRadius: "halfHeight", initialColor: "secondary", onClick: onFileDelete })), !isLoading && (jsx(TrashOutlinedSize24, { padding: 8, borderRadius: "halfHeight", onClick: onFileDelete, "data-qa": "magritte-upload-delete-file-action", initialColor: "secondary" }))] })] }), !isLast && (jsxs("div", { children: [jsx(VSpacing, { default: 16 }), jsx(Divider, {}), jsx(VSpacing, { default: 16 })] }))] })] }));
23
22
  };
24
23
 
25
24
  export { FileView };
package/FileView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileView.js","sources":["../src/FileView.tsx"],"sourcesContent":["import { ReactElement, MouseEvent } from 'react';\n\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport {\n CrossOutlinedSize24,\n CheckCircleOutlinedSize16,\n ExclamationTriangleOutlinedSize16,\n TrashOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { UploadType, LoadedFile, RenderFileInfo } from '@hh.ru/magritte-ui-upload/types';\nimport { getUploadIcon, bytes2mb } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-view.less';\n\nexport interface FileViewProps {\n uploadType: UploadType;\n loadedFile: LoadedFile;\n renderFileInfo: RenderFileInfo;\n onFileDelete: (event: MouseEvent) => void;\n preview: string;\n 'aria-label': string;\n isLast?: boolean;\n}\n\nconst FileView = ({\n uploadType,\n loadedFile,\n preview,\n renderFileInfo,\n onFileDelete,\n 'aria-label': ariaLabel,\n isLast = false,\n}: FileViewProps): ReactElement => {\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isImageType = uploadType === 'image';\n return (\n <>\n <Avatar\n mode={isImageType && !isLoading && !isInvalid ? 'image' : 'icon'}\n style=\"secondary\"\n image={preview}\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel}\n />\n <div className={styles.fileInfoBody}>\n <div className={styles.fileInfoAndControls}>\n <div className={styles.fileInfoContainer}>\n <FileName file={loadedFile.data} />\n <VSpacing default={4} />\n <div className={styles.fileInfo}>\n {isInvalid && <ExclamationTriangleOutlinedSize16 initialColor=\"negative\" />}\n {isLoading && <Loader size={16} />}\n {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initialColor=\"positive\" />}\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </div>\n </div>\n <div className={styles.controls}>\n {isLoading && <Action icon={CrossOutlinedSize24} mode=\"secondary\" onClick={onFileDelete} />}\n {!isLoading && (\n <Action\n icon={TrashOutlinedSize24}\n mode=\"secondary\"\n onClick={onFileDelete}\n data-qa=\"magritte-upload-delete-file-action\"\n />\n )}\n </div>\n </div>\n {!isLast && (\n <div>\n <VSpacing default={16} />\n <Divider />\n <VSpacing default={16} />\n </div>\n )}\n </div>\n </>\n );\n};\n\nexport { FileView };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;AA6BM,MAAA,QAAQ,GAAG,CAAC,EACd,UAAU,EACV,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,MAAM,GAAG,KAAK,GACF,KAAkB;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC7C,IAAA,MAAM,WAAW,GAAG,UAAU,KAAK,OAAO,CAAC;AAC3C,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,EAChE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,gBACrC,SAAS,EAAA,CACvB,EACFF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CAC/BA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,mBAAmB,aACtCA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACpC,QAAA,EAAA,CAAAE,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAA,CAAI,EACnCA,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,CAAC,EAAA,CAAI,EACxBF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAA,CAC1B,SAAS,IAAIE,GAAA,CAAC,iCAAiC,EAAA,EAAC,YAAY,EAAC,UAAU,EAAA,CAAG,EAC1E,SAAS,IAAIA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,EACjC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAIA,GAAC,CAAA,yBAAyB,EAAC,EAAA,YAAY,EAAC,UAAU,EAAG,CAAA,EACjF,cAAc,CAAC;AACZ,gDAAA,GAAG,UAAU;gDACb,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7C,6CAAA,CAAC,IACA,CACJ,EAAA,CAAA,EACNF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAA,CAC1B,SAAS,IAAIE,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY,EAAA,CAAI,EAC1F,CAAC,SAAS,KACPA,IAAC,MAAM,EAAA,EACH,IAAI,EAAE,mBAAmB,EACzB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,YAAY,EACb,SAAA,EAAA,oCAAoC,GAC9C,CACL,CAAA,EAAA,CACC,CACJ,EAAA,CAAA,EACL,CAAC,MAAM,KACJF,IACI,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CAAAE,GAAA,CAAC,QAAQ,EAAC,EAAA,OAAO,EAAE,EAAE,GAAI,EACzBA,GAAA,CAAC,OAAO,EAAG,EAAA,CAAA,EACXA,IAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,EAAE,EAAI,CAAA,CAAA,EAAA,CACvB,CACT,CACC,EAAA,CAAA,CAAA,EAAA,CACP,EACL;AACN;;;;"}
1
+ {"version":3,"file":"FileView.js","sources":["../src/FileView.tsx"],"sourcesContent":["import { ReactElement, MouseEvent } from 'react';\n\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport {\n CrossOutlinedSize24,\n CheckCircleOutlinedSize16,\n ExclamationTriangleOutlinedSize16,\n TrashOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { UploadType, LoadedFile, RenderFileInfo } from '@hh.ru/magritte-ui-upload/types';\nimport { getUploadIcon, bytes2mb } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-view.less';\n\nexport interface FileViewProps {\n uploadType: UploadType;\n loadedFile: LoadedFile;\n renderFileInfo: RenderFileInfo;\n onFileDelete: (event: MouseEvent) => void;\n preview: string;\n 'aria-label': string;\n isLast?: boolean;\n}\n\nconst FileView = ({\n uploadType,\n loadedFile,\n preview,\n renderFileInfo,\n onFileDelete,\n 'aria-label': ariaLabel,\n isLast = false,\n}: FileViewProps): ReactElement => {\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isImageType = uploadType === 'image';\n return (\n <>\n <Avatar\n mode={isImageType && !isLoading && !isInvalid ? 'image' : 'icon'}\n style=\"secondary\"\n image={preview}\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel}\n />\n <div className={styles.fileInfoBody}>\n <div className={styles.fileInfoAndControls}>\n <div className={styles.fileInfoContainer}>\n <FileName file={loadedFile.data} />\n <VSpacing default={4} />\n <div className={styles.fileInfo}>\n {isInvalid && <ExclamationTriangleOutlinedSize16 initialColor=\"negative\" />}\n {isLoading && <Loader size={16} />}\n {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initialColor=\"positive\" />}\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </div>\n </div>\n <div className={styles.controls}>\n {isLoading && (\n <CrossOutlinedSize24\n padding={8}\n borderRadius=\"halfHeight\"\n initialColor=\"secondary\"\n onClick={onFileDelete}\n />\n )}\n {!isLoading && (\n <TrashOutlinedSize24\n padding={8}\n borderRadius=\"halfHeight\"\n onClick={onFileDelete}\n data-qa=\"magritte-upload-delete-file-action\"\n initialColor=\"secondary\"\n />\n )}\n </div>\n </div>\n {!isLast && (\n <div>\n <VSpacing default={16} />\n <Divider />\n <VSpacing default={16} />\n </div>\n )}\n </div>\n </>\n );\n};\n\nexport { FileView };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;AA4BM,MAAA,QAAQ,GAAG,CAAC,EACd,UAAU,EACV,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,EACZ,YAAY,EAAE,SAAS,EACvB,MAAM,GAAG,KAAK,GACF,KAAkB;IAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC7C,IAAA,MAAM,WAAW,GAAG,UAAU,KAAK,OAAO,CAAC;AAC3C,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,WAAW,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,EAChE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,gBACrC,SAAS,EAAA,CACvB,EACFF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAA,CAC/BA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,mBAAmB,aACtCA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACpC,QAAA,EAAA,CAAAE,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAA,CAAI,EACnCA,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,CAAC,EAAA,CAAI,EACxBF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAA,CAC1B,SAAS,IAAIE,GAAA,CAAC,iCAAiC,EAAA,EAAC,YAAY,EAAC,UAAU,EAAA,CAAG,EAC1E,SAAS,IAAIA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,EACjC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAIA,GAAC,CAAA,yBAAyB,EAAC,EAAA,YAAY,EAAC,UAAU,EAAG,CAAA,EACjF,cAAc,CAAC;AACZ,gDAAA,GAAG,UAAU;gDACb,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;6CAC7C,CAAC,CAAA,EAAA,CACA,IACJ,EACNF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAA,CAC1B,SAAS,KACNE,IAAC,mBAAmB,EAAA,EAChB,OAAO,EAAE,CAAC,EACV,YAAY,EAAC,YAAY,EACzB,YAAY,EAAC,WAAW,EACxB,OAAO,EAAE,YAAY,GACvB,CACL,EACA,CAAC,SAAS,KACPA,GAAC,CAAA,mBAAmB,IAChB,OAAO,EAAE,CAAC,EACV,YAAY,EAAC,YAAY,EACzB,OAAO,EAAE,YAAY,aACb,oCAAoC,EAC5C,YAAY,EAAC,WAAW,GAC1B,CACL,CAAA,EAAA,CACC,IACJ,EACL,CAAC,MAAM,KACJF,yBACIE,GAAC,CAAA,QAAQ,IAAC,OAAO,EAAE,EAAE,EAAI,CAAA,EACzBA,IAAC,OAAO,EAAA,EAAA,CAAG,EACXA,GAAC,CAAA,QAAQ,IAAC,OAAO,EAAE,EAAE,EAAI,CAAA,CAAA,EAAA,CACvB,CACT,CACC,EAAA,CAAA,CAAA,EAAA,CACP,EACL;AACN;;;;"}
package/FileViewWithPreview.js CHANGED
@@ -3,7 +3,6 @@ import { jsx } from 'react/jsx-runtime';
3
3
  import { FileView } from './FileView.js';
4
4
  import { useFilePreview } from './useFilePreview.js';
5
5
  import { getFileType } from './utils.js';
6
- import '@hh.ru/magritte-ui-action';
7
6
  import '@hh.ru/magritte-ui-avatar';
8
7
  import '@hh.ru/magritte-ui-divider';
9
8
  import '@hh.ru/magritte-ui-icon/icon';
@@ -13,7 +12,7 @@ import './FileName.js';
13
12
  import 'classnames';
14
13
  import 'react';
15
14
 
16
- var styles = {"item":"magritte-item___vVDG-_3-2-17"};
15
+ var styles = {"item":"magritte-item___vVDG-_3-3-1"};
17
16
 
18
17
  const FileViewWithPreview = ({ loadedFile, ...otherProps }) => {
19
18
  const uploadType = getFileType(loadedFile.data.type);
package/FileViewWithPreview.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileViewWithPreview.js","sources":["../src/FileViewWithPreview.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { FileView, FileViewProps } from '@hh.ru/magritte-ui-upload/FileView';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport { getFileType } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-viev-with-preview.less';\n\ntype FileViewWithPreviewProps = Omit<FileViewProps, 'preview' | 'uploadType'>;\n\nconst FileViewWithPreview = ({ loadedFile, ...otherProps }: FileViewWithPreviewProps): ReactElement => {\n const uploadType = getFileType(loadedFile.data.type);\n const preview = useFilePreview({ loadedFile, isImageType: uploadType === 'image' });\n return (\n <div className={styles.item}>\n <FileView uploadType={uploadType} loadedFile={loadedFile} preview={preview} {...otherProps} />\n </div>\n );\n};\n\nexport { FileViewWithPreview };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;AAUM,MAAA,mBAAmB,GAAG,CAAC,EAAE,UAAU,EAAE,GAAG,UAAU,EAA4B,KAAkB;IAClG,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACrD,IAAA,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,KAAK,OAAO,EAAE,CAAC,CAAC;IACpF,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACvB,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA,GAAM,UAAU,EAAA,CAAI,EAC5F,CAAA,EACR;AACN;;;;"}
1
+ {"version":3,"file":"FileViewWithPreview.js","sources":["../src/FileViewWithPreview.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { FileView, FileViewProps } from '@hh.ru/magritte-ui-upload/FileView';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport { getFileType } from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './file-viev-with-preview.less';\n\ntype FileViewWithPreviewProps = Omit<FileViewProps, 'preview' | 'uploadType'>;\n\nconst FileViewWithPreview = ({ loadedFile, ...otherProps }: FileViewWithPreviewProps): ReactElement => {\n const uploadType = getFileType(loadedFile.data.type);\n const preview = useFilePreview({ loadedFile, isImageType: uploadType === 'image' });\n return (\n <div className={styles.item}>\n <FileView uploadType={uploadType} loadedFile={loadedFile} preview={preview} {...otherProps} />\n </div>\n );\n};\n\nexport { FileViewWithPreview };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAUM,MAAA,mBAAmB,GAAG,CAAC,EAAE,UAAU,EAAE,GAAG,UAAU,EAA4B,KAAkB;IAClG,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACrD,IAAA,MAAM,OAAO,GAAG,cAAc,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,KAAK,OAAO,EAAE,CAAC,CAAC;IACpF,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACvB,QAAA,EAAAA,GAAA,CAAC,QAAQ,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA,GAAM,UAAU,EAAA,CAAI,EAC5F,CAAA,EACR;AACN;;;;"}
package/MultiUpload.js CHANGED
@@ -8,9 +8,8 @@ import { Placeholder } from './Placeholder.js';
8
8
  import { useDropActions } from './useDropActions.js';
9
9
  import { useDropButtons } from './useDropButtons.js';
10
10
  import { getAvaliableFileTypes, getUploadIcon, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
11
- import { s as styles } from './upload-CHF-Lmcl.js';
11
+ import { s as styles } from './upload-C9cZwMko.js';
12
12
  import './FileView.js';
13
- import '@hh.ru/magritte-ui-action';
14
13
  import '@hh.ru/magritte-ui-avatar';
15
14
  import '@hh.ru/magritte-ui-divider';
16
15
  import '@hh.ru/magritte-ui-icon/icon';
package/MultiUpload.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiUpload.js","sources":["../src/MultiUpload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { FileViewWithPreview } from '@hh.ru/magritte-ui-upload/FileViewWithPreview';\nimport { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport {\n getUploadIcon,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst MultiUpload = ({\n files,\n trls,\n size,\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: Omit<UploadProps, 'multiple'>): ReactElement => {\n const uploadType = getAvaliableFileTypes(accept);\n const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n });\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n ...dropzoneProps,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple: true,\n });\n const { selectFileButton } = useDropButtons({ selectFileButton: _selectFileButton });\n return (\n <>\n <div\n className={classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive })}\n {...getRootProps()}\n data-qa=\"magritte-multiple-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-multiple-upload-input\" />\n <div className={styles.background} />\n <div className={styles.body}>\n {getUploadIcon(uploadType, undefined, false)}\n <VSpacing default={16} />\n <Placeholder trls={trls} selectFileButton={selectFileButton} />\n </div>\n </div>\n {files.length > 0 && (\n <div className={styles.fileList}>\n {files.map((loadedFile, indexFile) => {\n return (\n <FileViewWithPreview\n key={loadedFile.data.name}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, indexFile);\n }}\n aria-label={ariaLabel || ''}\n isLast={files.length - 1 === indexFile}\n />\n );\n })}\n </div>\n )}\n </>\n );\n};\n\nexport { MultiUpload };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,WAAW,GAAG,CAAC,EACjB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,GAAG,cAAc,EACvB,gBAAgB,EAAE,iBAAiB,EACnC,cAAc,GAAG,qBAAqB,EACtC,cAAc,EAAE,sBAAsB,EACtC,cAAc,EAAE,sBAAsB,EACtC,YAAY,EAAE,oBAAoB,EAClC,YAAY,EAAE,SAAS,EACvB,GAAG,aAAa,EACY,KAAkB;AAC9C,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC;AACpE,QAAA,cAAc,EAAE,sBAAsB;AACtC,QAAA,cAAc,EAAE,sBAAsB;AACtC,QAAA,YAAY,EAAE,oBAAoB;AACrC,KAAA,CAAC,CAAC;IACH,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;AAC9D,QAAA,GAAG,aAAa;QAChB,MAAM;QACN,cAAc;QACd,cAAc;AACd,QAAA,QAAQ,EAAE,IAAI;AACjB,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACrF,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY,EAAE,CAAC,EAAA,GAC7F,YAAY,EAAE,EACV,SAAA,EAAA,0BAA0B,aAElCE,GAAW,CAAA,OAAA,EAAA,EAAA,GAAA,aAAa,EAAE,EAAA,SAAA,EAAU,gCAAgC,EAAA,CAAG,EACvEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAI,CAAA,EACrCF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,aACtB,aAAa,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,EAC5CE,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,EAAE,EAAA,CAAI,EACzBA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAC7D,EAAA,CAAA,CAAA,EAAA,CACJ,EACL,KAAK,CAAC,MAAM,GAAG,CAAC,KACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,QAAA,EAAA,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,SAAS,KAAI;AACjC,oBAAA,QACIA,GAAC,CAAA,mBAAmB,EAEhB,EAAA,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,CAAC,KAAK,KAAI;AACpB,4BAAA,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;yBAC9C,EAAA,YAAA,EACW,SAAS,IAAI,EAAE,EAC3B,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,SAAS,IAPjC,UAAU,CAAC,IAAI,CAAC,IAAI,CAQ3B,EACJ;AACN,iBAAC,CAAC,EAAA,CACA,CACT,CAAA,EAAA,CACF,EACL;AACN;;;;"}
1
+ {"version":3,"file":"MultiUpload.js","sources":["../src/MultiUpload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { FileViewWithPreview } from '@hh.ru/magritte-ui-upload/FileViewWithPreview';\nimport { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport {\n getUploadIcon,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst MultiUpload = ({\n files,\n trls,\n size,\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: Omit<UploadProps, 'multiple'>): ReactElement => {\n const uploadType = getAvaliableFileTypes(accept);\n const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n });\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n ...dropzoneProps,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple: true,\n });\n const { selectFileButton } = useDropButtons({ selectFileButton: _selectFileButton });\n return (\n <>\n <div\n className={classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive })}\n {...getRootProps()}\n data-qa=\"magritte-multiple-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-multiple-upload-input\" />\n <div className={styles.background} />\n <div className={styles.body}>\n {getUploadIcon(uploadType, undefined, false)}\n <VSpacing default={16} />\n <Placeholder trls={trls} selectFileButton={selectFileButton} />\n </div>\n </div>\n {files.length > 0 && (\n <div className={styles.fileList}>\n {files.map((loadedFile, indexFile) => {\n return (\n <FileViewWithPreview\n key={loadedFile.data.name}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, indexFile);\n }}\n aria-label={ariaLabel || ''}\n isLast={files.length - 1 === indexFile}\n />\n );\n })}\n </div>\n )}\n </>\n );\n};\n\nexport { MultiUpload };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,WAAW,GAAG,CAAC,EACjB,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,GAAG,cAAc,EACvB,gBAAgB,EAAE,iBAAiB,EACnC,cAAc,GAAG,qBAAqB,EACtC,cAAc,EAAE,sBAAsB,EACtC,cAAc,EAAE,sBAAsB,EACtC,YAAY,EAAE,oBAAoB,EAClC,YAAY,EAAE,SAAS,EACvB,GAAG,aAAa,EACY,KAAkB;AAC9C,IAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC;AACpE,QAAA,cAAc,EAAE,sBAAsB;AACtC,QAAA,cAAc,EAAE,sBAAsB;AACtC,QAAA,YAAY,EAAE,oBAAoB;AACrC,KAAA,CAAC,CAAC;IACH,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;AAC9D,QAAA,GAAG,aAAa;QAChB,MAAM;QACN,cAAc;QACd,cAAc;AACd,QAAA,QAAQ,EAAE,IAAI;AACjB,KAAA,CAAC,CAAC;AACH,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,cAAc,CAAC,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACrF,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAD,IAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY,EAAE,CAAC,EAAA,GAC7F,YAAY,EAAE,EACV,SAAA,EAAA,0BAA0B,aAElCE,GAAW,CAAA,OAAA,EAAA,EAAA,GAAA,aAAa,EAAE,EAAA,SAAA,EAAU,gCAAgC,EAAA,CAAG,EACvEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,EAAI,CAAA,EACrCF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,aACtB,aAAa,CAAC,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,EAC5CE,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,EAAE,EAAA,CAAI,EACzBA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAC7D,EAAA,CAAA,CAAA,EAAA,CACJ,EACL,KAAK,CAAC,MAAM,GAAG,CAAC,KACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,QAAA,EAAA,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,SAAS,KAAI;AACjC,oBAAA,QACIA,GAAC,CAAA,mBAAmB,EAEhB,EAAA,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,CAAC,KAAK,KAAI;AACpB,4BAAA,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;yBAC9C,EAAA,YAAA,EACW,SAAS,IAAI,EAAE,EAC3B,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,SAAS,IAPjC,UAAU,CAAC,IAAI,CAAC,IAAI,CAQ3B,EACJ;AACN,iBAAC,CAAC,EAAA,CACA,CACT,CAAA,EAAA,CACF,EACL;AACN;;;;"}
package/SingleUpload.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import './index.css';
2
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
- import { useRef, useEffect } from 'react';
4
3
  import { useDropzone } from 'react-dropzone';
5
4
  import classnames from 'classnames';
6
5
  import { Avatar } from '@hh.ru/magritte-ui-avatar';
@@ -15,13 +14,12 @@ import { useDropActions } from './useDropActions.js';
15
14
  import { useDropButtons } from './useDropButtons.js';
16
15
  import { useFilePreview } from './useFilePreview.js';
17
16
  import { getAvaliableFileTypes, getUploadIcon, bytes2mb, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
18
- import { s as styles } from './upload-CHF-Lmcl.js';
19
- import '@hh.ru/magritte-ui-action';
17
+ import { s as styles } from './upload-C9cZwMko.js';
20
18
  import '@hh.ru/magritte-ui-divider';
21
19
  import '@hh.ru/magritte-ui-breakpoint';
20
+ import 'react';
22
21
 
23
22
  const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, deleteFileButton: _deleteFileButton, replaceImageButton: _replaceImageButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, 'aria-label': ariaLabel, ...dropzoneProps }) => {
24
- const bodyUploadRef = useRef(null);
25
23
  const uploadType = getAvaliableFileTypes(accept);
26
24
  const loadedFile = files.length > 0 ? files[0] : undefined;
27
25
  const isLoad = Boolean(loadedFile);
@@ -31,20 +29,6 @@ const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, s
31
29
  const isImageType = uploadType === 'image';
32
30
  const preview = useFilePreview({ loadedFile, isImageType });
33
31
  const usePreview = preview !== 'none';
34
- useEffect(() => {
35
- if (!bodyUploadRef.current) {
36
- return void 0;
37
- }
38
- if (isSizeSmall) {
39
- return void 0;
40
- }
41
- // фиксируем ширину, так как после выбора контент поменяется
42
- const currentElement = bodyUploadRef.current;
43
- currentElement.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;
44
- return () => {
45
- currentElement.style.minHeight = 'auto';
46
- };
47
- }, [isSizeSmall]);
48
32
  const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({
49
33
  onDropAccepted: onDropAcceptedExternal,
50
34
  onDropRejected: onDropRejectedExternal,
@@ -68,17 +52,17 @@ const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, s
68
52
  const backgroundStyles = !isSizeSmall
69
53
  ? { backgroundImage: preview !== 'none' ? `url('${preview}')` : preview }
70
54
  : {};
71
- return (jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }, { [styles.loading]: isLoading }, { [styles.load]: isLoad }, { [styles.invalid]: isInvalid }), ...getRootProps(), "data-qa": "magritte-single-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-single-upload-input" }), jsx("div", { className: styles.background, style: backgroundStyles, "data-qa": "magritte-single-upload-background" }), jsxs("div", { className: styles.body, ref: bodyUploadRef, children: [isSizeSmall && (jsxs(Fragment, { children: [loadedFile && (jsx(FileView, { uploadType: uploadType, loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
55
+ return (jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }, { [styles.loading]: isLoading }, { [styles.load]: isLoad }, { [styles.invalid]: isInvalid }), ...getRootProps(), "data-qa": "magritte-single-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-single-upload-input" }), jsx("div", { className: styles.background, style: backgroundStyles, "data-qa": "magritte-single-upload-background" }), jsxs("div", { className: styles.body, children: [isSizeSmall && (jsxs(Fragment, { children: [loadedFile && (jsx(FileView, { uploadType: uploadType, loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
72
56
  onFileDelete(event, loadedFile, 0);
73
- }, preview: preview, "aria-label": ariaLabel || '', isLast: true })), !loadedFile && (jsxs(Fragment, { children: [jsx(Avatar, { mode: "icon", style: "secondary", size: 48, icon: getUploadIcon(uploadType, loadedFile, true), "aria-label": ariaLabel || '' }), jsxs("div", { children: [jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 4 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle })] }), selectFileButton && jsx("div", { className: styles.smallControls, children: selectFileButton })] }))] })), !isSizeSmall && (jsxs(Fragment, { children: [isLoading && (jsxs("div", { className: styles.loader, children: [jsx(Loader, { size: 64 }), jsx("div", { className: styles.cancel, children: jsx(CrossOutlinedSize24, { initialColor: "accent", onClick: (event) => {
74
- onFileDelete(event, loadedFile, 0);
75
- } }) })] })), isInvalid ? (jsx(ExclamationTriangleOutlinedSize32, { initialColor: "negative" })) : (!usePreview && getUploadIcon(uploadType, loadedFile, false)), jsx(VSpacing, { default: 16 }), loadedFile && (jsxs(Fragment, { children: [!usePreview && (jsxs(Fragment, { children: [jsx(FileName, { file: loadedFile.data, isSizeMedium: true }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: renderFileInfo({
57
+ }, preview: preview, "aria-label": ariaLabel || '', isLast: true })), !loadedFile && (jsxs(Fragment, { children: [jsx(Avatar, { mode: "icon", style: "secondary", size: 48, icon: getUploadIcon(uploadType, loadedFile, true), "aria-label": ariaLabel || '' }), jsxs("div", { children: [jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 4 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle })] }), selectFileButton && jsx("div", { className: styles.smallControls, children: selectFileButton })] }))] })), !isSizeSmall && (jsxs(Fragment, { children: [isLoading && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 12 }), jsxs("div", { className: styles.loader, children: [jsx(Loader, { size: 64 }), jsx("div", { className: styles.cancel, children: jsx(CrossOutlinedSize24, { initialColor: "accent", onClick: (event) => {
58
+ onFileDelete(event, loadedFile, 0);
59
+ } }) })] })] })), isInvalid ? (jsx(ExclamationTriangleOutlinedSize32, { initialColor: "negative" })) : (jsx("span", { className: classnames(styles.fileIcon, { [styles.hiddenFileInfo]: usePreview }), children: getUploadIcon(uploadType, loadedFile, false) })), jsx(VSpacing, { default: 16 }), loadedFile && (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.fileInfo, { [styles.hiddenFileInfo]: usePreview }), children: [jsx(FileName, { file: loadedFile.data, isSizeMedium: true }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: renderFileInfo({
76
60
  ...loadedFile,
77
61
  fileSizeMB: bytes2mb(loadedFile.data.size),
78
- }) })] })), !isLoading && (!isImageType || isInvalid) && deleteFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), deleteFileButton] })), !isLoading &&
62
+ }) })] }), !isLoading && (!isImageType || isInvalid) && deleteFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), deleteFileButton] })), !isLoading &&
79
63
  isImageType &&
80
64
  !isInvalid &&
81
- (replaceImageButton || deleteFileButton) && (jsxs("div", { className: styles.imageControls, children: [replaceImageButton, deleteFileButton] }))] })), !loadedFile && jsx(Placeholder, { trls: trls, selectFileButton: selectFileButton })] }))] })] }));
65
+ (replaceImageButton || deleteFileButton) && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), jsxs("div", { className: styles.imageControls, children: [replaceImageButton, deleteFileButton] })] })), isLoading && jsx(VSpacing, { default: 12 })] })), !loadedFile && jsx(Placeholder, { trls: trls, selectFileButton: selectFileButton })] }))] })] }));
82
66
  };
83
67
 
84
68
  export { SingleUpload };
package/SingleUpload.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SingleUpload.js","sources":["../src/SingleUpload.tsx"],"sourcesContent":["import { ReactElement, useRef, useEffect, MouseEvent } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { CrossOutlinedSize24, ExclamationTriangleOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { FileView } from '@hh.ru/magritte-ui-upload/FileView';\nimport { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport {\n getUploadIcon,\n bytes2mb,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst SingleUpload = ({\n files,\n trls,\n size = 'medium',\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: UploadProps): ReactElement => {\n const bodyUploadRef = useRef<HTMLDivElement>(null);\n const uploadType = getAvaliableFileTypes(accept);\n const loadedFile = files.length > 0 ? files[0] : undefined;\n const isLoad = Boolean(loadedFile);\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isSizeSmall = size === 'small';\n const isImageType = uploadType === 'image';\n const preview = useFilePreview({ loadedFile, isImageType });\n const usePreview = preview !== 'none';\n\n useEffect(() => {\n if (!bodyUploadRef.current) {\n return void 0;\n }\n if (isSizeSmall) {\n return void 0;\n }\n // фиксируем ширину, так как после выбора контент поменяется\n const currentElement = bodyUploadRef.current;\n currentElement.style.minHeight = `${bodyUploadRef.current.offsetHeight}px`;\n return () => {\n currentElement.style.minHeight = 'auto';\n };\n }, [isSizeSmall]);\n\n const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n });\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n ...dropzoneProps,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple: false,\n });\n\n const { selectFileButton, deleteFileButton, replaceImageButton } = useDropButtons({\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n onFileDelete: (event: MouseEvent) => {\n onFileDelete(event, loadedFile, 0);\n },\n });\n\n const backgroundStyles = !isSizeSmall\n ? { backgroundImage: preview !== 'none' ? `url('${preview}')` : preview }\n : {};\n return (\n <div\n className={classnames(\n styles.root,\n styles[`root_${size}`],\n { [styles.dragActive]: isDragActive },\n { [styles.loading]: isLoading },\n { [styles.load]: isLoad },\n { [styles.invalid]: isInvalid }\n )}\n {...getRootProps()}\n data-qa=\"magritte-single-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-single-upload-input\" />\n <div className={styles.background} style={backgroundStyles} data-qa=\"magritte-single-upload-background\" />\n <div className={styles.body} ref={bodyUploadRef}>\n {isSizeSmall && (\n <>\n {loadedFile && (\n <FileView\n uploadType={uploadType}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n preview={preview}\n aria-label={ariaLabel || ''}\n isLast\n />\n )}\n {!loadedFile && (\n <>\n <Avatar\n mode=\"icon\"\n style=\"secondary\"\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel || ''}\n />\n <div>\n <Text typography=\"label-2-regular\">{trls.title}</Text>\n <VSpacing default={4} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {trls.subTitle}\n </Text>\n </div>\n {selectFileButton && <div className={styles.smallControls}>{selectFileButton}</div>}\n </>\n )}\n </>\n )}\n {!isSizeSmall && (\n <>\n {isLoading && (\n <div className={styles.loader}>\n <Loader size={64} />\n <div className={styles.cancel}>\n <CrossOutlinedSize24\n initialColor=\"accent\"\n onClick={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n />\n </div>\n </div>\n )}\n {isInvalid ? (\n <ExclamationTriangleOutlinedSize32 initialColor=\"negative\" />\n ) : (\n !usePreview && getUploadIcon(uploadType, loadedFile, false)\n )}\n <VSpacing default={16} />\n {loadedFile && (\n <>\n {!usePreview && (\n <>\n <FileName file={loadedFile.data} isSizeMedium />\n <VSpacing default={6} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </Text>\n </>\n )}\n {!isLoading && (!isImageType || isInvalid) && deleteFileButton && (\n <>\n <VSpacing default={16} />\n {deleteFileButton}\n </>\n )}\n {!isLoading &&\n isImageType &&\n !isInvalid &&\n (replaceImageButton || deleteFileButton) && (\n <div className={styles.imageControls}>\n {replaceImageButton}\n {deleteFileButton}\n </div>\n )}\n </>\n )}\n {!loadedFile && <Placeholder trls={trls} selectFileButton={selectFileButton} />}\n </>\n )}\n </div>\n </div>\n );\n};\n\nexport { SingleUpload };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"SingleUpload.js","sources":["../src/SingleUpload.tsx"],"sourcesContent":["import { ReactElement, MouseEvent } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport classnames from 'classnames';\n\nimport { Avatar } from '@hh.ru/magritte-ui-avatar';\nimport { CrossOutlinedSize24, ExclamationTriangleOutlinedSize32 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileName } from '@hh.ru/magritte-ui-upload/FileName';\nimport { FileView } from '@hh.ru/magritte-ui-upload/FileView';\nimport { Placeholder } from '@hh.ru/magritte-ui-upload/Placeholder';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\nimport { useDropActions } from '@hh.ru/magritte-ui-upload/useDropActions';\nimport { useDropButtons } from '@hh.ru/magritte-ui-upload/useDropButtons';\nimport { useFilePreview } from '@hh.ru/magritte-ui-upload/useFilePreview';\nimport {\n getUploadIcon,\n bytes2mb,\n getAvaliableFileTypes,\n RenderFileInfoDefault,\n DEFAULT_ACCEPT,\n} from '@hh.ru/magritte-ui-upload/utils';\n\nimport styles from './upload.less';\n\nconst SingleUpload = ({\n files,\n trls,\n size = 'medium',\n accept = DEFAULT_ACCEPT,\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n renderFileInfo = RenderFileInfoDefault,\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n 'aria-label': ariaLabel,\n ...dropzoneProps\n}: UploadProps): ReactElement => {\n const uploadType = getAvaliableFileTypes(accept);\n const loadedFile = files.length > 0 ? files[0] : undefined;\n const isLoad = Boolean(loadedFile);\n const isLoading = Boolean(loadedFile?.loading);\n const isInvalid = Boolean(loadedFile?.error);\n const isSizeSmall = size === 'small';\n const isImageType = uploadType === 'image';\n const preview = useFilePreview({ loadedFile, isImageType });\n const usePreview = preview !== 'none';\n\n const { onDropAccepted, onDropRejected, onFileDelete } = useDropActions({\n onDropAccepted: onDropAcceptedExternal,\n onDropRejected: onDropRejectedExternal,\n onFileDelete: onFileDeleteExternal,\n });\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n ...dropzoneProps,\n accept,\n onDropAccepted,\n onDropRejected,\n multiple: false,\n });\n\n const { selectFileButton, deleteFileButton, replaceImageButton } = useDropButtons({\n selectFileButton: _selectFileButton,\n deleteFileButton: _deleteFileButton,\n replaceImageButton: _replaceImageButton,\n onFileDelete: (event: MouseEvent) => {\n onFileDelete(event, loadedFile, 0);\n },\n });\n\n const backgroundStyles = !isSizeSmall\n ? { backgroundImage: preview !== 'none' ? `url('${preview}')` : preview }\n : {};\n return (\n <div\n className={classnames(\n styles.root,\n styles[`root_${size}`],\n { [styles.dragActive]: isDragActive },\n { [styles.loading]: isLoading },\n { [styles.load]: isLoad },\n { [styles.invalid]: isInvalid }\n )}\n {...getRootProps()}\n data-qa=\"magritte-single-upload\"\n >\n <input {...getInputProps()} data-qa=\"magritte-single-upload-input\" />\n <div className={styles.background} style={backgroundStyles} data-qa=\"magritte-single-upload-background\" />\n <div className={styles.body}>\n {isSizeSmall && (\n <>\n {loadedFile && (\n <FileView\n uploadType={uploadType}\n loadedFile={loadedFile}\n renderFileInfo={renderFileInfo}\n onFileDelete={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n preview={preview}\n aria-label={ariaLabel || ''}\n isLast\n />\n )}\n {!loadedFile && (\n <>\n <Avatar\n mode=\"icon\"\n style=\"secondary\"\n size={48}\n icon={getUploadIcon(uploadType, loadedFile, true)}\n aria-label={ariaLabel || ''}\n />\n <div>\n <Text typography=\"label-2-regular\">{trls.title}</Text>\n <VSpacing default={4} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {trls.subTitle}\n </Text>\n </div>\n {selectFileButton && <div className={styles.smallControls}>{selectFileButton}</div>}\n </>\n )}\n </>\n )}\n {!isSizeSmall && (\n <>\n {isLoading && (\n <>\n <VSpacing default={12} />\n <div className={styles.loader}>\n <Loader size={64} />\n <div className={styles.cancel}>\n <CrossOutlinedSize24\n initialColor=\"accent\"\n onClick={(event) => {\n onFileDelete(event, loadedFile, 0);\n }}\n />\n </div>\n </div>\n </>\n )}\n {isInvalid ? (\n <ExclamationTriangleOutlinedSize32 initialColor=\"negative\" />\n ) : (\n <span className={classnames(styles.fileIcon, { [styles.hiddenFileInfo]: usePreview })}>\n {getUploadIcon(uploadType, loadedFile, false)}\n </span>\n )}\n <VSpacing default={16} />\n {loadedFile && (\n <>\n <div className={classnames(styles.fileInfo, { [styles.hiddenFileInfo]: usePreview })}>\n <FileName file={loadedFile.data} isSizeMedium />\n <VSpacing default={6} />\n <Text typography=\"label-4-regular\" style=\"secondary\">\n {renderFileInfo({\n ...loadedFile,\n fileSizeMB: bytes2mb(loadedFile.data.size),\n })}\n </Text>\n </div>\n {!isLoading && (!isImageType || isInvalid) && deleteFileButton && (\n <>\n <VSpacing default={16} />\n {deleteFileButton}\n </>\n )}\n {!isLoading &&\n isImageType &&\n !isInvalid &&\n (replaceImageButton || deleteFileButton) && (\n <>\n <VSpacing default={16} />\n <div className={styles.imageControls}>\n {replaceImageButton}\n {deleteFileButton}\n </div>\n </>\n )}\n {isLoading && <VSpacing default={12} />}\n </>\n )}\n {!loadedFile && <Placeholder trls={trls} selectFileButton={selectFileButton} />}\n </>\n )}\n </div>\n </div>\n );\n};\n\nexport { SingleUpload };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
package/Upload.js CHANGED
@@ -7,7 +7,6 @@ import 'classnames';
7
7
  import '@hh.ru/magritte-ui-spacing';
8
8
  import './FileViewWithPreview.js';
9
9
  import './FileView.js';
10
- import '@hh.ru/magritte-ui-action';
11
10
  import '@hh.ru/magritte-ui-avatar';
12
11
  import '@hh.ru/magritte-ui-divider';
13
12
  import '@hh.ru/magritte-ui-icon/icon';
@@ -21,7 +20,7 @@ import '@hh.ru/magritte-ui-breakpoint';
21
20
  import '@hh.ru/magritte-ui-typography';
22
21
  import './useDropActions.js';
23
22
  import './useDropButtons.js';
24
- import './upload-CHF-Lmcl.js';
23
+ import './upload-C9cZwMko.js';
25
24
 
26
25
  const Upload = ({ multiple, noDragEventsBubbling = true, ...uploadProps }) => {
27
26
  if (multiple) {
package/Upload.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Upload.js","sources":["../src/Upload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { MultiUpload } from '@hh.ru/magritte-ui-upload/MultiUpload';\nimport { SingleUpload } from '@hh.ru/magritte-ui-upload/SingleUpload';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\n\nconst Upload = ({ multiple, noDragEventsBubbling = true, ...uploadProps }: UploadProps): ReactElement => {\n if (multiple) {\n return <MultiUpload noDragEventsBubbling={noDragEventsBubbling} {...uploadProps} />;\n }\n return <SingleUpload noDragEventsBubbling={noDragEventsBubbling} {...uploadProps} />;\n};\n\nexport { Upload };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,WAAW,EAAe,KAAkB;IACpG,IAAI,QAAQ,EAAE;QACV,OAAOA,GAAA,CAAC,WAAW,EAAC,EAAA,oBAAoB,EAAE,oBAAoB,EAAA,GAAM,WAAW,EAAA,CAAI,CAAC;KACvF;IACD,OAAOA,GAAA,CAAC,YAAY,EAAC,EAAA,oBAAoB,EAAE,oBAAoB,EAAA,GAAM,WAAW,EAAA,CAAI,CAAC;AACzF;;;;"}
1
+ {"version":3,"file":"Upload.js","sources":["../src/Upload.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { MultiUpload } from '@hh.ru/magritte-ui-upload/MultiUpload';\nimport { SingleUpload } from '@hh.ru/magritte-ui-upload/SingleUpload';\nimport { UploadProps } from '@hh.ru/magritte-ui-upload/types';\n\nconst Upload = ({ multiple, noDragEventsBubbling = true, ...uploadProps }: UploadProps): ReactElement => {\n if (multiple) {\n return <MultiUpload noDragEventsBubbling={noDragEventsBubbling} {...uploadProps} />;\n }\n return <SingleUpload noDragEventsBubbling={noDragEventsBubbling} {...uploadProps} />;\n};\n\nexport { Upload };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EAAE,GAAG,WAAW,EAAe,KAAkB;IACpG,IAAI,QAAQ,EAAE;QACV,OAAOA,GAAA,CAAC,WAAW,EAAC,EAAA,oBAAoB,EAAE,oBAAoB,EAAA,GAAM,WAAW,EAAA,CAAI,CAAC;KACvF;IACD,OAAOA,GAAA,CAAC,YAAY,EAAC,EAAA,oBAAoB,EAAE,oBAAoB,EAAA,GAAM,WAAW,EAAA,CAAI,CAAC;AACzF;;;;"}
package/index.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --magritte-typography-label-2-regular-text-transform-v21-3-2:none;
9
9
  --magritte-typography-label-2-regular-text-decoration-v21-3-2:none;
10
10
  }
11
- .magritte-file-name-body___PTTMc_3-2-17{
11
+ .magritte-file-name-body___PTTMc_3-3-1{
12
12
  display:flex;
13
13
  width:100%;
14
14
  overflow:hidden;
@@ -21,10 +21,10 @@
21
21
  text-transform:var(--magritte-typography-label-2-regular-text-transform-v21-3-2);
22
22
  text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v21-3-2);
23
23
  }
24
- .magritte-file-name-body_medium___sfmmq_3-2-17{
24
+ .magritte-file-name-body_medium___sfmmq_3-3-1{
25
25
  justify-content:center;
26
26
  }
27
- .magritte-file-name___ZSL2g_3-2-17{
27
+ .magritte-file-name___ZSL2g_3-3-1{
28
28
  overflow:hidden;
29
29
  text-overflow:ellipsis;
30
30
  }
@@ -41,18 +41,18 @@
41
41
  --magritte-static-space-100-v21-3-2:4px;
42
42
  --magritte-static-space-400-v21-3-2:16px;
43
43
  }
44
- .magritte-file-info-body___HmfXd_3-2-17{
44
+ .magritte-file-info-body___HmfXd_3-3-1{
45
45
  flex-grow:1;
46
46
  }
47
- .magritte-file-info-and-controls___61iyY_3-2-17{
47
+ .magritte-file-info-and-controls___61iyY_3-3-1{
48
48
  display:flex;
49
49
  gap:var(--magritte-static-space-400-v21-3-2);
50
50
  }
51
- .magritte-file-info-container___WFab8_3-2-17{
51
+ .magritte-file-info-container___WFab8_3-3-1{
52
52
  flex-grow:1;
53
53
  width:50px;
54
54
  }
55
- .magritte-file-info___HrqiB_3-2-17{
55
+ .magritte-file-info___HrqiB_3-3-1{
56
56
  display:flex;
57
57
  gap:var(--magritte-static-space-100-v21-3-2);
58
58
  font-family:var(--magritte-typography-label-4-regular-font-family-v21-3-2);
@@ -64,7 +64,7 @@
64
64
  text-transform:var(--magritte-typography-label-4-regular-text-transform-v21-3-2);
65
65
  text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v21-3-2);
66
66
  }
67
- .magritte-controls___WdH7A_3-2-17{
67
+ .magritte-controls___WdH7A_3-3-1{
68
68
  display:flex;
69
69
  align-items:center;
70
70
  margin-left:auto;
@@ -74,7 +74,7 @@
74
74
  :root{
75
75
  --magritte-static-space-400-v21-3-2:16px;
76
76
  }
77
- .magritte-item___vVDG-_3-2-17{
77
+ .magritte-item___vVDG-_3-3-1{
78
78
  display:flex;
79
79
  width:100%;
80
80
  gap:var(--magritte-static-space-400-v21-3-2);
@@ -101,57 +101,57 @@
101
101
  --magritte-color-stroke-state-focused-accessible-v21-3-2:#0070ff7a;
102
102
  --magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-2:#ff4d3a7a;
103
103
  }
104
- .magritte-root___FV1tC_3-2-17{
104
+ .magritte-root___FV1tC_3-3-1{
105
105
  position:relative;
106
106
  display:flex;
107
107
  overflow:hidden;
108
108
  border-radius:var(--magritte-static-border-radius-600-v21-3-2);
109
109
  background-color:var(--magritte-color-background-primary-v21-3-2);
110
110
  }
111
- .magritte-root___FV1tC_3-2-17:hover{
111
+ .magritte-root___FV1tC_3-3-1:hover{
112
112
  cursor:pointer;
113
113
  }
114
- .magritte-root___FV1tC_3-2-17:hover .magritte-background___RfZ0U_3-2-17{
114
+ .magritte-root___FV1tC_3-3-1:hover .magritte-background___RfZ0U_3-3-1{
115
115
  border-color:var(--magritte-color-stroke-accent-v21-3-2);
116
116
  }
117
- .magritte-root___FV1tC_3-2-17.magritte-drag-active___dihBL_3-2-17 .magritte-background___RfZ0U_3-2-17{
117
+ .magritte-root___FV1tC_3-3-1.magritte-drag-active___dihBL_3-3-1 .magritte-background___RfZ0U_3-3-1{
118
118
  border-color:var(--magritte-color-stroke-accent-v21-3-2);
119
119
  }
120
- .magritte-root___FV1tC_3-2-17.focus-visible{
120
+ .magritte-root___FV1tC_3-3-1.focus-visible{
121
121
  outline:var(--magritte-color-stroke-state-focused-accessible-v21-3-2) solid 4px;
122
122
  }
123
- .magritte-root___FV1tC_3-2-17.focus-visible .magritte-background___RfZ0U_3-2-17{
123
+ .magritte-root___FV1tC_3-3-1.focus-visible .magritte-background___RfZ0U_3-3-1{
124
124
  border-color:var(--magritte-color-stroke-accent-v21-3-2);
125
125
  }
126
- .magritte-root___FV1tC_3-2-17.magritte-load___MghDA_3-2-17 .magritte-background___RfZ0U_3-2-17,
127
- .magritte-root___FV1tC_3-2-17.magritte-loading___9E3p-_3-2-17 .magritte-background___RfZ0U_3-2-17{
126
+ .magritte-root___FV1tC_3-3-1.magritte-load___MghDA_3-3-1 .magritte-background___RfZ0U_3-3-1,
127
+ .magritte-root___FV1tC_3-3-1.magritte-loading___9E3p-_3-3-1 .magritte-background___RfZ0U_3-3-1{
128
128
  border-style:solid;
129
129
  border-width:7px;
130
130
  }
131
- .magritte-root___FV1tC_3-2-17.magritte-invalid___Rt10-_3-2-17.focus-visible{
131
+ .magritte-root___FV1tC_3-3-1.magritte-invalid___Rt10-_3-3-1.focus-visible{
132
132
  outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v21-3-2) solid 4px;
133
133
  }
134
- .magritte-root___FV1tC_3-2-17.magritte-invalid___Rt10-_3-2-17 .magritte-background___RfZ0U_3-2-17{
134
+ .magritte-root___FV1tC_3-3-1.magritte-invalid___Rt10-_3-3-1 .magritte-background___RfZ0U_3-3-1{
135
135
  border-color:var(--magritte-color-stroke-neutral-v21-3-2);
136
136
  }
137
- .magritte-root_medium___67WJa_3-2-17{
137
+ .magritte-root_medium___67WJa_3-3-1{
138
138
  justify-content:center;
139
139
  padding:var(--magritte-static-space-600-v21-3-2);
140
140
  }
141
- .magritte-root_medium___67WJa_3-2-17 .magritte-body___O7ROl_3-2-17{
141
+ .magritte-root_medium___67WJa_3-3-1 .magritte-body___O7ROl_3-3-1{
142
142
  flex-direction:column;
143
143
  align-items:center;
144
144
  justify-content:center;
145
145
  }
146
- .magritte-root_small___dkUYq_3-2-17{
146
+ .magritte-root_small___dkUYq_3-3-1{
147
147
  padding-top:var(--magritte-static-space-400-v21-3-2);
148
148
  padding-bottom:var(--magritte-static-space-400-v21-3-2);
149
149
  padding-left:var(--magritte-static-space-400-v21-3-2);
150
150
  }
151
- .magritte-root_small___dkUYq_3-2-17 .magritte-body___O7ROl_3-2-17{
151
+ .magritte-root_small___dkUYq_3-3-1 .magritte-body___O7ROl_3-3-1{
152
152
  gap:var(--magritte-static-space-400-v21-3-2);
153
153
  }
154
- .magritte-background___RfZ0U_3-2-17{
154
+ .magritte-background___RfZ0U_3-3-1{
155
155
  position:absolute;
156
156
  border-width:8px;
157
157
  border-style:dashed;
@@ -164,15 +164,15 @@
164
164
  background-position:center;
165
165
  background-size:100%;
166
166
  }
167
- .magritte-body___O7ROl_3-2-17{
167
+ .magritte-body___O7ROl_3-3-1{
168
168
  display:flex;
169
169
  width:100%;
170
170
  }
171
- .magritte-loader___XYpWg_3-2-17{
171
+ .magritte-loader___XYpWg_3-3-1{
172
172
  position:relative;
173
173
  display:flex;
174
174
  }
175
- .magritte-cancel___tQ-yX_3-2-17{
175
+ .magritte-cancel___tQ-yX_3-3-1{
176
176
  position:absolute;
177
177
  top:0;
178
178
  left:0;
@@ -182,20 +182,20 @@
182
182
  align-items:center;
183
183
  justify-content:center;
184
184
  }
185
- .magritte-image-controls___vLf94_3-2-17{
185
+ .magritte-image-controls___vLf94_3-3-1{
186
186
  display:flex;
187
- position:absolute;
188
- right:var(--magritte-static-space-300-v21-3-2);
189
- bottom:var(--magritte-static-space-300-v21-3-2);
190
187
  gap:var(--magritte-static-space-300-v21-3-2);
188
+ align-items:flex-end;
189
+ justify-content:flex-end;
190
+ width:100%;
191
191
  }
192
- .magritte-small-controls___Qn9TP_3-2-17{
192
+ .magritte-small-controls___Qn9TP_3-3-1{
193
193
  display:flex;
194
194
  align-items:center;
195
195
  margin-left:auto;
196
196
  margin-right:var(--magritte-static-space-500-v21-3-2);
197
197
  }
198
- .magritte-file-list___L9uHt_3-2-17{
198
+ .magritte-file-list___L9uHt_3-3-1{
199
199
  margin-top:var(--magritte-static-space-300-v21-3-2);
200
200
  box-shadow:inset 0 0 0 1px var(--magritte-color-stroke-neutral-v21-3-2);
201
201
  border-radius:var(--magritte-static-border-radius-600-v21-3-2);
@@ -204,3 +204,15 @@
204
204
  padding-bottom:var(--magritte-static-space-400-v21-3-2);
205
205
  padding-left:var(--magritte-static-space-400-v21-3-2);
206
206
  }
207
+ .magritte-file-icon___oetLK_3-3-1{
208
+ display:inline-flex;
209
+ }
210
+ .magritte-file-info___Y3vyi_3-3-1{
211
+ display:inline-flex;
212
+ width:100%;
213
+ flex-direction:column;
214
+ align-items:center;
215
+ }
216
+ .magritte-hidden-file-info___92c69_3-3-1{
217
+ visibility:hidden;
218
+ }
package/index.js CHANGED
@@ -8,7 +8,6 @@ import 'classnames';
8
8
  import '@hh.ru/magritte-ui-spacing';
9
9
  import './FileViewWithPreview.js';
10
10
  import './FileView.js';
11
- import '@hh.ru/magritte-ui-action';
12
11
  import '@hh.ru/magritte-ui-avatar';
13
12
  import '@hh.ru/magritte-ui-divider';
14
13
  import '@hh.ru/magritte-ui-icon/icon';
@@ -22,6 +21,6 @@ import '@hh.ru/magritte-ui-breakpoint';
22
21
  import '@hh.ru/magritte-ui-typography';
23
22
  import './useDropActions.js';
24
23
  import './useDropButtons.js';
25
- import './upload-CHF-Lmcl.js';
24
+ import './upload-C9cZwMko.js';
26
25
  import './SingleUpload.js';
27
26
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-upload",
3
- "version": "3.2.17",
3
+ "version": "3.3.1",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -27,19 +27,18 @@
27
27
  "react": ">=18.2.0"
28
28
  },
29
29
  "dependencies": {
30
- "@hh.ru/magritte-ui-action": "4.4.34",
31
- "@hh.ru/magritte-ui-avatar": "5.1.7",
30
+ "@hh.ru/magritte-ui-avatar": "5.1.8",
32
31
  "@hh.ru/magritte-ui-breakpoint": "5.0.0",
33
- "@hh.ru/magritte-ui-button": "5.2.28",
34
- "@hh.ru/magritte-ui-button-stack": "2.1.48",
32
+ "@hh.ru/magritte-ui-button": "5.2.29",
33
+ "@hh.ru/magritte-ui-button-stack": "2.1.49",
35
34
  "@hh.ru/magritte-ui-divider": "1.1.45",
36
- "@hh.ru/magritte-ui-icon": "10.1.0",
37
- "@hh.ru/magritte-ui-loader": "1.3.26",
38
- "@hh.ru/magritte-ui-mock-component": "1.0.12",
39
- "@hh.ru/magritte-ui-spacing": "2.0.43",
35
+ "@hh.ru/magritte-ui-icon": "10.2.0",
36
+ "@hh.ru/magritte-ui-loader": "1.3.27",
37
+ "@hh.ru/magritte-ui-mock-component": "1.1.0",
38
+ "@hh.ru/magritte-ui-spacing": "2.0.44",
40
39
  "@hh.ru/magritte-ui-theme-provider": "1.1.41",
41
- "@hh.ru/magritte-ui-typography": "3.0.31",
40
+ "@hh.ru/magritte-ui-typography": "3.0.32",
42
41
  "react-dropzone": "14.3.5"
43
42
  },
44
- "gitHead": "cbe1fb9e87fc21a078105505992bf64d19e9b9b5"
43
+ "gitHead": "d549910ae0f9986be51379b31038ba5b4866248e"
45
44
  }
package/upload-C9cZwMko.js ADDED
@@ -0,0 +1,5 @@
1
+ import './index.css';
2
+ var styles = {"root":"magritte-root___FV1tC_3-3-1","background":"magritte-background___RfZ0U_3-3-1","drag-active":"magritte-drag-active___dihBL_3-3-1","dragActive":"magritte-drag-active___dihBL_3-3-1","load":"magritte-load___MghDA_3-3-1","loading":"magritte-loading___9E3p-_3-3-1","invalid":"magritte-invalid___Rt10-_3-3-1","root_medium":"magritte-root_medium___67WJa_3-3-1","rootMedium":"magritte-root_medium___67WJa_3-3-1","body":"magritte-body___O7ROl_3-3-1","root_small":"magritte-root_small___dkUYq_3-3-1","rootSmall":"magritte-root_small___dkUYq_3-3-1","loader":"magritte-loader___XYpWg_3-3-1","cancel":"magritte-cancel___tQ-yX_3-3-1","image-controls":"magritte-image-controls___vLf94_3-3-1","imageControls":"magritte-image-controls___vLf94_3-3-1","small-controls":"magritte-small-controls___Qn9TP_3-3-1","smallControls":"magritte-small-controls___Qn9TP_3-3-1","file-list":"magritte-file-list___L9uHt_3-3-1","fileList":"magritte-file-list___L9uHt_3-3-1","file-icon":"magritte-file-icon___oetLK_3-3-1","fileIcon":"magritte-file-icon___oetLK_3-3-1","file-info":"magritte-file-info___Y3vyi_3-3-1","fileInfo":"magritte-file-info___Y3vyi_3-3-1","hidden-file-info":"magritte-hidden-file-info___92c69_3-3-1","hiddenFileInfo":"magritte-hidden-file-info___92c69_3-3-1"};
3
+
4
+ export { styles as s };
5
+ //# sourceMappingURL=upload-C9cZwMko.js.map
package/upload-C9cZwMko.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"upload-C9cZwMko.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
package/upload-CHF-Lmcl.js DELETED
@@ -1,5 +0,0 @@
1
- import './index.css';
2
- var styles = {"root":"magritte-root___FV1tC_3-2-17","background":"magritte-background___RfZ0U_3-2-17","drag-active":"magritte-drag-active___dihBL_3-2-17","dragActive":"magritte-drag-active___dihBL_3-2-17","load":"magritte-load___MghDA_3-2-17","loading":"magritte-loading___9E3p-_3-2-17","invalid":"magritte-invalid___Rt10-_3-2-17","root_medium":"magritte-root_medium___67WJa_3-2-17","rootMedium":"magritte-root_medium___67WJa_3-2-17","body":"magritte-body___O7ROl_3-2-17","root_small":"magritte-root_small___dkUYq_3-2-17","rootSmall":"magritte-root_small___dkUYq_3-2-17","loader":"magritte-loader___XYpWg_3-2-17","cancel":"magritte-cancel___tQ-yX_3-2-17","image-controls":"magritte-image-controls___vLf94_3-2-17","imageControls":"magritte-image-controls___vLf94_3-2-17","small-controls":"magritte-small-controls___Qn9TP_3-2-17","smallControls":"magritte-small-controls___Qn9TP_3-2-17","file-list":"magritte-file-list___L9uHt_3-2-17","fileList":"magritte-file-list___L9uHt_3-2-17"};
3
-
4
- export { styles as s };
5
- //# sourceMappingURL=upload-CHF-Lmcl.js.map
package/upload-CHF-Lmcl.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"upload-CHF-Lmcl.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}