@astral/ui 4.96.0 → 4.98.0

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

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

@@ -23,34 +23,60 @@ exports.Wrapper = styled_1.styled.div `
   }
 `;
 exports.Details = styled_1.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;
+  }
 `;
 exports.StyledFileInfo = (0, styled_1.styled)(FileInfo_1.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};
+  }
 `;
 exports.Actions = styled_1.styled.div `
   display: flex;

package/node/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/node/components/fileUploading/PreviewFileUploaderFile/FilePreview/useLogic/useLogic.js

@@ -1,13 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
+const react_1 = require("react");
+const BinOutlineMd_1 = require("../../../../../icons/BinOutlineMd");
+const DownloadOutlineMd_1 = require("../../../../../icons/DownloadOutlineMd");
+const EyeOutlineMd_1 = require("../../../../../icons/EyeOutlineMd");
 const ErrorService_1 = require("../../../../services/ErrorService");
+const useViewportType_1 = require("../../../../useViewportType");
 const constants_1 = require("../../../constants");
 const useGenerateLocalFileURL_1 = require("../../../hooks/useGenerateLocalFileURL");
 const MimeTypeRegistry_1 = require("../../../services/MimeTypeRegistry");
 const generateAttrLinkNewTab_1 = require("../../../utils/generateAttrLinkNewTab");
-const useLogic = ({ fileId, file, fileUrl, generateDownloadLink, onDelete, onView, fileType, }) => {
+const useLogic = ({ fileId, file, fileUrl, fileName, generateDownloadLink, onDelete, onView, fileType, isDeletingFile, }) => {
     const { generateUrl } = (0, useGenerateLocalFileURL_1.useGenerateLocalFileURL)();
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const isPdfFile = MimeTypeRegistry_1.MimeTypeRegistry.getInstance()
         .getExtensionsByMimeType((file?.type || fileType))
         ?.includes('pdf') || false;
@@ -53,20 +59,66 @@ const useLogic = ({ fileId, file, fileUrl, generateDownloadLink, onDelete, onVie
             },
         };
     };
+    const getViewActionsList = () => {
+        return isOtherFile
+            ? []
+            : [
+                {
+                    type: 'iconButton',
+                    tooltip: 'Посмотреть',
+                    variant: 'light',
+                    color: 'grey',
+                    icon: (0, react_1.createElement)(EyeOutlineMd_1.EyeOutlineMd),
+                    ...getPropsViewButton(),
+                },
+            ];
+    };
+    const getActionsList = () => {
+        if (isMobile) {
+            return [
+                {
+                    type: isOtherFile ? 'button' : 'iconButton',
+                    tooltip: 'Удалить',
+                    title: 'Удалить',
+                    variant: 'light',
+                    color: 'grey',
+                    icon: (0, react_1.createElement)(BinOutlineMd_1.BinOutlineMd),
+                    loading: isDeletingFile,
+                    onClick: handleDelete,
+                },
+            ];
+        }
+        return [
+            ...getViewActionsList(),
+            {
+                type: 'iconButton',
+                tooltip: 'Скачать',
+                component: 'a',
+                variant: 'light',
+                color: 'grey',
+                icon: (0, react_1.createElement)(DownloadOutlineMd_1.DownloadOutlineMd),
+                download: fileName,
+                href: downloadLink,
+            },
+            {
+                type: 'iconButton',
+                tooltip: 'Удалить',
+                variant: 'light',
+                color: 'grey',
+                icon: (0, react_1.createElement)(BinOutlineMd_1.BinOutlineMd),
+                loading: isDeletingFile,
+                onClick: handleDelete,
+            },
+        ];
+    };
     return {
-        deleteButtonProps: {
-            onClick: handleDelete,
-        },
-        downloadButtonProps: {
-            href: downloadLink,
-        },
-        viewButtonProps: getPropsViewButton(),
         isImageFile,
         isPdfFile,
         /**
          * Формат файла отличающийся от pdf и изображения
          */
         isOtherFile,
+        getActionsList,
     };
 };
 exports.useLogic = useLogic;

package/node/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/node/components/theme/palette/componentsColors/linkColors/linkColors.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.96.0",
+  "version": "4.98.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {