@astral/ui 4.97.0 → 4.98.0

package/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/components/fileUploading/FileInfo/FileInfo.js

@@ -1,6 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatFileSizeToView } from '@astral/utils/file/formatFileSizeToView';
+import { cva } from '../../utils/cva';
+import { fileSizeClassnames } from './constants';
 import { DotIcon, FileSize, StyledFilename, Wrapper } from './styles';
-export const FileInfo = ({ className, fileName, fileSize }) => {
-    return (_jsxs(Wrapper, { className: className, children: [_jsx(StyledFilename, { children: fileName }), fileSize && (_jsxs(FileSize, { children: [_jsx(DotIcon, {}), formatFileSizeToView(fileSize)] }))] }));
+const fileSizeCva = cva(fileSizeClassnames.fileSize, {
+    variants: {
+        isLoading: {
+            true: fileSizeClassnames.isLoading,
+        },
+    },
+});
+export const FileInfo = ({ className, fileName, fileSize, isLoading, }) => {
+    return (_jsxs(Wrapper, { className: className, children: [_jsx(StyledFilename, { children: fileName }), _jsxs(FileSize, { className: fileSizeCva({ isLoading }), children: [_jsx(DotIcon, {}), formatFileSizeToView(fileSize)] })] }));
 };

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

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

package/components/fileUploading/FileInfo/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const fileSizeClassnames = {
+    isLoading: createUIKitClassname('file-info_loading'),
+    fileSize: createUIKitClassname('file-info_file_size'),
+};

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

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

package/components/fileUploading/FileInfo/index.js

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

package/components/fileUploading/FileInfo/styles.js

@@ -2,12 +2,17 @@ import { DotOutlineSm } from '../../../icons/DotOutlineSm';
 import { Filename } from '../../Filename';
 import { styled } from '../../styled';
 import { Typography } from '../../Typography';
+import { fileSizeClassnames } from './constants';
 export const Wrapper = styled.div `
   overflow: hidden;
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
 
   width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-direction: column;
+  }
 `;
 export const StyledFilename = styled(Filename) `
   overflow: hidden;
@@ -18,8 +23,22 @@ export const FileSize = styled(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]};
+
+    &.${fileSizeClassnames.isLoading} {
+      display: none;
+    }
+  }
 `;
 export const DotIcon = styled(DotOutlineSm) `
   width: 16px;
   height: 16px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;

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

@@ -6,4 +6,8 @@ export const Wrapper = 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/components/fileUploading/FileUploaderDropzone/DropzoneWrapper/styles.js

@@ -23,4 +23,7 @@ export const Wrapper = 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/components/fileUploading/FileUploaderDropzone/FileUploaderContainer/FileUploaderContainer.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileUploaderLabel } from '../../FileUploaderLabel';
 import { HelperText } from '../../HelperText';
-export const FileUploaderContainer = ({ className, label, children, isError, helperText, }) => (_jsxs("div", { className: className, children: [label && _jsx(FileUploaderLabel, { children: label }), children, isError && _jsx(HelperText, { isError: isError, children: helperText })] }));
+import { Wrapper } from './styles';
+export const FileUploaderContainer = ({ className, label, children, isError, helperText, }) => (_jsxs(Wrapper, { className: className, children: [label && _jsx(FileUploaderLabel, { children: label }), children, isError && _jsx(HelperText, { isError: isError, children: helperText })] }));

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../../styled").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/components/fileUploading/FileUploaderDropzone/FileUploaderContainer/styles.js

@@ -0,0 +1,6 @@
+import { styled } from '../../../styled';
+export const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatFileSizeToView } from '@astral/utils/file/formatFileSizeToView';
 import { Typography } from '../../../Typography';
 import { declensionFile } from '../../utils/declensionFile';
-import { Extensions } from './styles';
+import { Extensions, MobileWrapper } from './styles';
 import { useLogic } from './useLogic';
 export const HintPlaceholder = (props) => {
     const { extensions, className, isMultiple, maxFileCount, maxFileSize, placeholder, } = useLogic(props);
@@ -13,7 +13,7 @@ export const HintPlaceholder = (props) => {
         return placeholder;
     }
     if (isMultiple) {
-        return (_jsxs(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, ' ', declensionFile(maxFileCount), " \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));
+        return (_jsxs(Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: [_jsx(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, " ", declensionFile(maxFileCount), " \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));
     }
-    return (_jsxs(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", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));
+    return (_jsxs(Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: [_jsx(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", _jsx(MobileWrapper, { children: "\u043E\u043C" }), " \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));
 };

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

@@ -3,3 +3,7 @@ export declare const Extensions: import("../../../styled").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>, {}>;
+export declare const MobileWrapper: import("../../../styled").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/components/fileUploading/FileUploaderDropzone/HintPlaceholder/styles.js

@@ -2,3 +2,8 @@ import { styled } from '../../../styled';
 export const Extensions = styled.span `
   text-transform: uppercase;
 `;
+export const MobileWrapper = styled.span `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BinOutlineMd } from '../../../../icons/BinOutlineMd';
 import { CrossOutlineMd } from '../../../../icons/CrossOutlineMd';
 import { DownloadOutlineMd } from '../../../../icons/DownloadOutlineMd';
@@ -6,10 +6,12 @@ import { EyeOutlineMd } from '../../../../icons/EyeOutlineMd';
 import { RetryOutlineMd } from '../../../../icons/RetryOutlineMd';
 import { IconButton } from '../../../IconButton';
 import { Tooltip } from '../../../Tooltip';
+import { useViewportType } from '../../../useViewportType';
 import { Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const Actions = (props) => {
     const { downloadButtonProps, viewButtonProps, isVisibleAbortButton, isVisibleRetryButton, handleAbort, handleDelete, handleRetry, isLoading, isError, isDeletingFile, fileName, } = useLogic(props);
+    const { isMobile } = useViewportType();
     if (isLoading) {
         return (_jsx(Wrapper, { children: isVisibleAbortButton && (_jsx(Tooltip, { title: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: _jsx(IconButton, { variant: "text", onClick: handleAbort, children: _jsx(CrossOutlineMd, {}) }) })) }));
     }
@@ -17,5 +19,5 @@ export const Actions = (props) => {
         return (_jsxs(Wrapper, { children: [isVisibleRetryButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", children: _jsx(IconButton, { variant: "text", onClick: handleRetry, children: _jsx(RetryOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: _jsx(IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: _jsx(CrossOutlineMd, {}) }) })] }));
     }
     const { isShowViewButton, ...restViewButtonProps } = viewButtonProps;
-    return (_jsxs(Wrapper, { children: [isShowViewButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: _jsx(IconButton, { variant: "text", ...restViewButtonProps, children: _jsx(EyeOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: _jsx(IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: _jsx(DownloadOutlineMd, {}) }) }), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: _jsx(IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: _jsx(BinOutlineMd, {}) }) })] }));
+    return (_jsxs(Wrapper, { children: [!isMobile && (_jsxs(_Fragment, { children: [isShowViewButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", children: _jsx(IconButton, { variant: "text", ...restViewButtonProps, children: _jsx(EyeOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: _jsx(IconButton, { component: "a", variant: "text", download: fileName, ...downloadButtonProps, children: _jsx(DownloadOutlineMd, {}) }) })] })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", children: _jsx(IconButton, { variant: "text", onClick: handleDelete, loading: isDeletingFile, children: _jsx(BinOutlineMd, {}) }) })] }));
 };

package/components/fileUploading/FileUploaderFile/FileUploaderFile.js

@@ -9,5 +9,5 @@ export const FileUploaderFile = (props) => {
     const { id, name, file, url, size, status, ...actions } = props;
     const { isLoading, isUploadError, isRestrictionError, errorMsg, progress } = status || {};
     const isError = isUploadError || isRestrictionError;
-    return (_jsx(Grow, { in: true, children: _jsxs(Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [_jsxs(Content, { children: [_jsx(FileInfo, { fileName: name, fileSize: size }), isLoading && _jsx(Progress, { progress: progress }), isError && (_jsx(Typography, { variant: "caption", color: "error", children: errorMsg }))] }), _jsx(Actions, { fileId: id, file: file, fileName: name, fileUrl: url, isLoading: isLoading, isError: isError, isUploadError: isUploadError, ...actions })] }) }));
+    return (_jsx(Grow, { in: true, children: _jsxs(Wrapper, { "$isLoading": isLoading, "$isError": isError, children: [_jsxs(Content, { children: [_jsx(FileInfo, { fileName: name, fileSize: size, isLoading: isLoading }), isLoading && _jsx(Progress, { progress: progress }), isError && (_jsx(Typography, { variant: "caption", color: "error", children: errorMsg }))] }), _jsx(Actions, { fileId: id, file: file, fileName: name, fileUrl: url, isLoading: isLoading, isError: isError, isUploadError: isUploadError, ...actions })] }) }));
 };

package/components/fileUploading/FileUploaderFile/styles.js

@@ -21,6 +21,13 @@ export const Wrapper = 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/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/HintPlaceholder.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatFileSizeToView } from '@astral/utils/file/formatFileSizeToView';
 import { Typography } from '../../../Typography';
-import { Extensions, Wrapper } from './styles';
+import { Extensions, MobileWrapper, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const HintPlaceholder = (props) => {
     const { extensions, imageProps, maxFileSize, placeholder, className, RenderImage, } = useLogic(props);
     const renderPlaceholder = () => {
         if (!placeholder) {
-            return (_jsxs(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", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));
+            return (_jsxs(Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: [_jsx(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", _jsx(MobileWrapper, { children: "\u043E\u043C" }), " \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));
         }
         if (typeof placeholder === 'string') {
             return (_jsx(Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder }));

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

@@ -27,3 +27,7 @@ export declare const Extensions: import("../../../styled").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>, {}>;
+export declare const MobileWrapper: import("../../../styled").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/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/styles.js

@@ -17,3 +17,8 @@ export const setDefaultImageStyles = Image.withComponent;
 export const Extensions = styled.span `
   text-transform: uppercase;
 `;
+export const MobileWrapper = styled.span `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

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

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

@@ -5,10 +5,10 @@ import { IconButton } from '../../../IconButton';
 import { Tooltip } from '../../../Tooltip';
 import { Typography } from '../../../Typography';
 import { previewFileUploaderClassnames } from '../../constants';
-import { Actions, Details, StyledFileInfo, Wrapper } from './styles';
+import { Actions, ButtonMobile, Details, StyledFileInfo, Temp, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const FileError = (props) => {
     const { isVisibleRetryButton, imageProps, deleteButtonProps, retryButtonProps, RenderImage, } = useLogic(props);
     const { fileName, fileSize, errorMsg } = props;
-    return (_jsxs(Wrapper, { children: [_jsx(RenderImage, { ...imageProps, alt: "\u041D\u0435\u0432\u0430\u043B\u0438\u0434\u043D\u044B\u0439 \u0444\u0430\u0439\u043B" }), _jsx(Typography, { variant: "caption", color: "error", children: errorMsg }), _jsxs(Details, { className: previewFileUploaderClassnames.details, children: [_jsx(StyledFileInfo, { fileName: fileName, fileSize: fileSize }), _jsxs(Actions, { children: [isVisibleRetryButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...retryButtonProps, children: _jsx(RetryOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...deleteButtonProps, children: _jsx(CrossOutlineMd, {}) }) })] })] })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(RenderImage, { ...imageProps, alt: "\u041D\u0435\u0432\u0430\u043B\u0438\u0434\u043D\u044B\u0439 \u0444\u0430\u0439\u043B" }), _jsx(Temp, { children: _jsx(Typography, { variant: "caption", color: "error", children: errorMsg }) }), _jsx(ButtonMobile, { ...deleteButtonProps, color: "error", children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" }), _jsxs(Details, { className: previewFileUploaderClassnames.details, children: [_jsx(StyledFileInfo, { fileName: fileName, fileSize: fileSize }), _jsxs(Actions, { children: [isVisibleRetryButton && (_jsx(Tooltip, { title: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...retryButtonProps, children: _jsx(RetryOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...deleteButtonProps, children: _jsx(CrossOutlineMd, {}) }) })] })] })] }));
 };

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

@@ -3,6 +3,20 @@ export declare const Wrapper: import("../../../styled").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 ButtonMobile: import("../../../styled").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("../../../styled").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("../../../styled").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("../../../styled").StyledComponent<{
     className?: string | undefined;
     fileName: string;
     fileSize?: number | undefined;
+    isLoading?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -1,3 +1,4 @@
+import { Button } from '../../../Button';
 import { styled } from '../../../styled';
 import { previewFileUploaderClassnames } from '../../constants';
 import { FileInfo } from '../../FileInfo';
@@ -6,19 +7,31 @@ export const Wrapper = 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 {
-    .${previewFileUploaderClassnames.details} {
-      visibility: visible;
-      opacity: 1;
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    &:hover {
+      .${previewFileUploaderClassnames.details} {
+        visibility: visible;
+        opacity: 1;
+      }
     }
   }
 `;
+export const ButtonMobile = styled(Button) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;
+export const Temp = styled.div `
+  text-align: center;
+`;
 export const Image = styled.img `
   display: block;
 

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

@@ -7,5 +7,5 @@ import { Content, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const FileLoading = (props) => {
     const { abortButtonProps, fileName, fileSize, progress } = useLogic(props);
-    return (_jsxs(Wrapper, { children: [_jsx(Typography, { variant: "h5", children: "\u0418\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430..." }), _jsxs(Content, { children: [_jsx(FileInfo, { fileName: fileName, fileSize: fileSize }), _jsx(Progress, { progress: progress })] }), _jsx(Button, { variant: "light", color: "grey", ...abortButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443" })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(Typography, { variant: "h5", children: "\u0418\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430..." }), _jsxs(Content, { children: [_jsx(FileInfo, { fileName: fileName, fileSize: fileSize, isLoading: true }), _jsx(Progress, { progress: progress })] }), _jsx(Button, { variant: "light", color: "grey", ...abortButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0443" })] }));
 };

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

@@ -1,19 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { BinOutlineMd } from '../../../../icons/BinOutlineMd';
-import { DownloadOutlineMd } from '../../../../icons/DownloadOutlineMd';
-import { EyeOutlineMd } from '../../../../icons/EyeOutlineMd';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../../Button';
 import { IconButton } from '../../../IconButton';
 import { Tooltip } from '../../../Tooltip';
 import { Typography } from '../../../Typography';
-import { useViewportType } from '../../../useViewportType';
 import { previewFileUploaderClassnames } from '../../constants';
 import { Preview } from './Preview';
 import { Actions, Details, StyledFileInfo, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const FilePreview = (props) => {
-    const { viewButtonProps, downloadButtonProps, deleteButtonProps, isImageFile, isPdfFile, isOtherFile, } = useLogic(props);
-    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, isDeletingFile, } = props;
-    const { isMobile } = useViewportType();
-    return (_jsxs(Wrapper, { children: [_jsx(Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer }), _jsxs(Details, { className: previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && _jsx(Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), _jsx(StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), _jsx(Actions, { children: isMobile && isOtherFile ? (_jsx(Button, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" })) : (_jsxs(_Fragment, { children: [!isOtherFile && (_jsx(Tooltip, { title: "\u041F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", ...viewButtonProps, children: _jsx(EyeOutlineMd, {}) }) })), _jsx(Tooltip, { title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { component: "a", variant: "light", color: "grey", download: fileName, ...downloadButtonProps, children: _jsx(DownloadOutlineMd, {}) }) }), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, { variant: "light", color: "grey", loading: isDeletingFile, ...deleteButtonProps, children: _jsx(BinOutlineMd, {}) }) })] })) })] })] }));
+    const { getActionsList, isImageFile, isPdfFile, isOtherFile } = useLogic(props);
+    const { file, fileName, fileSize, fileUrl, generateDownloadLink, isHidePersonalData, PdfViewer, } = props;
+    return (_jsxs(Wrapper, { children: [!isOtherFile && (_jsx(Preview, { isImageFile: isImageFile, isPdfFile: isPdfFile, file: file, fileUrl: fileUrl, generateDownloadLink: generateDownloadLink, isHidePersonalData: isHidePersonalData, PdfViewer: PdfViewer })), _jsxs(Details, { className: previewFileUploaderClassnames.details, "$isOtherFile": isOtherFile, children: [isOtherFile && _jsx(Typography, { variant: "h6", children: "\u0424\u0430\u0439\u043B \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D" }), _jsx(StyledFileInfo, { "$isOtherFile": isOtherFile, fileName: fileName, fileSize: fileSize }), _jsx(Actions, { children: getActionsList().map(({ type, ...action }) => (_jsx(Tooltip, { title: action.tooltip, disableInteractive: true, children: type === 'iconButton' ? (_jsx(IconButton, { ...action, children: action.icon })) : (_jsx(Button, { ...action, children: 'title' in action ? action.title : '' })) }, action.tooltip))) })] })] }));
 };

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

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

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

@@ -20,34 +20,60 @@ export const Wrapper = styled.div `
   }
 `;
 export const Details = styled.div `
-  position: absolute;
-  inset: 0;
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    position: absolute;
+    inset: 0;
 
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme, $isOtherFile }) => (!$isOtherFile ? theme.spacing(4) : 0)};
-  align-items: center;
-  justify-content: center;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: ${({ theme, $isOtherFile }) => (!$isOtherFile ? theme.spacing(4) : 0)};
+    align-items: center;
+    justify-content: center;
 
-  padding: ${({ theme }) => theme.spacing(4)};
+    padding: ${({ theme }) => theme.spacing(4)};
 
-  visibility: ${({ $isOtherFile }) => ($isOtherFile ? 'visible' : 'hidden')};
-  opacity: ${({ $isOtherFile }) => ($isOtherFile ? 1 : 0)};
-  background-color: ${({ theme, $isOtherFile }) => !$isOtherFile ? theme.palette.background.modalShadow : 'none'};
+    visibility: ${({ $isOtherFile }) => ($isOtherFile ? 'visible' : 'hidden')};
+    opacity: ${({ $isOtherFile }) => ($isOtherFile ? 1 : 0)};
+    background-color: ${({ theme, $isOtherFile }) => !$isOtherFile ? theme.palette.background.modalShadow : 'none'};
 
-  transition: ${({ theme }) => {
+    transition: ${({ theme }) => {
     return theme.transitions.create(['opacity', 'visibility'], {
         duration: theme.transitions.duration.standard,
     });
 }};
+  }
+
+  ${({ theme, $isOtherFile }) => !$isOtherFile && theme.breakpoints.down('sm')} {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    overflow: hidden;
+
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    visibility: visible;
+    opacity: 1;
+  }
+
+  ${({ theme, $isOtherFile }) => $isOtherFile && theme.breakpoints.down('sm')} {
+    text-align: center;
+  }
 `;
 export const StyledFileInfo = styled(FileInfo) `
+  align-items: center;
   justify-content: center;
 
   margin: ${({ theme, $isOtherFile }) => $isOtherFile ? theme.spacing(6, 0, 11) : 0};
 
   color: ${({ theme, $isOtherFile }) => !$isOtherFile ? theme.palette.primary.contrastText : 'none'};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: ${({ $isOtherFile }) => !$isOtherFile && 'none'};
+
+    margin: ${({ theme, $isOtherFile }) => $isOtherFile ? theme.spacing(6, 0, 8) : 0};
+  }
 `;
 export const Actions = styled.div `
   display: flex;

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 {};