@astral/ui 4.96.0 → 4.98.0

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/useLogic/useLogic.d.ts

@@ -1,26 +1,61 @@
 /// <reference types="react" />
 import { type FilePreviewProps } from '../FilePreview';
 type UseLogicParams = FilePreviewProps;
-export declare const useLogic: ({ fileId, file, fileUrl, generateDownloadLink, onDelete, onView, fileType, }: UseLogicParams) => {
-    deleteButtonProps: {
+export declare const useLogic: ({ fileId, file, fileUrl, fileName, generateDownloadLink, onDelete, onView, fileType, isDeletingFile, }: UseLogicParams) => {
+    isImageFile: boolean;
+    isPdfFile: boolean;
+    /**
+     * Формат файла отличающийся от pdf и изображения
+     */
+    isOtherFile: boolean;
+    getActionsList: () => {
+        type: string;
+        tooltip: string;
+        title: string;
+        variant: "light";
+        color: "grey";
+        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
+        loading: boolean | undefined;
         onClick: () => void;
-    };
-    downloadButtonProps: {
-        href: string;
-    };
-    viewButtonProps: {
+    }[] | ({
         component: import("react").ElementType;
         href: string;
         target: string;
         rel: string;
+        type: string;
+        tooltip: string;
+        variant: "light";
+        color: "grey";
+        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
     } | {
         onClick: () => void | undefined;
-    };
-    isImageFile: boolean;
-    isPdfFile: boolean;
-    /**
-     * Формат файла отличающийся от pdf и изображения
-     */
-    isOtherFile: boolean;
+        type: string;
+        tooltip: string;
+        variant: "light";
+        color: "grey";
+        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
+    } | {
+        type: string;
+        tooltip: string;
+        component: "a";
+        variant: "light";
+        color: "grey";
+        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
+        download: string;
+        href: string;
+        loading?: undefined;
+        onClick?: undefined;
+    } | {
+        type: string;
+        tooltip: string;
+        variant: "light";
+        color: "grey";
+        icon: import("react").FunctionComponentElement<import("../../../..").SvgIconProps>;
+        loading: boolean | undefined;
+        onClick: () => void;
+        component?: undefined;
+        download?: undefined;
+        href?: undefined;
+    })[];
 };
 export {};

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/components/theme/palette/componentsColors/linkColors/linkColors.d.ts

@@ -3,5 +3,10 @@ export type LinkColors = {
     hover: string;
     visited: string;
     active: string;
+    contrast: {
+        main: string;
+        hover: string;
+        visited: string;
+    };
 };
 export declare const linkColors: LinkColors;

package/components/theme/palette/componentsColors/linkColors/linkColors.js

@@ -3,4 +3,9 @@ export const linkColors = {
     hover: '#268FF9',
     visited: '#762376',
     active: '#072D57',
+    contrast: {
+        main: '#6EB3F8',
+        hover: '#499CEF',
+        visited: '#C084FC',
+    },
 };

package/node/components/Link/Link.d.ts

@@ -16,6 +16,10 @@ export type LinkProps = Pick<WithoutEmotionSpecific<MuiLinkProps>, 'rel' | 'href
      * добавляет значение атрибуту 'download' тега 'a'
      */
     downloadFilename?: string;
+    /**
+     * Позволяет переключить цвета ссылки на более контрастные
+     */
+    isContrast?: boolean;
 };
 export declare const Link: import("react").ForwardRefExoticComponent<Pick<WithoutEmotionSpecific<MuiLinkProps>, "classes" | "className" | "style" | "rel" | "children" | "target" | "href" | "key"> & {
     /**
@@ -32,4 +36,8 @@ export declare const Link: import("react").ForwardRefExoticComponent<Pick<Withou
      * добавляет значение атрибуту 'download' тега 'a'
      */
     downloadFilename?: string | undefined;
+    /**
+     * Позволяет переключить цвета ссылки на более контрастные
+     */
+    isContrast?: boolean | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/node/components/Link/Link.js

@@ -5,8 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DownloadVOutlineSm_1 = require("../../icons/DownloadVOutlineSm");
 const OpenLinkOutlineSm_1 = require("../../icons/OpenLinkOutlineSm");
+const cn_1 = require("../utils/cn");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-exports.Link = (0, react_1.forwardRef)(({ withAdornment, isDownload, downloadFilename, children, ...props }, ref) => {
+const linkCva = (0, cva_1.cva)(constants_1.linkClassnames.root, {
+    variants: {
+        isContrast: {
+            true: constants_1.linkClassnames.isContrast,
+        },
+    },
+});
+exports.Link = (0, react_1.forwardRef)(({ withAdornment, isDownload, downloadFilename, isContrast, children, className, ...props }, ref) => {
     const icon = isDownload ? (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {}) : (0, jsx_runtime_1.jsx)(OpenLinkOutlineSm_1.OpenLinkOutlineSm, {});
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledLink, { download: downloadFilename ?? isDownload, ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledLink, { download: downloadFilename ?? isDownload, className: (0, cn_1.cn)(linkCva({ isContrast }), className), ref: ref, ...props, children: [withAdornment === 'start' && icon, children, withAdornment === 'end' && icon, !withAdornment && isDownload && (0, jsx_runtime_1.jsx)(DownloadVOutlineSm_1.DownloadVOutlineSm, {})] }));
 });

package/node/components/Link/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const linkClassnames: {
+    root: string;
+    isContrast: string;
+};

package/node/components/Link/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linkClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.linkClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('link'),
+    isContrast: (0, createUIKitClassname_1.createUIKitClassname)('link__contrast-color'),
+};

package/node/components/Link/index.d.ts

@@ -1 +1,2 @@
 export { Link, type LinkProps } from './Link';
+export { linkClassnames } from './constants';

package/node/components/Link/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
+exports.linkClassnames = exports.Link = void 0;
 var Link_1 = require("./Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "linkClassnames", { enumerable: true, get: function () { return constants_1.linkClassnames; } });

package/node/components/Link/public.d.ts

@@ -1 +1,2 @@
+export { linkClassnames } from './constants';
 export { Link, type LinkProps } from './Link';

package/node/components/Link/public.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
+exports.Link = exports.linkClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "linkClassnames", { enumerable: true, get: function () { return constants_1.linkClassnames; } });
 var Link_1 = require("./Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });

package/node/components/Link/styles.js

@@ -7,6 +7,7 @@ exports.StyledLink = void 0;
 const Link_1 = __importDefault(require("@mui/material/Link"));
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
@@ -30,6 +31,22 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
     text-decoration: underline;
   }
 
+  &.${constants_1.linkClassnames.isContrast} {
+    color: ${({ theme }) => theme.palette.components.link.contrast.main};
+
+    &:visited {
+      color: ${({ theme }) => theme.palette.components.link.contrast.visited};
+    }
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    }
+
+    &:active {
+      color: ${({ theme }) => theme.palette.components.link.active};
+    }
+  }
+
   &:focus-visible {
     border-radius: ${({ theme }) => theme.shape.medium};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};

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;