@astral/ui 4.97.0 → 4.99.0

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/useLogic/useLogic.js

@@ -1,10 +1,16 @@
+import { createElement } from 'react';
+import { BinOutlineMd } from '../../../../../icons/BinOutlineMd';
+import { DownloadOutlineMd } from '../../../../../icons/DownloadOutlineMd';
+import { EyeOutlineMd } from '../../../../../icons/EyeOutlineMd';
 import { ErrorService } from '../../../../services/ErrorService';
+import { useViewportType } from '../../../../useViewportType';
 import { EXTENSIONS_IN_NEW_TAB, VIEW_NEW_TAB_ERROR_MESSAGE, } from '../../../constants';
 import { useGenerateLocalFileURL } from '../../../hooks/useGenerateLocalFileURL';
 import { MimeTypeRegistry } from '../../../services/MimeTypeRegistry';
 import { generateAttrLinkNewTab } from '../../../utils/generateAttrLinkNewTab';
-export const useLogic = ({ fileId, file, fileUrl, generateDownloadLink, onDelete, onView, fileType, }) => {
+export const useLogic = ({ fileId, file, fileUrl, fileName, generateDownloadLink, onDelete, onView, fileType, isDeletingFile, }) => {
     const { generateUrl } = useGenerateLocalFileURL();
+    const { isMobile } = useViewportType();
     const isPdfFile = MimeTypeRegistry.getInstance()
         .getExtensionsByMimeType((file?.type || fileType))
         ?.includes('pdf') || false;
@@ -50,19 +56,65 @@ export const useLogic = ({ fileId, file, fileUrl, generateDownloadLink, onDelete
             },
         };
     };
+    const getViewActionsList = () => {
+        return isOtherFile
+            ? []
+            : [
+                {
+                    type: 'iconButton',
+                    tooltip: 'Посмотреть',
+                    variant: 'light',
+                    color: 'grey',
+                    icon: createElement(EyeOutlineMd),
+                    ...getPropsViewButton(),
+                },
+            ];
+    };
+    const getActionsList = () => {
+        if (isMobile) {
+            return [
+                {
+                    type: isOtherFile ? 'button' : 'iconButton',
+                    tooltip: 'Удалить',
+                    title: 'Удалить',
+                    variant: 'light',
+                    color: 'grey',
+                    icon: createElement(BinOutlineMd),
+                    loading: isDeletingFile,
+                    onClick: handleDelete,
+                },
+            ];
+        }
+        return [
+            ...getViewActionsList(),
+            {
+                type: 'iconButton',
+                tooltip: 'Скачать',
+                component: 'a',
+                variant: 'light',
+                color: 'grey',
+                icon: createElement(DownloadOutlineMd),
+                download: fileName,
+                href: downloadLink,
+            },
+            {
+                type: 'iconButton',
+                tooltip: 'Удалить',
+                variant: 'light',
+                color: 'grey',
+                icon: createElement(BinOutlineMd),
+                loading: isDeletingFile,
+                onClick: handleDelete,
+            },
+        ];
+    };
     return {
-        deleteButtonProps: {
-            onClick: handleDelete,
-        },
-        downloadButtonProps: {
-            href: downloadLink,
-        },
-        viewButtonProps: getPropsViewButton(),
         isImageFile,
         isPdfFile,
         /**
          * Формат файла отличающийся от pdf и изображения
          */
         isOtherFile,
+        getActionsList,
     };
 };

package/icons/CarOutlineMd/CarOutlineMd.d.ts

@@ -0,0 +1,3 @@
+import type { FunctionComponent } from 'react';
+import { type SvgIconProps } from '../../components/SvgIcon';
+export declare const CarOutlineMd: FunctionComponent<SvgIconProps>;

package/icons/CarOutlineMd/CarOutlineMd.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '../../components/SvgIcon';
+export const CarOutlineMd = ({ ...props }) => (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M20.15 7.621c.663 0 1.261.398 1.52 1.008l1.197 2.834c.086.203.13.422.13.643v4.262a1.65 1.65 0 0 1-1.65 1.65h-.166a2.994 2.994 0 0 1-2.913 2.307l-.154-.004a3 3 0 0 1-2.761-2.303H8.978a2.994 2.994 0 0 1-2.913 2.307l-.154-.004a2.995 2.995 0 0 1-2.761-2.303H1.684a.65.65 0 0 1 0-1.3h1.45a2.996 2.996 0 0 1 2.93-2.382l.154.004a2.996 2.996 0 0 1 2.778 2.378h6.34a3 3 0 0 1 2.932-2.382l.153.004a2.996 2.996 0 0 1 2.778 2.378h.148a.35.35 0 0 0 .35-.35v-4.262a.4.4 0 0 0-.028-.137l-1.197-2.834a.35.35 0 0 0-.322-.213h-3.092a.65.65 0 0 1 0-1.3zM6.065 15.636a1.695 1.695 0 1 0 0 3.389 1.695 1.695 0 0 0 0-3.39m12.203 0a1.696 1.696 0 1 0 0 3.388 1.696 1.696 0 0 0 0-3.388M13.45 3.675c.911 0 1.65.739 1.65 1.65v8.23c0 .912-.74 1.65-1.65 1.65h-3.226a.65.65 0 1 1 0-1.3h3.226a.35.35 0 0 0 .35-.35v-8.23a.35.35 0 0 0-.35-.35H2.653a.35.35 0 0 0-.35.35v9.23a.65.65 0 0 1-1.3 0v-9.23c0-.911.739-1.65 1.65-1.65z" }) }));

package/icons/CarOutlineMd/index.d.ts

@@ -0,0 +1 @@
+export { CarOutlineMd } from './public';

package/icons/CarOutlineMd/index.js

@@ -0,0 +1 @@
+export { CarOutlineMd } from './public';

package/icons/CarOutlineMd/public.d.ts

@@ -0,0 +1 @@
+export { CarOutlineMd } from './CarOutlineMd';

package/icons/CarOutlineMd/public.js

@@ -0,0 +1 @@
+export { CarOutlineMd } from './CarOutlineMd';

package/icons/index.d.ts

@@ -233,6 +233,7 @@ export { UserArrowDownOutlineMd } from './UserArrowDownOutlineMd';
 export { UserArrowUpOutlineMd } from './UserArrowUpOutlineMd';
 export { UserCheckOutlineMd } from './UserCheckOutlineMd';
 export { UserCrossOutlineMd } from './UserCrossOutlineMd';
+export { CarOutlineMd } from './CarOutlineMd';
 export { AddOutlineSm } from './AddOutlineSm';
 export { AddSmOutlineSm } from './AddSmOutlineSm';
 export { ArrowDwnOutlineSm } from './ArrowDwnOutlineSm';

package/icons/index.js

@@ -233,6 +233,7 @@ export { UserArrowDownOutlineMd } from './UserArrowDownOutlineMd';
 export { UserArrowUpOutlineMd } from './UserArrowUpOutlineMd';
 export { UserCheckOutlineMd } from './UserCheckOutlineMd';
 export { UserCrossOutlineMd } from './UserCrossOutlineMd';
+export { CarOutlineMd } from './CarOutlineMd';
 export { AddOutlineSm } from './AddOutlineSm';
 export { AddSmOutlineSm } from './AddSmOutlineSm';
 export { ArrowDwnOutlineSm } from './ArrowDwnOutlineSm';

package/node/components/fileUploading/FileInfo/FileInfo.d.ts

@@ -11,6 +11,10 @@ type FileInfoProps = {
      * Размер файла в байтах
      */
     fileSize?: number;
+    /**
+     * Флаг загрузки файла
+     */
+    isLoading?: boolean;
 };
-export declare const FileInfo: ({ className, fileName, fileSize }: FileInfoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileInfo: ({ className, fileName, fileSize, isLoading, }: FileInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/fileUploading/FileInfo/FileInfo.js

@@ -3,8 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formatFileSizeToView_1 = require("@astral/utils/file/formatFileSizeToView");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-const FileInfo = ({ className, fileName, fileSize }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledFilename, { children: fileName }), fileSize && ((0, jsx_runtime_1.jsxs)(styles_1.FileSize, { children: [(0, jsx_runtime_1.jsx)(styles_1.DotIcon, {}), (0, formatFileSizeToView_1.formatFileSizeToView)(fileSize)] }))] }));
+const fileSizeCva = (0, cva_1.cva)(constants_1.fileSizeClassnames.fileSize, {
+    variants: {
+        isLoading: {
+            true: constants_1.fileSizeClassnames.isLoading,
+        },
+    },
+});
+const FileInfo = ({ className, fileName, fileSize, isLoading, }) => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledFilename, { children: fileName }), (0, jsx_runtime_1.jsxs)(styles_1.FileSize, { className: fileSizeCva({ isLoading }), children: [(0, jsx_runtime_1.jsx)(styles_1.DotIcon, {}), (0, formatFileSizeToView_1.formatFileSizeToView)(fileSize)] })] }));
 };
 exports.FileInfo = FileInfo;

package/node/components/fileUploading/FileInfo/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const fileSizeClassnames: {
+    isLoading: string;
+    fileSize: string;
+};

package/node/components/fileUploading/FileInfo/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileSizeClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.fileSizeClassnames = {
+    isLoading: (0, createUIKitClassname_1.createUIKitClassname)('file-info_loading'),
+    fileSize: (0, createUIKitClassname_1.createUIKitClassname)('file-info_file_size'),
+};

package/node/components/fileUploading/FileInfo/index.d.ts

@@ -1 +1,2 @@
 export * from './FileInfo';
+export { fileSizeClassnames } from './constants';

package/node/components/fileUploading/FileInfo/index.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileSizeClassnames = void 0;
 __exportStar(require("./FileInfo"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "fileSizeClassnames", { enumerable: true, get: function () { return constants_1.fileSizeClassnames; } });

package/node/components/fileUploading/FileInfo/styles.js

@@ -5,12 +5,17 @@ const DotOutlineSm_1 = require("../../../icons/DotOutlineSm");
 const Filename_1 = require("../../Filename");
 const styled_1 = require("../../styled");
 const Typography_1 = require("../../Typography");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   overflow: hidden;
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
 
   width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-direction: column;
+  }
 `;
 exports.StyledFilename = (0, styled_1.styled)(Filename_1.Filename) `
   overflow: hidden;
@@ -21,8 +26,22 @@ exports.FileSize = (0, styled_1.styled)(Typography_1.Typography) `
   align-items: center;
 
   white-space: nowrap;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    font-size: ${({ theme }) => theme.typography.caption.fontSize};
+    line-height: ${({ theme }) => theme.typography.caption.lineHeight};
+    color: ${({ theme }) => theme.palette.grey[600]};
+
+    &.${constants_1.fileSizeClassnames.isLoading} {
+      display: none;
+    }
+  }
 `;
 exports.DotIcon = (0, styled_1.styled)(DotOutlineSm_1.DotOutlineSm) `
   width: 16px;
   height: 16px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;

package/node/components/fileUploading/FileUploader/FIleList/styles.js

@@ -9,4 +9,8 @@ exports.Wrapper = (0, styled_1.styled)('ul') `
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
   margin-bottom: ${({ theme, $isMultiple }) => $isMultiple ? theme.spacing(5) : 0};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-bottom: ${({ theme, $isMultiple }) => $isMultiple ? theme.spacing(4) : 0};
+  }
 `;

package/node/components/fileUploading/FileUploaderDropzone/DropzoneWrapper/styles.js

@@ -26,4 +26,7 @@ exports.Wrapper = styled_1.styled.div `
   transition: ${({ theme }) => theme.transitions.create(['background', 'border'], {
     duration: theme.transitions.duration.short,
 })};
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(5, 4)};
+  }
 `;

package/node/components/fileUploading/FileUploaderDropzone/FileUploaderContainer/FileUploaderContainer.js

@@ -4,5 +4,6 @@ exports.FileUploaderContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FileUploaderLabel_1 = require("../../FileUploaderLabel");
 const HelperText_1 = require("../../HelperText");
-const FileUploaderContainer = ({ className, label, children, isError, helperText, }) => ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && (0, jsx_runtime_1.jsx)(FileUploaderLabel_1.FileUploaderLabel, { children: label }), children, isError && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { isError: isError, children: helperText })] }));
+const styles_1 = require("./styles");
+const FileUploaderContainer = ({ className, label, children, isError, helperText, }) => ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [label && (0, jsx_runtime_1.jsx)(FileUploaderLabel_1.FileUploaderLabel, { children: label }), children, isError && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { isError: isError, children: helperText })] }));
 exports.FileUploaderContainer = FileUploaderContainer;

package/node/components/fileUploading/FileUploaderDropzone/FileUploaderContainer/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/fileUploading/FileUploaderDropzone/FileUploaderContainer/styles.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;

package/node/components/fileUploading/FileUploaderDropzone/HintPlaceholder/HintPlaceholder.js

@@ -16,8 +16,8 @@ const HintPlaceholder = (props) => {
         return placeholder;
     }
     if (isMultiple) {
-        return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: ["\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B. \u041D\u0435 \u0431\u043E\u043B\u0435\u0435 ", maxFileCount, ' ', (0, declensionFile_1.declensionFile)(maxFileCount), " \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));
+        return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: [(0, jsx_runtime_1.jsx)(styles_1.MobileWrapper, { children: "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B. " }), "\u041D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', maxFileCount, " ", (0, declensionFile_1.declensionFile)(maxFileCount), " \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: ["\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B. \u0420\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));
+    return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: [(0, jsx_runtime_1.jsx)(styles_1.MobileWrapper, { children: "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B. " }), "\u0420\u0430\u0437\u043C\u0435\u0440", (0, jsx_runtime_1.jsx)(styles_1.MobileWrapper, { children: "\u043E\u043C" }), " \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));
 };
 exports.HintPlaceholder = HintPlaceholder;

package/node/components/fileUploading/FileUploaderDropzone/HintPlaceholder/styles.d.ts

@@ -3,3 +3,7 @@ export declare const Extensions: import("@emotion/styled/dist/declarations/src/t
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const MobileWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/node/components/fileUploading/FileUploaderDropzone/HintPlaceholder/styles.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Extensions = void 0;
+exports.MobileWrapper = exports.Extensions = void 0;
 const styled_1 = require("../../../styled");
 exports.Extensions = styled_1.styled.span `
   text-transform: uppercase;
 `;
+exports.MobileWrapper = styled_1.styled.span `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/fileUploading/FileUploaderFile/Actions/Actions.js

@@ -9,10 +9,12 @@ const EyeOutlineMd_1 = require("../../../../icons/EyeOutlineMd");
 const RetryOutlineMd_1 = require("../../../../icons/RetryOutlineMd");
 const IconButton_1 = require("../../../IconButton");
 const Tooltip_1 = require("../../../Tooltip");
+const useViewportType_1 = require("../../../useViewportType");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Actions = (props) => {
     const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, fileName, } = (0, useLogic_1.useLogic)(props);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: isVisibleAbortButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleAbort, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }) })) }));
     }
@@ -20,6 +22,6 @@ const Actions = (props) => {
         return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [isVisibleRetryButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleRetry, children: (0, jsx_runtime_1.jsx)(RetryOutlineMd_1.RetryOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }) })] }));
     }
     const { isShowViewButton, ...restViewButtonProps } = viewButtonProps;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [isShowViewButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", ...restViewButtonProps, children: (0, jsx_runtime_1.jsx)(EyeOutlineMd_1.EyeOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: (0, jsx_runtime_1.jsx)(DownloadOutlineMd_1.DownloadOutlineMd, {}) }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [!isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isShowViewButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", ...restViewButtonProps, children: (0, jsx_runtime_1.jsx)(EyeOutlineMd_1.EyeOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: (0, jsx_runtime_1.jsx)(DownloadOutlineMd_1.DownloadOutlineMd, {}) }) })] })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] }));
 };
 exports.Actions = Actions;

package/node/components/fileUploading/FileUploaderFile/FileUploaderFile.js

@@ -12,6 +12,6 @@ const FileUploaderFile = (props) => {
     const { id, name, file, url, size, status, ...actions } = props;
     const { isLoading, isUploadError, isRestrictionError, errorMsg, progress } = status || {};
     const isError = isUploadError || isRestrictionError;
-    return ((0, jsx_runtime_1.jsx)(Grow_1.Grow, { in: true, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [(0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [(0, jsx_runtime_1.jsx)(FileInfo_1.FileInfo, { fileName: name, fileSize: size }), isLoading && (0, jsx_runtime_1.jsx)(Progress_1.Progress, { progress: progress }), isError && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error", children: errorMsg }))] }), (0, jsx_runtime_1.jsx)(Actions_1.Actions, { fileId: id, file: file, fileName: name, fileUrl: url, isLoading: isLoading, isError: isError, isUploadError: isUploadError, ...actions })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Grow_1.Grow, { in: true, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [(0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [(0, jsx_runtime_1.jsx)(FileInfo_1.FileInfo, { fileName: name, fileSize: size, isLoading: isLoading }), isLoading && (0, jsx_runtime_1.jsx)(Progress_1.Progress, { progress: progress }), isError && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error", children: errorMsg }))] }), (0, jsx_runtime_1.jsx)(Actions_1.Actions, { fileId: id, file: file, fileName: name, fileUrl: url, isLoading: isLoading, isError: isError, isUploadError: isUploadError, ...actions })] }) }));
 };
 exports.FileUploaderFile = FileUploaderFile;

package/node/components/fileUploading/FileUploaderFile/styles.js

@@ -24,6 +24,13 @@ exports.Wrapper = (0, styled_1.styled)('div', {
 
   border: ${({ theme, $isLoading, $isError }) => `1px solid ${getBorderColor(theme, $isLoading, $isError)}`};
   border-radius: ${({ theme }) => theme.shape.medium};
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: ${({ $isLoading }) => ($isLoading ? '1fr 32px' : '1fr auto')};
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    padding: ${({ theme }) => theme.spacing(3, 3, 3, 4)};
+  }
 
   &:not(:last-of-type) {
     margin-bottom: ${({ theme }) => theme.spacing(2)};

package/node/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/HintPlaceholder.js

@@ -10,7 +10,7 @@ const HintPlaceholder = (props) => {
     const { extensions, imageProps, maxFileSize, placeholder, className, RenderImage, } = (0, useLogic_1.useLogic)(props);
     const renderPlaceholder = () => {
         if (!placeholder) {
-            return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: ["\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B. \u0420\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));
+            return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: [(0, jsx_runtime_1.jsx)(styles_1.MobileWrapper, { children: "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B. " }), "\u0420\u0430\u0437\u043C\u0435\u0440", (0, jsx_runtime_1.jsx)(styles_1.MobileWrapper, { children: "\u043E\u043C" }), " \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));
         }
         if (typeof placeholder === 'string') {
             return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder }));

package/node/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/styles.d.ts

@@ -27,3 +27,7 @@ export declare const Extensions: import("@emotion/styled/dist/declarations/src/t
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const MobileWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/node/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Extensions = exports.setDefaultImageStyles = exports.Image = exports.Wrapper = void 0;
+exports.MobileWrapper = exports.Extensions = exports.setDefaultImageStyles = exports.Image = exports.Wrapper = void 0;
 const styled_1 = require("../../../styled");
 exports.Wrapper = styled_1.styled.div `
   display: flex;
@@ -20,3 +20,8 @@ exports.setDefaultImageStyles = exports.Image.withComponent;
 exports.Extensions = styled_1.styled.span `
   text-transform: uppercase;
 `;
+exports.MobileWrapper = styled_1.styled.span `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/fileUploading/PreviewFileUploaderDropZone/PlaceholderWrapper/styles.js

@@ -10,4 +10,8 @@ exports.Wrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(4)};
 
   text-align: center;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(5, 8)};
+  }
 `;

package/node/components/fileUploading/PreviewFileUploaderFile/FileError/FileError.js

@@ -13,6 +13,6 @@ const useLogic_1 = require("./useLogic");
 const FileError = (props) => {
     const { isVisibleRetryButton, imageProps, deleteButtonProps, retryButtonProps, RenderImage, } = (0, useLogic_1.useLogic)(props);
     const { fileName, fileSize, errorMsg } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(RenderImage, { ...imageProps, alt: "\u041D\u0435\u0432\u0430\u043B\u0438\u0434\u043D\u044B\u0439 \u0444\u0430\u0439\u043B" }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error", children: errorMsg }), (0, jsx_runtime_1.jsxs)(styles_1.Details, { className: constants_1.previewFileUploaderClassnames.details, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledFileInfo, { fileName: fileName, fileSize: fileSize }), (0, jsx_runtime_1.jsxs)(styles_1.Actions, { children: [isVisibleRetryButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...retryButtonProps, children: (0, jsx_runtime_1.jsx)(RetryOutlineMd_1.RetryOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...deleteButtonProps, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(RenderImage, { ...imageProps, alt: "\u041D\u0435\u0432\u0430\u043B\u0438\u0434\u043D\u044B\u0439 \u0444\u0430\u0439\u043B" }), (0, jsx_runtime_1.jsx)(styles_1.Temp, { children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error", children: errorMsg }) }), (0, jsx_runtime_1.jsx)(styles_1.ButtonMobile, { ...deleteButtonProps, color: "error", children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" }), (0, jsx_runtime_1.jsxs)(styles_1.Details, { className: constants_1.previewFileUploaderClassnames.details, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledFileInfo, { fileName: fileName, fileSize: fileSize }), (0, jsx_runtime_1.jsxs)(styles_1.Actions, { children: [isVisibleRetryButton && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...retryButtonProps, children: (0, jsx_runtime_1.jsx)(RetryOutlineMd_1.RetryOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...deleteButtonProps, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }) })] })] })] }));
 };
 exports.FileError = FileError;

package/node/components/fileUploading/PreviewFileUploaderFile/FileError/styles.d.ts

@@ -3,6 +3,20 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonMobile: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const Temp: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Image: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -31,6 +45,7 @@ export declare const StyledFileInfo: import("@emotion/styled/dist/declarations/s
     className?: string | undefined;
     fileName: string;
     fileSize?: number | undefined;
+    isLoading?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/fileUploading/PreviewFileUploaderFile/FileError/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Actions = exports.StyledFileInfo = exports.Details = exports.setDefaultImageStyles = exports.Image = exports.Wrapper = void 0;
+exports.Actions = exports.StyledFileInfo = exports.Details = exports.setDefaultImageStyles = exports.Image = exports.Temp = exports.ButtonMobile = exports.Wrapper = void 0;
+const Button_1 = require("../../../Button");
 const styled_1 = require("../../../styled");
 const constants_1 = require("../../constants");
 const FileInfo_1 = require("../../FileInfo");
@@ -9,19 +10,31 @@ exports.Wrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  gap: ${({ theme }) => theme.spacing(4)};
   align-items: center;
   justify-content: center;
 
   width: 100%;
+  height: 1000px;
   padding: ${({ theme }) => theme.spacing(4)};
 
-  &:hover {
-    .${constants_1.previewFileUploaderClassnames.details} {
-      visibility: visible;
-      opacity: 1;
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &:hover {
+      .${constants_1.previewFileUploaderClassnames.details} {
+        visibility: visible;
+        opacity: 1;
+      }
     }
   }
 `;
+exports.ButtonMobile = (0, styled_1.styled)(Button_1.Button) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;
+exports.Temp = styled_1.styled.div `
+  text-align: center;
+`;
 exports.Image = styled_1.styled.img `
   display: block;
 

package/node/components/fileUploading/PreviewFileUploaderFile/FileLoading/FileLoading.js

@@ -10,6 +10,6 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const FileLoading = (props) => {
     const { abortButtonProps, fileName, fileSize, progress } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h5", children: "\u0418\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430..." }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [(0, jsx_runtime_1.jsx)(FileInfo_1.FileInfo, { fileName: fileName, fileSize: fileSize }), (0, jsx_runtime_1.jsx)(Progress_1.Progress, { progress: progress })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", color: "grey", ...abortButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443" })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h5", children: "\u0418\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430..." }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { children: [(0, jsx_runtime_1.jsx)(FileInfo_1.FileInfo, { fileName: fileName, fileSize: fileSize, isLoading: true }), (0, jsx_runtime_1.jsx)(Progress_1.Progress, { progress: progress })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", color: "grey", ...abortButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443" })] }));
 };
 exports.FileLoading = FileLoading;

package/node/components/fileUploading/PreviewFileUploaderFile/FilePreview/FilePreview.js

@@ -2,22 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const BinOutlineMd_1 = require("../../../../icons/BinOutlineMd");
-const DownloadOutlineMd_1 = require("../../../../icons/DownloadOutlineMd");
-const EyeOutlineMd_1 = require("../../../../icons/EyeOutlineMd");
 const Button_1 = require("../../../Button");
 const IconButton_1 = require("../../../IconButton");
 const Tooltip_1 = require("../../../Tooltip");
 const Typography_1 = require("../../../Typography");
-const useViewportType_1 = require("../../../useViewportType");
 const constants_1 = require("../../constants");
 const Preview_1 = require("./Preview");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const FilePreview = (props) => {
-    const { viewButtonProps, downloadButtonProps, deleteButtonProps, isImageFile, isPdfFile, isOtherFile, } = (0, useLogic_1.useLogic)(props);
-    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, isDeletingFile, } = props;
-    const { isMobile } = (0, useViewportType_1.useViewportType)();
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Preview_1.Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer }), (0, jsx_runtime_1.jsxs)(styles_1.Details, { className: constants_1.previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), (0, jsx_runtime_1.jsx)(styles_1.StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), (0, jsx_runtime_1.jsx)(styles_1.Actions, { children: isMobile && isOtherFile ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isOtherFile && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", ...viewButtonProps, children: (0, jsx_runtime_1.jsx)(EyeOutlineMd_1.EyeOutlineMd, {}) }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { component: "a", variant: "light", color: "grey", download: fileName, ...downloadButtonProps, children: (0, jsx_runtime_1.jsx)(DownloadOutlineMd_1.DownloadOutlineMd, {}) }) }), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: (0, jsx_runtime_1.jsx)(BinOutlineMd_1.BinOutlineMd, {}) }) })] })) })] })] }));
+    const { getActionsList, isImageFile, isPdfFile, isOtherFile } = (0, useLogic_1.useLogic)(props);
+    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, } = props;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [!isOtherFile && ((0, jsx_runtime_1.jsx)(Preview_1.Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer })), (0, jsx_runtime_1.jsxs)(styles_1.Details, { className: constants_1.previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), (0, jsx_runtime_1.jsx)(styles_1.StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), (0, jsx_runtime_1.jsx)(styles_1.Actions, { children: getActionsList().map(({ type, ...action }) => ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: action.tooltip, disableInteractive: true, children: type === 'iconButton' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...action, children: action.icon })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...action, children: 'title' in action ? action.title : '' })) }, action.tooltip))) })] })] }));
 };
 exports.FilePreview = FilePreview;

package/node/components/fileUploading/PreviewFileUploaderFile/FilePreview/styles.d.ts

@@ -13,6 +13,7 @@ export declare const StyledFileInfo: import("@emotion/styled/dist/declarations/s
     className?: string | undefined;
     fileName: string;
     fileSize?: number | undefined;
+    isLoading?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {