@hh.ru/magritte-ui-upload 3.0.1 → 3.1.1

package/FileName.js

@@ -2,7 +2,7 @@ import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 
-var styles = {"file-name-body":"magritte-file-name-body___PTTMc_3-0-1","fileNameBody":"magritte-file-name-body___PTTMc_3-0-1","file-name-body_medium":"magritte-file-name-body_medium___sfmmq_3-0-1","fileNameBodyMedium":"magritte-file-name-body_medium___sfmmq_3-0-1","file-name":"magritte-file-name___ZSL2g_3-0-1","fileName":"magritte-file-name___ZSL2g_3-0-1"};
+var styles = {"file-name-body":"magritte-file-name-body___PTTMc_3-1-1","fileNameBody":"magritte-file-name-body___PTTMc_3-1-1","file-name-body_medium":"magritte-file-name-body_medium___sfmmq_3-1-1","fileNameBodyMedium":"magritte-file-name-body_medium___sfmmq_3-1-1","file-name":"magritte-file-name___ZSL2g_3-1-1","fileName":"magritte-file-name___ZSL2g_3-1-1"};
 
 const parse = (file) => {
     const name = file.name;

package/FileView.js

@@ -10,13 +10,13 @@ import { FileName } from './FileName.js';
 import { getUploadIcon, bytes2mb } from './utils.js';
 import 'classnames';
 
-var styles = {"file-info-body":"magritte-file-info-body___HmfXd_3-0-1","fileInfoBody":"magritte-file-info-body___HmfXd_3-0-1","file-info-and-controls":"magritte-file-info-and-controls___61iyY_3-0-1","fileInfoAndControls":"magritte-file-info-and-controls___61iyY_3-0-1","file-info-container":"magritte-file-info-container___WFab8_3-0-1","fileInfoContainer":"magritte-file-info-container___WFab8_3-0-1","file-info":"magritte-file-info___HrqiB_3-0-1","fileInfo":"magritte-file-info___HrqiB_3-0-1","controls":"magritte-controls___WdH7A_3-0-1"};
+var styles = {"file-info-body":"magritte-file-info-body___HmfXd_3-1-1","fileInfoBody":"magritte-file-info-body___HmfXd_3-1-1","file-info-and-controls":"magritte-file-info-and-controls___61iyY_3-1-1","fileInfoAndControls":"magritte-file-info-and-controls___61iyY_3-1-1","file-info-container":"magritte-file-info-container___WFab8_3-1-1","fileInfoContainer":"magritte-file-info-container___WFab8_3-1-1","file-info":"magritte-file-info___HrqiB_3-1-1","fileInfo":"magritte-file-info___HrqiB_3-1-1","controls":"magritte-controls___WdH7A_3-1-1"};
 
 const FileView = ({ uploadType, loadedFile, preview, renderFileInfo, onFileDelete, 'aria-label': ariaLabel, isLast = false, }) => {
     const isLoading = Boolean(loadedFile?.loading);
     const isInvalid = Boolean(loadedFile?.error);
     const isImageType = uploadType === 'image';
-    return (jsxs(Fragment, { children: [jsx(Avatar, { mode: isImageType && !isLoading ? '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, { initial: "negative" }), isLoading && jsx(Loader, { size: 16 }), !isInvalid && !isLoading && jsx(CheckCircleOutlinedSize16, { initial: "positive" }), renderFileInfo({
+    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, { initial: "negative" }), isLoading && jsx(Loader, { size: 16 }), !isInvalid && !isLoading && jsx(CheckCircleOutlinedSize16, { initial: "positive" }), renderFileInfo({
                                                 ...loadedFile,
                                                 fileSizeMB: bytes2mb(loadedFile.data.size),
                                             })] })] }), 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 })] }))] })] }));

package/FileView.js.map

@@ -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 ? '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 initial=\"negative\" />}\n                            {isLoading && <Loader size={16} />}\n                            {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initial=\"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,GAAG,OAAO,GAAG,MAAM,EAClD,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,EACrC,YAAA,EAAA,SAAS,EACvB,CAAA,EACFF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,YAAY,EAC/B,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAA,QAAA,EAAA,CACtCA,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EAAA,CACpCE,GAAC,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAE,UAAU,CAAC,IAAI,EAAI,CAAA,EACnCA,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,CAAC,EAAI,CAAA,EACxBF,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,QAAA,EAAA,CAAA,SAAS,IAAIE,GAAC,CAAA,iCAAiC,EAAC,EAAA,OAAO,EAAC,UAAU,EAAG,CAAA,EACrE,SAAS,IAAIA,GAAC,CAAA,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAI,CAAA,EACjC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAIA,GAAC,CAAA,yBAAyB,EAAC,EAAA,OAAO,EAAC,UAAU,EAAG,CAAA,EAC5E,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;;;;"}
+{"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 initial=\"negative\" />}\n                            {isLoading && <Loader size={16} />}\n                            {!isInvalid && !isLoading && <CheckCircleOutlinedSize16 initial=\"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,OAAO,EAAC,UAAU,EAAA,CAAG,EACrE,SAAS,IAAIA,GAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,EACjC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAIA,GAAC,CAAA,yBAAyB,EAAC,EAAA,OAAO,EAAC,UAAU,EAAG,CAAA,EAC5E,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;;;;"}

package/FileViewWithPreview.js

@@ -13,7 +13,7 @@ import './FileName.js';
 import 'classnames';
 import 'react';
 
-var styles = {"item":"magritte-item___vVDG-_3-0-1"};
+var styles = {"item":"magritte-item___vVDG-_3-1-1"};
 
 const FileViewWithPreview = ({ loadedFile, ...otherProps }) => {
     const uploadType = getFileType(loadedFile.data.type);

package/MultiUpload.js

@@ -3,12 +3,12 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useDropzone } from 'react-dropzone';
 import classnames from 'classnames';
 import { VSpacing } from '@hh.ru/magritte-ui-spacing';
-import { Text } from '@hh.ru/magritte-ui-typography';
 import { FileViewWithPreview } from './FileViewWithPreview.js';
+import { Placeholder } from './Placeholder.js';
 import { useDropActions } from './useDropActions.js';
 import { useDropButtons } from './useDropButtons.js';
 import { getAvaliableFileTypes, getUploadIcon, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
-import { s as styles } from './upload-CR54iSr6.js';
+import { s as styles } from './upload-CJaTPbi8.js';
 import './FileView.js';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-avatar';
@@ -18,6 +18,8 @@ import '@hh.ru/magritte-ui-loader';
 import './FileName.js';
 import './useFilePreview.js';
 import 'react';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-typography';
 
 const MultiUpload = ({ files, trls, size, accept = DEFAULT_ACCEPT, selectFileButton: _selectFileButton, renderFileInfo = RenderFileInfoDefault, onDropAccepted: onDropAcceptedExternal, onDropRejected: onDropRejectedExternal, onFileDelete: onFileDeleteExternal, 'aria-label': ariaLabel, ...dropzoneProps }) => {
     const uploadType = getAvaliableFileTypes(accept);
@@ -34,7 +36,7 @@ const MultiUpload = ({ files, trls, size, accept = DEFAULT_ACCEPT, selectFileBut
         multiple: true,
     });
     const { selectFileButton } = useDropButtons({ selectFileButton: _selectFileButton });
-    return (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }), ...getRootProps(), "data-qa": "magritte-multiple-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-multiple-upload-input" }), jsx("div", { className: styles.background }), jsxs("div", { className: styles.body, children: [getUploadIcon(uploadType, undefined, false), jsx(VSpacing, { default: 16 }), jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle }), selectFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), selectFileButton] }))] })] }), files.length > 0 && (jsx("div", { className: styles.fileList, children: files.map((loadedFile, indexFile) => {
+    return (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.root, styles[`root_${size}`], { [styles.dragActive]: isDragActive }), ...getRootProps(), "data-qa": "magritte-multiple-upload", children: [jsx("input", { ...getInputProps(), "data-qa": "magritte-multiple-upload-input" }), jsx("div", { className: styles.background }), jsxs("div", { className: styles.body, children: [getUploadIcon(uploadType, undefined, false), jsx(VSpacing, { default: 16 }), jsx(Placeholder, { trls: trls, selectFileButton: selectFileButton })] })] }), files.length > 0 && (jsx("div", { className: styles.fileList, children: files.map((loadedFile, indexFile) => {
                     return (jsx(FileViewWithPreview, { loadedFile: loadedFile, renderFileInfo: renderFileInfo, onFileDelete: (event) => {
                             onFileDelete(event, loadedFile, indexFile);
                         }, "aria-label": ariaLabel || '', isLast: files.length - 1 === indexFile }, loadedFile.data.name));

package/MultiUpload.js.map

@@ -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 { Text } from '@hh.ru/magritte-ui-typography';\nimport { FileViewWithPreview } from '@hh.ru/magritte-ui-upload/FileViewWithPreview';\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                    <Text typography=\"label-2-regular\">{trls.title}</Text>\n                    <VSpacing default={6} />\n                    <Text typography=\"label-4-regular\" style=\"secondary\">\n                        {trls.subTitle}\n                    </Text>\n                    {selectFileButton && (\n                        <>\n                            <VSpacing default={16} />\n                            {selectFileButton}\n                        </>\n                    )}\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":"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"}
+{"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/Placeholder.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { ButtonElement, UploadTrls } from '@hh.ru/magritte-ui-upload/types';
+interface PlaceholderProps {
+    trls: UploadTrls;
+    selectFileButton?: ButtonElement;
+}
+declare const Placeholder: ({ trls, selectFileButton }: PlaceholderProps) => ReactElement;
+export { Placeholder };

package/Placeholder.js

@@ -0,0 +1,14 @@
+import './index.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { VSpacing } from '@hh.ru/magritte-ui-spacing';
+import { Text } from '@hh.ru/magritte-ui-typography';
+
+const Placeholder = ({ trls, selectFileButton }) => {
+    const { isMobile } = useBreakpoint();
+    const { title, titleMobile, subTitle } = trls;
+    return (jsxs(Fragment, { children: [jsx(Text, { typography: "label-2-regular", children: isMobile ? titleMobile || title : title }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: subTitle }), selectFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), selectFileButton] }))] }));
+};
+
+export { Placeholder };
+//# sourceMappingURL=Placeholder.js.map

package/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.js","sources":["../src/Placeholder.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { ButtonElement, UploadTrls } from '@hh.ru/magritte-ui-upload/types';\n\ninterface PlaceholderProps {\n    trls: UploadTrls;\n    selectFileButton?: ButtonElement;\n}\n\nconst Placeholder = ({ trls, selectFileButton }: PlaceholderProps): ReactElement => {\n    const { isMobile } = useBreakpoint();\n    const { title, titleMobile, subTitle } = trls;\n    return (\n        <>\n            <Text typography=\"label-2-regular\">{isMobile ? titleMobile || title : title}</Text>\n            <VSpacing default={6} />\n            <Text typography=\"label-4-regular\" style=\"secondary\">\n                {subTitle}\n            </Text>\n            {selectFileButton && (\n                <>\n                    <VSpacing default={16} />\n                    {selectFileButton}\n                </>\n            )}\n        </>\n    );\n};\n\nexport { Placeholder };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAYM,MAAA,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAoB,KAAkB;AAC/E,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;AAC9C,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAE,QAAA,EAAA,QAAQ,GAAG,WAAW,IAAI,KAAK,GAAG,KAAK,EAAQ,CAAA,EACnFA,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,CAAC,EAAI,CAAA,EACxBA,GAAC,CAAA,IAAI,EAAC,EAAA,UAAU,EAAC,iBAAiB,EAAC,KAAK,EAAC,WAAW,EAC/C,QAAA,EAAA,QAAQ,EACN,CAAA,EACN,gBAAgB,KACbF,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,QAAQ,EAAC,EAAA,OAAO,EAAE,EAAE,EAAI,CAAA,EACxB,gBAAgB,CAAA,EAAA,CAClB,CACN,CAAA,EAAA,CACF,EACL;AACN;;;;"}

package/SingleUpload.js

@@ -10,13 +10,15 @@ import { VSpacing } from '@hh.ru/magritte-ui-spacing';
 import { Text } from '@hh.ru/magritte-ui-typography';
 import { FileName } from './FileName.js';
 import { FileView } from './FileView.js';
+import { Placeholder } from './Placeholder.js';
 import { useDropActions } from './useDropActions.js';
 import { useDropButtons } from './useDropButtons.js';
 import { useFilePreview } from './useFilePreview.js';
 import { getAvaliableFileTypes, getUploadIcon, bytes2mb, DEFAULT_ACCEPT, RenderFileInfoDefault } from './utils.js';
-import { s as styles } from './upload-CR54iSr6.js';
+import { s as styles } from './upload-CJaTPbi8.js';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-divider';
+import '@hh.ru/magritte-ui-breakpoint';
 
 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 }) => {
     const bodyUploadRef = useRef(null);
@@ -72,7 +74,10 @@ const SingleUpload = ({ files, trls, size = 'medium', accept = DEFAULT_ACCEPT, s
                                             } }) })] })), isInvalid ? (jsx(ExclamationTriangleOutlinedSize32, { initial: "negative" })) : (getUploadIcon(uploadType, loadedFile, false)), jsx(VSpacing, { default: 16 }), loadedFile && (jsxs(Fragment, { children: [jsx(FileName, { file: loadedFile.data, isSizeMedium: true }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: renderFileInfo({
                                             ...loadedFile,
                                             fileSizeMB: bytes2mb(loadedFile.data.size),
-                                        }) }), !loadedFile.loading && !isImageType && deleteFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), deleteFileButton] })), !loadedFile.loading && isImageType && (replaceImageButton || deleteFileButton) && (jsxs("div", { className: styles.imageControls, children: [replaceImageButton, deleteFileButton] }))] })), !loadedFile && (jsxs(Fragment, { children: [jsx(Text, { typography: "label-2-regular", children: trls.title }), jsx(VSpacing, { default: 6 }), jsx(Text, { typography: "label-4-regular", style: "secondary", children: trls.subTitle }), selectFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), selectFileButton] }))] }))] }))] })] }));
+                                        }) }), !isLoading && (!isImageType || isInvalid) && deleteFileButton && (jsxs(Fragment, { children: [jsx(VSpacing, { default: 16 }), deleteFileButton] })), !isLoading &&
+                                        isImageType &&
+                                        !isInvalid &&
+                                        (replaceImageButton || deleteFileButton) && (jsxs("div", { className: styles.imageControls, children: [replaceImageButton, deleteFileButton] }))] })), !loadedFile && jsx(Placeholder, { trls: trls, selectFileButton: selectFileButton })] }))] })] }));
 };
 
 export { SingleUpload };

package/SingleUpload.js.map

@@ -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 { 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\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                                        initial=\"accent\"\n                                        onClick={(event) => {\n                                            onFileDelete(event, loadedFile, 0);\n                                        }}\n                                    />\n                                </div>\n                            </div>\n                        )}\n                        {isInvalid ? (\n                            <ExclamationTriangleOutlinedSize32 initial=\"negative\" />\n                        ) : (\n                            getUploadIcon(uploadType, loadedFile, false)\n                        )}\n                        <VSpacing default={16} />\n                        {loadedFile && (\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                                {!loadedFile.loading && !isImageType && deleteFileButton && (\n                                    <>\n                                        <VSpacing default={16} />\n                                        {deleteFileButton}\n                                    </>\n                                )}\n                                {!loadedFile.loading && isImageType && (replaceImageButton || deleteFileButton) && (\n                                    <div className={styles.imageControls}>\n                                        {replaceImageButton}\n                                        {deleteFileButton}\n                                    </div>\n                                )}\n                            </>\n                        )}\n                        {!loadedFile && (\n                            <>\n                                <Text typography=\"label-2-regular\">{trls.title}</Text>\n                                <VSpacing default={6} />\n                                <Text typography=\"label-4-regular\" style=\"secondary\">\n                                    {trls.subTitle}\n                                </Text>\n                                {selectFileButton && (\n                                    <>\n                                        <VSpacing default={16} />\n                                        {selectFileButton}\n                                    </>\n                                )}\n                            </>\n                        )}\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport { SingleUpload };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"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\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                                        initial=\"accent\"\n                                        onClick={(event) => {\n                                            onFileDelete(event, loadedFile, 0);\n                                        }}\n                                    />\n                                </div>\n                            </div>\n                        )}\n                        {isInvalid ? (\n                            <ExclamationTriangleOutlinedSize32 initial=\"negative\" />\n                        ) : (\n                            getUploadIcon(uploadType, loadedFile, false)\n                        )}\n                        <VSpacing default={16} />\n                        {loadedFile && (\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                                {!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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"}

package/Upload.js

@@ -5,7 +5,6 @@ import { SingleUpload } from './SingleUpload.js';
 import 'react-dropzone';
 import 'classnames';
 import '@hh.ru/magritte-ui-spacing';
-import '@hh.ru/magritte-ui-typography';
 import './FileViewWithPreview.js';
 import './FileView.js';
 import '@hh.ru/magritte-ui-action';
@@ -17,9 +16,12 @@ import './FileName.js';
 import './utils.js';
 import './useFilePreview.js';
 import 'react';
+import './Placeholder.js';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-typography';
 import './useDropActions.js';
 import './useDropButtons.js';
-import './upload-CR54iSr6.js';
+import './upload-CJaTPbi8.js';
 
 const Upload = ({ multiple, ...uploadProps }) => {
     if (multiple) {

package/Upload.js.map

@@ -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, ...uploadProps }: UploadProps): ReactElement => {\n    if (multiple) {\n        return <MultiUpload {...uploadProps} />;\n    }\n    return <SingleUpload {...uploadProps} />;\n};\n\nexport { Upload };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAMM,MAAA,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAe,KAAkB;IACvE,IAAI,QAAQ,EAAE;AACV,QAAA,OAAOA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,WAAW,GAAI,CAAC;KAC3C;AACD,IAAA,OAAOA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,WAAW,GAAI,CAAC;AAC7C;;;;"}
+{"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, ...uploadProps }: UploadProps): ReactElement => {\n    if (multiple) {\n        return <MultiUpload {...uploadProps} />;\n    }\n    return <SingleUpload {...uploadProps} />;\n};\n\nexport { Upload };\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMM,MAAA,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAe,KAAkB;IACvE,IAAI,QAAQ,EAAE;AACV,QAAA,OAAOA,GAAC,CAAA,WAAW,EAAK,EAAA,GAAA,WAAW,GAAI,CAAC;KAC3C;AACD,IAAA,OAAOA,GAAC,CAAA,YAAY,EAAK,EAAA,GAAA,WAAW,GAAI,CAAC;AAC7C;;;;"}

package/index.css

@@ -530,7 +530,7 @@
   --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
   --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
 }
-.magritte-file-name-body___PTTMc_3-0-1{
+.magritte-file-name-body___PTTMc_3-1-1{
   display:flex;
   width:100%;
   overflow:hidden;
@@ -543,10 +543,10 @@
   text-transform:var(--magritte-typography-label-2-regular-text-transform-v20-0-1);
   text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v20-0-1);
 }
-.magritte-file-name-body_medium___sfmmq_3-0-1{
+.magritte-file-name-body_medium___sfmmq_3-1-1{
   justify-content:center;
 }
-.magritte-file-name___ZSL2g_3-0-1{
+.magritte-file-name___ZSL2g_3-1-1{
   overflow:hidden;
   text-overflow:ellipsis;
 }
@@ -1085,18 +1085,18 @@
   --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
   --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
 }
-.magritte-file-info-body___HmfXd_3-0-1{
+.magritte-file-info-body___HmfXd_3-1-1{
   flex-grow:1;
 }
-.magritte-file-info-and-controls___61iyY_3-0-1{
+.magritte-file-info-and-controls___61iyY_3-1-1{
   display:flex;
   gap:var(--magritte-static-space-400-v20-0-1);
 }
-.magritte-file-info-container___WFab8_3-0-1{
+.magritte-file-info-container___WFab8_3-1-1{
   flex-grow:1;
   width:50px;
 }
-.magritte-file-info___HrqiB_3-0-1{
+.magritte-file-info___HrqiB_3-1-1{
   display:flex;
   gap:var(--magritte-static-space-100-v20-0-1);
   font-family:var(--magritte-typography-label-4-regular-font-family-v20-0-1);
@@ -1108,7 +1108,7 @@
   text-transform:var(--magritte-typography-label-4-regular-text-transform-v20-0-1);
   text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v20-0-1);
 }
-.magritte-controls___WdH7A_3-0-1{
+.magritte-controls___WdH7A_3-1-1{
   display:flex;
   align-items:center;
   margin-left:auto;
@@ -1648,7 +1648,7 @@
   --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
   --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
 }
-.magritte-item___vVDG-_3-0-1{
+.magritte-item___vVDG-_3-1-1{
   display:flex;
   width:100%;
   gap:var(--magritte-static-space-400-v20-0-1);
@@ -2205,57 +2205,57 @@
   --magritte-typography-_custom-5-italic-text-transform-v20-0-1:none;
   --magritte-typography-_custom-5-italic-text-decoration-v20-0-1:none;
 }
-.magritte-root___FV1tC_3-0-1{
+.magritte-root___FV1tC_3-1-1{
   position:relative;
   display:flex;
   overflow:hidden;
   border-radius:var(--magritte-static-border-radius-600-v20-0-1);
   background-color:var(--magritte-color-background-primary-v20-0-1);
 }
-.magritte-root___FV1tC_3-0-1:hover{
+.magritte-root___FV1tC_3-1-1:hover{
   cursor:pointer;
 }
-.magritte-root___FV1tC_3-0-1:hover .magritte-background___RfZ0U_3-0-1{
+.magritte-root___FV1tC_3-1-1:hover .magritte-background___RfZ0U_3-1-1{
   border-color:var(--magritte-color-stroke-accent-v20-0-1);
 }
-.magritte-root___FV1tC_3-0-1.magritte-drag-active___dihBL_3-0-1 .magritte-background___RfZ0U_3-0-1{
+.magritte-root___FV1tC_3-1-1.magritte-drag-active___dihBL_3-1-1 .magritte-background___RfZ0U_3-1-1{
   border-color:var(--magritte-color-stroke-accent-v20-0-1);
 }
-.magritte-root___FV1tC_3-0-1.focus-visible{
+.magritte-root___FV1tC_3-1-1.focus-visible{
   outline:var(--magritte-color-stroke-state-focused-accessible-v20-0-1) solid 4px;
 }
-.magritte-root___FV1tC_3-0-1.focus-visible .magritte-background___RfZ0U_3-0-1{
+.magritte-root___FV1tC_3-1-1.focus-visible .magritte-background___RfZ0U_3-1-1{
   border-color:var(--magritte-color-stroke-accent-v20-0-1);
 }
-.magritte-root___FV1tC_3-0-1.magritte-load___MghDA_3-0-1 .magritte-background___RfZ0U_3-0-1,
-.magritte-root___FV1tC_3-0-1.magritte-loading___9E3p-_3-0-1 .magritte-background___RfZ0U_3-0-1{
+.magritte-root___FV1tC_3-1-1.magritte-load___MghDA_3-1-1 .magritte-background___RfZ0U_3-1-1,
+.magritte-root___FV1tC_3-1-1.magritte-loading___9E3p-_3-1-1 .magritte-background___RfZ0U_3-1-1{
   border-style:solid;
   border-width:7px;
 }
-.magritte-root___FV1tC_3-0-1.magritte-invalid___Rt10-_3-0-1.focus-visible{
+.magritte-root___FV1tC_3-1-1.magritte-invalid___Rt10-_3-1-1.focus-visible{
   outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v20-0-1) solid 4px;
 }
-.magritte-root___FV1tC_3-0-1.magritte-invalid___Rt10-_3-0-1 .magritte-background___RfZ0U_3-0-1{
+.magritte-root___FV1tC_3-1-1.magritte-invalid___Rt10-_3-1-1 .magritte-background___RfZ0U_3-1-1{
   border-color:var(--magritte-color-stroke-neutral-v20-0-1);
 }
-.magritte-root_medium___67WJa_3-0-1{
+.magritte-root_medium___67WJa_3-1-1{
   justify-content:center;
   padding:var(--magritte-static-space-600-v20-0-1);
 }
-.magritte-root_medium___67WJa_3-0-1 .magritte-body___O7ROl_3-0-1{
+.magritte-root_medium___67WJa_3-1-1 .magritte-body___O7ROl_3-1-1{
   flex-direction:column;
   align-items:center;
   justify-content:center;
 }
-.magritte-root_small___dkUYq_3-0-1{
+.magritte-root_small___dkUYq_3-1-1{
   padding-top:var(--magritte-static-space-400-v20-0-1);
   padding-bottom:var(--magritte-static-space-400-v20-0-1);
   padding-left:var(--magritte-static-space-400-v20-0-1);
 }
-.magritte-root_small___dkUYq_3-0-1 .magritte-body___O7ROl_3-0-1{
+.magritte-root_small___dkUYq_3-1-1 .magritte-body___O7ROl_3-1-1{
   gap:var(--magritte-static-space-400-v20-0-1);
 }
-.magritte-background___RfZ0U_3-0-1{
+.magritte-background___RfZ0U_3-1-1{
   position:absolute;
   border-width:8px;
   border-style:dashed;
@@ -2268,15 +2268,15 @@
   background-position:center;
   background-size:100%;
 }
-.magritte-body___O7ROl_3-0-1{
+.magritte-body___O7ROl_3-1-1{
   display:flex;
   width:100%;
 }
-.magritte-loader___XYpWg_3-0-1{
+.magritte-loader___XYpWg_3-1-1{
   position:relative;
   display:flex;
 }
-.magritte-cancel___tQ-yX_3-0-1{
+.magritte-cancel___tQ-yX_3-1-1{
   position:absolute;
   top:0;
   left:0;
@@ -2286,20 +2286,20 @@
   align-items:center;
   justify-content:center;
 }
-.magritte-image-controls___vLf94_3-0-1{
+.magritte-image-controls___vLf94_3-1-1{
   display:flex;
   position:absolute;
   right:var(--magritte-static-space-300-v20-0-1);
   bottom:var(--magritte-static-space-300-v20-0-1);
   gap:var(--magritte-static-space-300-v20-0-1);
 }
-.magritte-small-controls___Qn9TP_3-0-1{
+.magritte-small-controls___Qn9TP_3-1-1{
   display:flex;
   align-items:center;
   margin-left:auto;
   margin-right:var(--magritte-static-space-500-v20-0-1);
 }
-.magritte-file-list___L9uHt_3-0-1{
+.magritte-file-list___L9uHt_3-1-1{
   margin-top:var(--magritte-static-space-300-v20-0-1);
   box-shadow:inset 0 0 0 1px var(--magritte-color-stroke-neutral-v20-0-1);
   border-radius:var(--magritte-static-border-radius-600-v20-0-1);

package/index.js

@@ -5,7 +5,6 @@ import './MultiUpload.js';
 import 'react-dropzone';
 import 'classnames';
 import '@hh.ru/magritte-ui-spacing';
-import '@hh.ru/magritte-ui-typography';
 import './FileViewWithPreview.js';
 import './FileView.js';
 import '@hh.ru/magritte-ui-action';
@@ -17,8 +16,11 @@ import './FileName.js';
 import './utils.js';
 import './useFilePreview.js';
 import 'react';
+import './Placeholder.js';
+import '@hh.ru/magritte-ui-breakpoint';
+import '@hh.ru/magritte-ui-typography';
 import './useDropActions.js';
 import './useDropButtons.js';
-import './upload-CR54iSr6.js';
+import './upload-CJaTPbi8.js';
 import './SingleUpload.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-upload",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -29,6 +29,7 @@
   "dependencies": {
     "@hh.ru/magritte-ui-action": "4.4.17",
     "@hh.ru/magritte-ui-avatar": "5.0.16",
+    "@hh.ru/magritte-ui-breakpoint": "4.1.0",
     "@hh.ru/magritte-ui-button": "5.2.9",
     "@hh.ru/magritte-ui-divider": "1.1.37",
     "@hh.ru/magritte-ui-icon": "7.9.6",
@@ -37,5 +38,5 @@
     "@hh.ru/magritte-ui-typography": "3.0.22",
     "react-dropzone": "14.3.5"
   },
-  "gitHead": "6791e06baab51c0635259c4f3733dac9a14cd99e"
+  "gitHead": "96dcc22eb0fbfc2914f3654638372be493c67fd8"
 }

package/types.d.ts

@@ -13,8 +13,9 @@ export type UploadType = 'application' | 'image' | 'video' | 'mixed';
 export type LoadedFileWithFileSize = LoadedFile & {
     fileSizeMB: string;
 };
-interface UploadTrls {
+export interface UploadTrls {
     title: ReactNode;
+    titleMobile?: ReactNode;
     subTitle: ReactNode;
 }
 export interface RenderFileInfo {

package/upload-CJaTPbi8.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"root":"magritte-root___FV1tC_3-1-1","background":"magritte-background___RfZ0U_3-1-1","drag-active":"magritte-drag-active___dihBL_3-1-1","dragActive":"magritte-drag-active___dihBL_3-1-1","load":"magritte-load___MghDA_3-1-1","loading":"magritte-loading___9E3p-_3-1-1","invalid":"magritte-invalid___Rt10-_3-1-1","root_medium":"magritte-root_medium___67WJa_3-1-1","rootMedium":"magritte-root_medium___67WJa_3-1-1","body":"magritte-body___O7ROl_3-1-1","root_small":"magritte-root_small___dkUYq_3-1-1","rootSmall":"magritte-root_small___dkUYq_3-1-1","loader":"magritte-loader___XYpWg_3-1-1","cancel":"magritte-cancel___tQ-yX_3-1-1","image-controls":"magritte-image-controls___vLf94_3-1-1","imageControls":"magritte-image-controls___vLf94_3-1-1","small-controls":"magritte-small-controls___Qn9TP_3-1-1","smallControls":"magritte-small-controls___Qn9TP_3-1-1","file-list":"magritte-file-list___L9uHt_3-1-1","fileList":"magritte-file-list___L9uHt_3-1-1"};
+
+export { styles as s };
+//# sourceMappingURL=upload-CJaTPbi8.js.map

package/upload-CJaTPbi8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-CJaTPbi8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/upload-CR54iSr6.js

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"root":"magritte-root___FV1tC_3-0-1","background":"magritte-background___RfZ0U_3-0-1","drag-active":"magritte-drag-active___dihBL_3-0-1","dragActive":"magritte-drag-active___dihBL_3-0-1","load":"magritte-load___MghDA_3-0-1","loading":"magritte-loading___9E3p-_3-0-1","invalid":"magritte-invalid___Rt10-_3-0-1","root_medium":"magritte-root_medium___67WJa_3-0-1","rootMedium":"magritte-root_medium___67WJa_3-0-1","body":"magritte-body___O7ROl_3-0-1","root_small":"magritte-root_small___dkUYq_3-0-1","rootSmall":"magritte-root_small___dkUYq_3-0-1","loader":"magritte-loader___XYpWg_3-0-1","cancel":"magritte-cancel___tQ-yX_3-0-1","image-controls":"magritte-image-controls___vLf94_3-0-1","imageControls":"magritte-image-controls___vLf94_3-0-1","small-controls":"magritte-small-controls___Qn9TP_3-0-1","smallControls":"magritte-small-controls___Qn9TP_3-0-1","file-list":"magritte-file-list___L9uHt_3-0-1","fileList":"magritte-file-list___L9uHt_3-0-1"};
-
-export { styles as s };
-//# sourceMappingURL=upload-CR54iSr6.js.map

package/upload-CR54iSr6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"upload-CR54iSr6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}