@astral/ui 4.1.6 → 4.2.0

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/components/index.d.ts

@@ -116,7 +116,7 @@ export { type ImageProps as PlaceholderImageProps, LoadingPlaceholder, Placehold
 export { radioClassnames, Radio, type RadioProps } from './Radio';
 export { RadioCard, type RadioCardProps, radioCardClassnames, } from './RadioCard';
 export { RadioField, type RadioFieldProps } from './RadioField';
-export { RadioGroup, type RadioGroupProps } from './RadioGroup';
+export { RadioGroup, type RadioGroupProps, RadioGroupContext, } from './RadioGroup';
 export * from './RadioGroupField';
 export { ScrollToTopButton, type ScrollToTopButtonProps, } from './ScrollToTopButton';
 export { SearchField, type SearchFieldProps } from './SearchField';

package/components/index.js

@@ -116,7 +116,7 @@ export { LoadingPlaceholder, Placeholder, } from './placeholders';
 export { radioClassnames, Radio } from './Radio';
 export { RadioCard, radioCardClassnames, } from './RadioCard';
 export { RadioField } from './RadioField';
-export { RadioGroup } from './RadioGroup';
+export { RadioGroup, RadioGroupContext, } from './RadioGroup';
 export * from './RadioGroupField';
 export { ScrollToTopButton, } from './ScrollToTopButton';
 export { SearchField } from './SearchField';

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/node/components/index.d.ts

@@ -116,7 +116,7 @@ export { type ImageProps as PlaceholderImageProps, LoadingPlaceholder, Placehold
 export { radioClassnames, Radio, type RadioProps } from './Radio';
 export { RadioCard, type RadioCardProps, radioCardClassnames, } from './RadioCard';
 export { RadioField, type RadioFieldProps } from './RadioField';
-export { RadioGroup, type RadioGroupProps } from './RadioGroup';
+export { RadioGroup, type RadioGroupProps, RadioGroupContext, } from './RadioGroup';
 export * from './RadioGroupField';
 export { ScrollToTopButton, type ScrollToTopButtonProps, } from './ScrollToTopButton';
 export { SearchField, type SearchFieldProps } from './SearchField';

package/node/components/index.js

@@ -15,8 +15,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFileUploader = exports.PreviewFileUploaderFile = exports.PreviewFileUploaderDropZone = exports.PreviewFileUploader = exports.FileUploaderFile = exports.FileUploaderDropzone = exports.FileUploader = exports.Filename = exports.Fieldset = exports.Grow = exports.Slide = exports.Zoom = exports.Fade = exports.expansionPanelClassnames = exports.ExpansionPanel = exports.EmailOrPhoneField = exports.EmailField = exports.DescriptionList = exports.DescriptionCell = exports.datePickerClassnames = exports.DatePicker = exports.DataGridMinimalisticPagination = exports.DataGridActionCell = exports.SidebarContext = exports.SidebarSkeleton = exports.DashboardContext = exports.SidebarPopover = exports.SidebarCounter = exports.SidebarButton = exports.MenuSidebarButton = exports.DashboardLayout = exports.DashboardAlert = exports.Counter = exports.CopyTypography = exports.ConfirmAction = exports.ComplianceStatus = exports.CodeField = exports.BulletListItem = exports.BulletListInlineItem = exports.BulletList = exports.Breadcrumbs = exports.AvatarGroup = exports.Avatar = exports.AutoSaveIndicator = exports.AsyncAutocomplete = exports.Alert = exports.alertClassnames = exports.AddressAutocomplete = exports.useMainActions = exports.ActionGroup = void 0;
-exports.ScrollToTopButton = exports.RadioGroup = exports.RadioField = exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.Placeholder = exports.LoadingPlaceholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.pageHeaderClassnames = exports.pageContentClassnames = exports.PagePinnableAside = exports.PageLayoutLoader = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageLayout = exports.PageHeader = exports.PageContextProvider = exports.PageContext = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageAside = exports.PageAlert = exports.PageActions = exports.PageActionSkeleton = exports.NumberField = exports.NumberedListItem = exports.NumberedList = exports.notFoundPageClassnames = exports.NotFoundPage = exports.MenuOrganizationSkeleton = exports.MenuOrganization = exports.DateRangePicker = exports.DataGridInfinite = exports.DataGrid = exports.MinimalisticPagination = exports.loaderClassnames = exports.Loader = exports.Link = exports.InfiniteDataList = exports.InputGroup = exports.Iframe = exports.HintIcon = exports.GuidTypography = exports.usePreviewFileUploader = void 0;
-exports.WelcomeScreen = exports.redirectToLink = exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = void 0;
+exports.RadioGroupContext = exports.RadioGroup = exports.RadioField = exports.radioCardClassnames = exports.RadioCard = exports.Radio = exports.radioClassnames = exports.Placeholder = exports.LoadingPlaceholder = exports.useHidePersonalData = exports.PersonalData = exports.Pagination = exports.pageHeaderClassnames = exports.pageContentClassnames = exports.PagePinnableAside = exports.PageLayoutLoader = exports.PageLayoutFooter = exports.PageLayoutContainer = exports.PageLayout = exports.PageHeader = exports.PageContextProvider = exports.PageContext = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.PageAsideBlock = exports.PageAside = exports.PageAlert = exports.PageActions = exports.PageActionSkeleton = exports.NumberField = exports.NumberedListItem = exports.NumberedList = exports.notFoundPageClassnames = exports.NotFoundPage = exports.MenuOrganizationSkeleton = exports.MenuOrganization = exports.DateRangePicker = exports.DataGridInfinite = exports.DataGrid = exports.MinimalisticPagination = exports.loaderClassnames = exports.Loader = exports.Link = exports.InfiniteDataList = exports.InputGroup = exports.Iframe = exports.HintIcon = exports.GuidTypography = exports.usePreviewFileUploader = void 0;
+exports.WelcomeScreen = exports.redirectToLink = exports.createUIKitClassname = exports.classNames = exports.TreeLikeList = exports.TreeLikeAutocomplete = exports.TreeAutocomplete = exports.TreeList = exports.MultipleTreeList = exports.UNSTABLE_SecondsCountdownService = exports.svgIconClassnames = exports.SvgIcon = exports.StepSlider = exports.StepperWizard = exports.staticDaysCalendarClassnames = exports.StaticDaysCalendar = exports.Skeleton = exports.SearchField = exports.ScrollToTopButton = void 0;
 __exportStar(require("./Accordion"), exports);
 var ActionGroup_1 = require("./ActionGroup");
 Object.defineProperty(exports, "ActionGroup", { enumerable: true, get: function () { return ActionGroup_1.ActionGroup; } });
@@ -235,6 +235,7 @@ var RadioField_1 = require("./RadioField");
 Object.defineProperty(exports, "RadioField", { enumerable: true, get: function () { return RadioField_1.RadioField; } });
 var RadioGroup_1 = require("./RadioGroup");
 Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });
+Object.defineProperty(exports, "RadioGroupContext", { enumerable: true, get: function () { return RadioGroup_1.RadioGroupContext; } });
 __exportStar(require("./RadioGroupField"), exports);
 var ScrollToTopButton_1 = require("./ScrollToTopButton");
 Object.defineProperty(exports, "ScrollToTopButton", { enumerable: true, get: function () { return ScrollToTopButton_1.ScrollToTopButton; } });

package/package.json

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