@gravity-ui/page-constructor 5.14.3 → 5.15.0

package/build/esm/schema/constants.d.ts

@@ -17,6 +17,19 @@ export declare const cardSchemas: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             };
             direction: {
@@ -479,6 +492,19 @@ export declare const cardSchemas: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             };
             target: {
@@ -602,6 +628,19 @@ export declare const cardSchemas: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                 } & {
                     optionName: string;
@@ -625,6 +664,19 @@ export declare const cardSchemas: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             };
             color: {
@@ -667,6 +719,19 @@ export declare const cardSchemas: {
                             type: string;
                             pattern: string;
                             optionName: string;
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                properties: {
+                                    when: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                            pattern?: undefined;
                         })[];
                     };
                     description: {
@@ -1339,6 +1404,19 @@ export declare const cardSchemas: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                     type?: undefined;
                     items?: undefined;
@@ -1356,6 +1434,19 @@ export declare const cardSchemas: {
                             type: string;
                             pattern: string;
                             optionName: string;
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                properties: {
+                                    when: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                            pattern?: undefined;
                         })[];
                     };
                     optionName: string;

package/build/esm/schema/validators/common.d.ts

@@ -262,6 +262,19 @@ export declare const BackgroundProps: {
                 type: string;
                 pattern: string;
                 optionName: string;
+                items?: undefined;
+            } | {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+                optionName: string;
+                pattern?: undefined;
             })[];
         };
         color: {
@@ -539,6 +552,19 @@ export declare const authorItem: {
                 type: string;
                 pattern: string;
                 optionName: string;
+                items?: undefined;
+            } | {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+                optionName: string;
+                pattern?: undefined;
             })[];
         };
         description: {
@@ -967,6 +993,19 @@ export declare const MediaProps: {
                 type: string;
                 pattern: string;
                 optionName: string;
+                items?: undefined;
+            } | {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+                optionName: string;
+                pattern?: undefined;
             })[];
             type?: undefined;
             items?: undefined;
@@ -984,6 +1023,19 @@ export declare const MediaProps: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             };
             optionName: string;

package/build/esm/sub-blocks/BasicCard/BasicCard.js

@@ -2,8 +2,9 @@ import { __rest } from "tslib";
 import React from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
 import { CardBase, IconWrapper } from '../../components';
+import { useTheme } from '../../context/theme';
 import { IconPosition } from '../../models/constructor-items/sub-blocks';
-import { block } from '../../utils';
+import { block, getThemedValue } from '../../utils';
 import Content from '../Content/Content';
 import './BasicCard.css';
 const b = block('basic-card');
@@ -12,9 +13,11 @@ const BasicCard = (props) => {
     const titleId = useUniqId();
     const descriptionId = useUniqId();
     const areControlsInFooter = controlPosition === 'footer';
+    const theme = useTheme();
+    const themedIcon = getThemedValue(icon, theme);
     return (React.createElement(CardBase, Object.assign({ className: b(), contentClassName: b('content') }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
         React.createElement(CardBase.Content, null,
-            React.createElement(IconWrapper, { icon: icon ? { value: icon, position: iconPosition } : undefined, className: b('wrapper') },
+            React.createElement(IconWrapper, { icon: themedIcon ? { value: themedIcon, position: iconPosition } : undefined, className: b('wrapper') },
                 React.createElement(Content, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 }, controlPosition: areControlsInFooter ? 'bottom' : 'default' })))));
 };
 export default BasicCard;

package/build/esm/sub-blocks/BasicCard/schema.d.ts

@@ -21,6 +21,19 @@ export declare const BasicCard: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             };
             target: {

package/build/esm/sub-blocks/Content/schema.d.ts

@@ -23,6 +23,19 @@ export declare const ContentItem: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             } & {
                 optionName: string;

package/build/esm/sub-blocks/ImageCard/ImageCard.js

@@ -2,17 +2,20 @@ import React from 'react';
 import { Link, useUniqId } from '@gravity-ui/uikit';
 import { Image } from '../../components';
 import { getMediaImage } from '../../components/Media/Image/utils';
+import { useTheme } from '../../context/theme';
 import { ImageCardDirection } from '../../models';
-import { block } from '../../utils';
+import { block, getThemedValue } from '../../utils';
 import Content from '../Content/Content';
 import './ImageCard.css';
 const b = block('image-card');
 const CONTENT_COL_SIZES = { all: 12, md: 12 };
 const ImageCard = (props) => {
     const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', controlPosition = 'content', } = props;
+    const globalTheme = useTheme();
     const areControlsInFooter = controlPosition === 'footer';
     const hasContent = Boolean(text || title || buttons || links || list);
-    const imageProps = getMediaImage(image);
+    const themedImage = getThemedValue(image, globalTheme);
+    const imageProps = getMediaImage(themedImage);
     const titleId = useUniqId();
     const cardContent = (React.createElement(React.Fragment, null,
         React.createElement("div", { className: b('image', { margins }) },

package/build/esm/sub-blocks/ImageCard/schema.d.ts

@@ -15,6 +15,19 @@ export declare const ImageCard: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             };
             direction: {

package/build/esm/sub-blocks/LayoutItem/LayoutItem.js

@@ -13,6 +13,7 @@ const LayoutItem = (_a) => {
     const normalizedLinks = useMemo(() => getLayoutItemLinks(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
     const theme = useTheme();
+    const themedIcon = getThemedValue(icon, theme);
     const contentProps = Object.assign(Object.assign({ controlPosition: areControlsInFooter ? 'bottom' : 'default' }, content), { links: normalizedLinks, size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = useUniqId();
     const renderMedia = () => {
@@ -29,7 +30,7 @@ const LayoutItem = (_a) => {
         renderMedia(),
         metaInfo && React.createElement(MetaInfo, { items: metaInfo, className: b('meta-info') }),
         React.createElement("div", { className: b('content', { 'no-media': !media }) },
-            React.createElement(IconWrapper, { icon: icon, className: b('wrapper') },
+            React.createElement(IconWrapper, { icon: themedIcon, className: b('wrapper') },
                 React.createElement(Content, Object.assign({}, contentProps, { titleId: titleId }))))));
 };
 export default LayoutItem;

package/build/esm/sub-blocks/LayoutItem/schema.d.ts

@@ -21,6 +21,19 @@ export declare const LayoutItem: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                     type?: undefined;
                     items?: undefined;
@@ -38,6 +51,19 @@ export declare const LayoutItem: {
                             type: string;
                             pattern: string;
                             optionName: string;
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                properties: {
+                                    when: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                            pattern?: undefined;
                         })[];
                     };
                     optionName: string;

package/build/esm/sub-blocks/MediaCard/schema.d.ts

@@ -104,6 +104,19 @@ export declare const MediaCardBlock: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                     type?: undefined;
                     items?: undefined;
@@ -121,6 +134,19 @@ export declare const MediaCardBlock: {
                             type: string;
                             pattern: string;
                             optionName: string;
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                properties: {
+                                    when: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                            pattern?: undefined;
                         })[];
                     };
                     optionName: string;

package/build/esm/sub-blocks/Quote/Quote.js

@@ -14,11 +14,15 @@ const Quote = (props) => {
     const imageData = getMediaImage(imageThemed);
     const handleAnalytics = useAnalytics(DefaultEventNames.QuoteButton, url);
     const handleButtonClick = useCallback(() => handleAnalytics(), [handleAnalytics]);
+    const themedAuthor = author
+        ? Object.assign(Object.assign({}, author), { avatar: getThemedValue(author.avatar, theme) })
+        : author;
     const renderFooter = Boolean(author || url) && (React.createElement("div", { className: b('author-wrapper') },
-        author && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: author, type: AuthorType.Line, theme: textTheme })),
+        themedAuthor && (React.createElement(Author, { className: b('author', { theme: textTheme }), author: themedAuthor, type: AuthorType.Line, theme: textTheme })),
         url && buttonText && !button && (React.createElement(Button, { theme: "outlined", size: "xl", url: url, className: b('link-button', { theme: textTheme }), onClick: handleButtonClick, urlTitle: urlTitle, text: buttonText })),
         button && React.createElement(Button, Object.assign({ size: "xl" }, button))));
-    const logoProps = getMediaImage(logo);
+    const themedLogoProps = getThemedValue(logo, theme);
+    const logoProps = getMediaImage(themedLogoProps);
     return (React.createElement("div", { className: b({ theme: textTheme, border }), style: color ? { backgroundColor: color } : {} },
         React.createElement("div", { key: text, className: b('content-wrapper') },
             React.createElement("div", null,

package/build/esm/sub-blocks/Quote/schema.d.ts

@@ -24,6 +24,19 @@ export declare const Quote: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                 } & {
                     optionName: string;
@@ -47,6 +60,19 @@ export declare const Quote: {
                     type: string;
                     pattern: string;
                     optionName: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    };
+                    optionName: string;
+                    pattern?: undefined;
                 })[];
             };
             color: {
@@ -89,6 +115,19 @@ export declare const Quote: {
                             type: string;
                             pattern: string;
                             optionName: string;
+                            items?: undefined;
+                        } | {
+                            type: string;
+                            items: {
+                                type: string;
+                                properties: {
+                                    when: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            optionName: string;
+                            pattern?: undefined;
                         })[];
                     };
                     description: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.14.3",
+  "version": "5.15.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/blocks.d.ts

@@ -133,7 +133,7 @@ export interface PromoFeaturesItem {
     title: string;
     text: string;
     theme?: 'accent' | 'accent-light' | 'primary';
-    media?: MediaProps;
+    media?: ThemeSupporting<MediaProps>;
 }
 export interface PromoFeaturesProps extends Animatable {
     items: PromoFeaturesItem[];
@@ -233,9 +233,9 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     titleClassName?: string;
     description?: string;
     colSizes?: GridColumnSizesType;
-    background?: BackgroundImageProps & {
+    background?: ThemeSupporting<BackgroundImageProps & {
         border?: CardBorder;
-    };
+    }>;
 }
 export type FilterTag = {
     id: string;
@@ -258,7 +258,7 @@ export interface FilterBlockProps extends Animatable, LoadableChildren {
 export interface IconsBlockItemProps extends AnalyticsEventsBase {
     url: string;
     text: string;
-    src: string;
+    src: ThemeSupporting<string>;
 }
 export interface IconsBlockProps {
     title?: string;
@@ -269,7 +269,7 @@ export interface IconsBlockProps {
 }
 interface ContentLayoutBlockParams {
     size?: ContentSize;
-    background?: BackgroundImageProps;
+    background?: ThemeSupporting<BackgroundImageProps>;
     centered?: boolean;
     theme?: ContentTheme;
     textWidth?: ContentTextSize;

package/server/models/constructor-items/common.d.ts

@@ -249,7 +249,7 @@ export interface AuthorItem {
     firstName: string;
     secondName: string;
     description?: string;
-    avatar?: ImageProps | JSX.Element;
+    avatar?: ThemeSupporting<ImageProps> | JSX.Element;
 }
 export interface HeaderBreadCrumbsProps extends ClassNameProps {
     items: {

package/server/models/constructor-items/sub-blocks.d.ts

@@ -77,7 +77,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
     text?: string;
     yfmText?: string;
     image: ThemedImage;
-    logo: ImageProps;
+    logo: ThemeSupporting<ImageProps>;
     color?: string;
     /**
      * @deprecated use property button instead
@@ -106,7 +106,7 @@ export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase,
 export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme' | 'controlPosition'> {
     url: string;
     urlTitle?: string;
-    icon?: ImageProps;
+    icon?: ThemeSupporting<ImageProps>;
     target?: string;
     iconPosition?: IconPosition;
 }
@@ -135,14 +135,14 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
 }
 export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
-    media?: MediaProps;
+    media?: ThemeSupporting<MediaProps>;
     metaInfo?: string[];
     border?: boolean;
     fullscreen?: boolean;
-    icon?: PositionedIcon;
+    icon?: ThemeSupporting<PositionedIcon>;
 }
 export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
-    image: ImageProps;
+    image: ThemeSupporting<ImageProps>;
     enableImageBorderRadius?: boolean;
     margins?: ImageCardMargins;
     direction?: ImageCardDirection;