@astral/ui 4.1.6 → 4.1.7

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatFileSizeToView } from '@astral/utils';
 import { Typography } from '../../../Typography';
-import { Extensions, Image, Wrapper } from './styles';
+import { Extensions, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const HintPlaceholder = (props) => {
-    const { extensions, imageProps, maxFileSize, placeholder, className } = useLogic(props);
-    return (_jsxs(Wrapper, { className: className, children: [_jsx(Image, Object.assign({}, imageProps, { alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" })), _jsx(Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder || (_jsxs(_Fragment, { 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 })] })) })] }));
+    const { extensions, imageProps, maxFileSize, placeholder, className, RenderImage, } = useLogic(props);
+    return (_jsxs(Wrapper, { className: className, children: [_jsx(RenderImage, Object.assign({}, imageProps, { alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" })), _jsx(Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder || (_jsxs(_Fragment, { 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 })] })) })] }));
 };

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

@@ -7,6 +7,22 @@ export declare const Image: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const setDefaultImageStyles: {
+    <C extends import("react").ComponentClass<import("react").ComponentProps<C>, any>>(component: C): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C, import("react").ComponentProps<C>>, {}, {
+        ref?: import("react").Ref<InstanceType<C>> | undefined;
+    }>;
+    <C_1 extends import("react").ComponentType<import("react").ComponentProps<C_1>>>(component: C_1): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C_1, import("react").ComponentProps<C_1>>, {}, {}>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, JSX.IntrinsicElements[Tag], {}>;
+};
 export declare const Extensions: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -13,6 +13,7 @@ export const Image = styled.img `
 
   object-fit: contain;
 `;
+export const setDefaultImageStyles = Image.withComponent;
 export const Extensions = styled.span `
   text-transform: uppercase;
 `;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type UseLogicParams = {
     /**
      * Массив разрешенных расширений
@@ -27,6 +28,15 @@ export declare const useLogic: ({ accept, placeholderImgSrc, ...rest }: UseLogic
      */
     placeholder?: string | undefined;
     className?: string | undefined;
+    RenderImage: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}> | import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & Pick<import("react").AllHTMLAttributes<HTMLImageElement>, "height" | "width" | "className" | "alt" | "src"> & {
+        size?: import("../../../..").PlaceholderSize | undefined;
+    }, {}, {}>;
     extensions: string | undefined;
     imageProps: {
         src: string | undefined;

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

@@ -10,12 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { formatFileTypeToView } from '@astral/utils';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { ConfigContext, } from '../../../../ConfigProvider';
+import { Image, setDefaultImageStyles } from '../styles';
 export const useLogic = (_a) => {
+    var _b, _c;
     var { accept, placeholderImgSrc } = _a, rest = __rest(_a, ["accept", "placeholderImgSrc"]);
-    const { imagesMap } = useContext(ConfigContext);
+    const { imagesMap, components } = useContext(ConfigContext);
     const { uploadFileImgSrc } = imagesMap;
+    const configRenderImage = (_c = (_b = components === null || components === void 0 ? void 0 : components.placeholder) === null || _b === void 0 ? void 0 : _b.defaultProps) === null || _c === void 0 ? void 0 : _c.renderImage;
+    const RenderImage = useMemo(() => configRenderImage ? setDefaultImageStyles(configRenderImage) : Image, [configRenderImage]);
     const extensions = accept === null || accept === void 0 ? void 0 : accept.map(formatFileTypeToView).join(', ');
-    return Object.assign({ extensions, imageProps: { src: placeholderImgSrc || uploadFileImgSrc } }, rest);
+    return Object.assign({ RenderImage,
+        extensions, imageProps: { src: placeholderImgSrc || uploadFileImgSrc } }, rest);
 };

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

@@ -4,10 +4,10 @@ import { IconButton } from '../../../IconButton';
 import { Tooltip } from '../../../Tooltip';
 import { Typography } from '../../../Typography';
 import { previewFileUploaderClassnames } from '../../constants';
-import { Actions, Details, Image, StyledFileInfo, Wrapper } from './styles';
+import { Actions, Details, StyledFileInfo, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const FileError = (props) => {
-    const { isVisibleRetryButton, imageProps, deleteButtonProps, retryButtonProps, } = useLogic(props);
+    const { isVisibleRetryButton, imageProps, deleteButtonProps, retryButtonProps, RenderImage, } = useLogic(props);
     const { fileName, fileSize, errorMsg } = props;
-    return (_jsxs(Wrapper, { children: [_jsx(Image, Object.assign({}, 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, Object.assign({ variant: "light", color: "grey" }, retryButtonProps, { children: _jsx(RetryOutlineMd, {}) })) })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, Object.assign({ variant: "light", color: "grey" }, deleteButtonProps, { children: _jsx(CrossOutlineMd, {}) })) })] })] })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(RenderImage, Object.assign({}, 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, Object.assign({ variant: "light", color: "grey" }, retryButtonProps, { children: _jsx(RetryOutlineMd, {}) })) })), _jsx(Tooltip, { title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", disableInteractive: true, children: _jsx(IconButton, Object.assign({ variant: "light", color: "grey" }, deleteButtonProps, { children: _jsx(CrossOutlineMd, {}) })) })] })] })] }));
 };

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

@@ -7,6 +7,22 @@ export declare const Image: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const setDefaultImageStyles: {
+    <C extends import("react").ComponentClass<import("react").ComponentProps<C>, any>>(component: C): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C, import("react").ComponentProps<C>>, {}, {
+        ref?: import("react").Ref<InstanceType<C>> | undefined;
+    }>;
+    <C_1 extends import("react").ComponentType<import("react").ComponentProps<C_1>>>(component: C_1): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C_1, import("react").ComponentProps<C_1>>, {}, {}>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, JSX.IntrinsicElements[Tag], {}>;
+};
 export declare const Details: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -27,6 +27,7 @@ export const Image = styled.img `
 
   object-fit: contain;
 `;
+export const setDefaultImageStyles = Image.withComponent;
 export const Details = styled.div `
   position: absolute;
   inset: 0;

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

@@ -1,7 +1,17 @@
+/// <reference types="react" />
 import { type FileErrorProps } from '../FileError';
 export type UseLogicParams = FileErrorProps;
 export declare const useLogic: ({ fileId, file, isUploadError, onDelete, onRetry, }: UseLogicParams) => {
     isVisibleRetryButton: boolean;
+    RenderImage: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}> | import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & Pick<import("react").AllHTMLAttributes<HTMLImageElement>, "height" | "width" | "className" | "alt" | "src"> & {
+        size?: import("../../../..").PlaceholderSize | undefined;
+    }, {}, {}>;
     imageProps: {
         src: string | undefined;
     };

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

@@ -1,13 +1,18 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { ConfigContext, } from '../../../../ConfigProvider';
+import { Image, setDefaultImageStyles } from '../styles';
 export const useLogic = ({ fileId, file, isUploadError, onDelete, onRetry, }) => {
-    const { imagesMap } = useContext(ConfigContext);
+    var _a, _b;
+    const { imagesMap, components } = useContext(ConfigContext);
+    const configRenderImage = (_b = (_a = components === null || components === void 0 ? void 0 : components.placeholder) === null || _a === void 0 ? void 0 : _a.defaultProps) === null || _b === void 0 ? void 0 : _b.renderImage;
+    const RenderImage = useMemo(() => configRenderImage ? setDefaultImageStyles(configRenderImage) : Image, [configRenderImage]);
     const { errorFileImgSrc } = imagesMap;
     const isVisibleRetryButton = Boolean(isUploadError && onRetry);
     const handleDelete = () => onDelete(fileId);
     const handleRetry = () => onRetry === null || onRetry === void 0 ? void 0 : onRetry(fileId, file);
     return {
         isVisibleRetryButton,
+        RenderImage,
         imageProps: {
             src: errorFileImgSrc,
         },

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

@@ -7,7 +7,7 @@ const Typography_1 = require("../../../Typography");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const HintPlaceholder = (props) => {
-    const { extensions, imageProps, maxFileSize, placeholder, className } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(styles_1.Image, Object.assign({}, imageProps, { alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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, utils_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] })) })] }));
+    const { extensions, imageProps, maxFileSize, placeholder, className, RenderImage, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(RenderImage, Object.assign({}, imageProps, { alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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, utils_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] })) })] }));
 };
 exports.HintPlaceholder = HintPlaceholder;

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

@@ -7,6 +7,22 @@ export declare const Image: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const setDefaultImageStyles: {
+    <C extends import("react").ComponentClass<import("react").ComponentProps<C>, any>>(component: C): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C, import("react").ComponentProps<C>>, {}, {
+        ref?: import("react").Ref<InstanceType<C>> | undefined;
+    }>;
+    <C_1 extends import("react").ComponentType<import("react").ComponentProps<C_1>>>(component: C_1): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C_1, import("react").ComponentProps<C_1>>, {}, {}>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, JSX.IntrinsicElements[Tag], {}>;
+};
 export declare const Extensions: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Extensions = exports.Image = exports.Wrapper = void 0;
+exports.Extensions = exports.setDefaultImageStyles = exports.Image = exports.Wrapper = void 0;
 const styles_1 = require("../../../styles");
 exports.Wrapper = styles_1.styled.div `
   display: flex;
@@ -16,6 +16,7 @@ exports.Image = styles_1.styled.img `
 
   object-fit: contain;
 `;
+exports.setDefaultImageStyles = exports.Image.withComponent;
 exports.Extensions = styles_1.styled.span `
   text-transform: uppercase;
 `;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type UseLogicParams = {
     /**
      * Массив разрешенных расширений
@@ -27,6 +28,15 @@ export declare const useLogic: ({ accept, placeholderImgSrc, ...rest }: UseLogic
      */
     placeholder?: string | undefined;
     className?: string | undefined;
+    RenderImage: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}> | import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & Pick<import("react").AllHTMLAttributes<HTMLImageElement>, "height" | "width" | "className" | "alt" | "src"> & {
+        size?: import("../../../..").PlaceholderSize | undefined;
+    }, {}, {}>;
     extensions: string | undefined;
     imageProps: {
         src: string | undefined;

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

@@ -15,11 +15,16 @@ exports.useLogic = void 0;
 const utils_1 = require("@astral/utils");
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../../../ConfigProvider");
+const styles_1 = require("../styles");
 const useLogic = (_a) => {
+    var _b, _c;
     var { accept, placeholderImgSrc } = _a, rest = __rest(_a, ["accept", "placeholderImgSrc"]);
-    const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    const { imagesMap, components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { uploadFileImgSrc } = imagesMap;
+    const configRenderImage = (_c = (_b = components === null || components === void 0 ? void 0 : components.placeholder) === null || _b === void 0 ? void 0 : _b.defaultProps) === null || _c === void 0 ? void 0 : _c.renderImage;
+    const RenderImage = (0, react_1.useMemo)(() => configRenderImage ? (0, styles_1.setDefaultImageStyles)(configRenderImage) : styles_1.Image, [configRenderImage]);
     const extensions = accept === null || accept === void 0 ? void 0 : accept.map(utils_1.formatFileTypeToView).join(', ');
-    return Object.assign({ extensions, imageProps: { src: placeholderImgSrc || uploadFileImgSrc } }, rest);
+    return Object.assign({ RenderImage,
+        extensions, imageProps: { src: placeholderImgSrc || uploadFileImgSrc } }, rest);
 };
 exports.useLogic = useLogic;

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

@@ -10,8 +10,8 @@ const constants_1 = require("../../constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const FileError = (props) => {
-    const { isVisibleRetryButton, imageProps, deleteButtonProps, retryButtonProps, } = (0, useLogic_1.useLogic)(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)(styles_1.Image, Object.assign({}, 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, Object.assign({ variant: "light", color: "grey" }, retryButtonProps, { children: (0, jsx_runtime_1.jsx)(icons_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, Object.assign({ variant: "light", color: "grey" }, deleteButtonProps, { children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}) })) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(RenderImage, Object.assign({}, 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, Object.assign({ variant: "light", color: "grey" }, retryButtonProps, { children: (0, jsx_runtime_1.jsx)(icons_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, Object.assign({ variant: "light", color: "grey" }, deleteButtonProps, { children: (0, jsx_runtime_1.jsx)(icons_1.CrossOutlineMd, {}) })) })] })] })] }));
 };
 exports.FileError = FileError;

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

@@ -7,6 +7,22 @@ export declare const Image: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const setDefaultImageStyles: {
+    <C extends import("react").ComponentClass<import("react").ComponentProps<C>, any>>(component: C): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C, import("react").ComponentProps<C>>, {}, {
+        ref?: import("react").Ref<InstanceType<C>> | undefined;
+    }>;
+    <C_1 extends import("react").ComponentType<import("react").ComponentProps<C_1>>>(component: C_1): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & JSX.LibraryManagedAttributes<C_1, import("react").ComponentProps<C_1>>, {}, {}>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, JSX.IntrinsicElements[Tag], {}>;
+};
 export declare const Details: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Actions = exports.StyledFileInfo = exports.Details = exports.Image = exports.Wrapper = void 0;
+exports.Actions = exports.StyledFileInfo = exports.Details = exports.setDefaultImageStyles = exports.Image = exports.Wrapper = void 0;
 const styles_1 = require("../../../styles");
 const constants_1 = require("../../constants");
 const FileInfo_1 = require("../../FileInfo");
@@ -30,6 +30,7 @@ exports.Image = styles_1.styled.img `
 
   object-fit: contain;
 `;
+exports.setDefaultImageStyles = exports.Image.withComponent;
 exports.Details = styles_1.styled.div `
   position: absolute;
   inset: 0;

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

@@ -1,7 +1,17 @@
+/// <reference types="react" />
 import { type FileErrorProps } from '../FileError';
 export type UseLogicParams = FileErrorProps;
 export declare const useLogic: ({ fileId, file, isUploadError, onDelete, onRetry, }: UseLogicParams) => {
     isVisibleRetryButton: boolean;
+    RenderImage: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}> | import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & Pick<import("react").AllHTMLAttributes<HTMLImageElement>, "height" | "width" | "className" | "alt" | "src"> & {
+        size?: import("../../../..").PlaceholderSize | undefined;
+    }, {}, {}>;
     imageProps: {
         src: string | undefined;
     };

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

@@ -3,14 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../../../ConfigProvider");
+const styles_1 = require("../styles");
 const useLogic = ({ fileId, file, isUploadError, onDelete, onRetry, }) => {
-    const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    var _a, _b;
+    const { imagesMap, components } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    const configRenderImage = (_b = (_a = components === null || components === void 0 ? void 0 : components.placeholder) === null || _a === void 0 ? void 0 : _a.defaultProps) === null || _b === void 0 ? void 0 : _b.renderImage;
+    const RenderImage = (0, react_1.useMemo)(() => configRenderImage ? (0, styles_1.setDefaultImageStyles)(configRenderImage) : styles_1.Image, [configRenderImage]);
     const { errorFileImgSrc } = imagesMap;
     const isVisibleRetryButton = Boolean(isUploadError && onRetry);
     const handleDelete = () => onDelete(fileId);
     const handleRetry = () => onRetry === null || onRetry === void 0 ? void 0 : onRetry(fileId, file);
     return {
         isVisibleRetryButton,
+        RenderImage,
         imageProps: {
             src: errorFileImgSrc,
         },

package/package.json

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