@gravity-ui/page-constructor 5.7.2 → 5.9.0

package/build/esm/blocks/Form/schema.js

@@ -1,7 +1,7 @@
 import omit from 'lodash/omit';
 import { ImageProps } from '../../components/Image/schema';
 import { YandexFormProps } from '../../components/YandexForm/schema';
-import { BlockBaseProps } from '../../schema/validators/common';
+import { BlockBaseProps, withTheme } from '../../schema/validators/common';
 import { ContentBase } from '../../sub-blocks/Content/schema';
 import { HubspotFormProps } from '../../sub-blocks/HubspotForm/schema';
 const FormBlockContentProps = omit(ContentBase, ['size', 'centered', 'colSizes']);
@@ -17,14 +17,14 @@ export const FormBlock = {
                         type: 'object',
                         optionName: 'yandex',
                         properties: {
-                            yandex: YandexFormProps,
+                            yandex: withTheme(YandexFormProps),
                         },
                     },
                     {
                         type: 'object',
                         optionName: 'hubspot',
                         properties: {
-                            hubspot: HubspotFormProps,
+                            hubspot: withTheme(HubspotFormProps),
                         },
                     },
                 ],

package/build/esm/blocks/Header/schema.d.ts

@@ -48,6 +48,9 @@ export declare const HeaderBackgroundProps: {
                 optionName: string;
             })[];
         };
+        disableImageSliderForArrayInput: {
+            type: string;
+        };
         video: {
             type: string;
             additionalProperties: boolean;
@@ -508,6 +511,9 @@ export declare const HeaderProperties: {
                         optionName: string;
                     })[];
                 };
+                disableImageSliderForArrayInput: {
+                    type: string;
+                };
                 video: {
                     type: string;
                     additionalProperties: boolean;
@@ -1017,6 +1023,9 @@ export declare const HeaderBlock: {
                                 optionName: string;
                             })[];
                         };
+                        disableImageSliderForArrayInput: {
+                            type: string;
+                        };
                         video: {
                             type: string;
                             additionalProperties: boolean;

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -239,6 +239,9 @@ export declare const HeaderSliderBlock: {
                                             optionName: string;
                                         })[];
                                     };
+                                    disableImageSliderForArrayInput: {
+                                        type: string;
+                                    };
                                     video: {
                                         type: string;
                                         additionalProperties: boolean;

package/build/esm/blocks/Info/Info.js

@@ -25,8 +25,8 @@ export const InfoBlock = (props) => {
             React.createElement(Grid, null,
                 React.createElement(Row, null,
                     React.createElement(Col, { sizes: sizes, className: b('left') },
-                        React.createElement(Content, Object.assign({ title: title || (leftContent === null || leftContent === void 0 ? void 0 : leftContent.title), text: leftContent === null || leftContent === void 0 ? void 0 : leftContent.text, links: leftContent === null || leftContent === void 0 ? void 0 : leftContent.links, buttons: leftButtons, additionalInfo: leftContent === null || leftContent === void 0 ? void 0 : leftContent.additionalInfo }, commonProps))),
+                        React.createElement(Content, Object.assign({ title: title || (leftContent === null || leftContent === void 0 ? void 0 : leftContent.title), text: leftContent === null || leftContent === void 0 ? void 0 : leftContent.text, links: leftContent === null || leftContent === void 0 ? void 0 : leftContent.links, list: leftContent === null || leftContent === void 0 ? void 0 : leftContent.list, buttons: leftButtons, additionalInfo: leftContent === null || leftContent === void 0 ? void 0 : leftContent.additionalInfo }, commonProps))),
                     React.createElement(Col, { sizes: sizes, className: b('right') },
-                        React.createElement(Content, Object.assign({ title: sectionsTitle || (rightContent === null || rightContent === void 0 ? void 0 : rightContent.title), text: rightContent === null || rightContent === void 0 ? void 0 : rightContent.text, links: rightLinks, buttons: rightContent === null || rightContent === void 0 ? void 0 : rightContent.buttons, additionalInfo: rightContent === null || rightContent === void 0 ? void 0 : rightContent.additionalInfo }, commonProps))))))));
+                        React.createElement(Content, Object.assign({ title: sectionsTitle || (rightContent === null || rightContent === void 0 ? void 0 : rightContent.title), text: rightContent === null || rightContent === void 0 ? void 0 : rightContent.text, links: rightLinks, list: rightContent === null || rightContent === void 0 ? void 0 : rightContent.list, buttons: rightContent === null || rightContent === void 0 ? void 0 : rightContent.buttons, additionalInfo: rightContent === null || rightContent === void 0 ? void 0 : rightContent.additionalInfo }, commonProps))))))));
 };
 export default InfoBlock;

package/build/esm/blocks/Media/schema.d.ts

@@ -42,6 +42,9 @@ export declare const Media: {
                 optionName: string;
             })[];
         };
+        disableImageSliderForArrayInput: {
+            type: string;
+        };
         video: {
             type: string;
             additionalProperties: boolean;
@@ -632,6 +635,9 @@ export declare const MediaBlock: {
                                 optionName: string;
                             })[];
                         };
+                        disableImageSliderForArrayInput: {
+                            type: string;
+                        };
                         video: {
                             type: string;
                             additionalProperties: boolean;

package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts

@@ -58,6 +58,9 @@ export declare const PromoFeaturesItem: {
                         optionName: string;
                     })[];
                 };
+                disableImageSliderForArrayInput: {
+                    type: string;
+                };
                 video: {
                     type: string;
                     additionalProperties: boolean;

package/build/esm/blocks/Questions/Questions.js

@@ -7,7 +7,7 @@ import { FaqMicrodataValues } from './models';
 import './Questions.css';
 const b = block('QuestionsBlock');
 const QuestionsBlock = (props) => {
-    const { title, text, additionalInfo, links, buttons, items } = props;
+    const { title, text, additionalInfo, links, buttons, items, list } = props;
     const [opened, setOpened] = useState([0]);
     const toggleItem = (index) => {
         let newState;
@@ -23,7 +23,7 @@ const QuestionsBlock = (props) => {
         React.createElement(Row, null,
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },
-                    React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
+                    React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, colSizes: { all: 12, md: 12 } }))),
             React.createElement(Col, { sizes: { all: 12, md: 8 }, role: 'list' }, items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
                 const isOpened = opened.includes(index);
                 const onClick = () => toggleItem(index);

package/build/esm/blocks/Tabs/TabsTextContent/TabsTextContent.d.ts

@@ -7,5 +7,5 @@ interface TextContentProps extends Pick<TabsBlockProps, 'centered' | 'contentSiz
     centered?: boolean;
     imageProps?: ImageObjectProps | ImageDeviceProps;
 }
-export declare const TabsTextContent: ({ centered, contentSize, showMedia, data, imageProps, isReverse, }: TextContentProps) => JSX.Element;
+export declare const TabsTextContent: ({ centered, contentSize, showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }: TextContentProps) => JSX.Element;
 export default TabsTextContent;

package/build/esm/blocks/Tabs/TabsTextContent/TabsTextContent.js

@@ -4,13 +4,10 @@ import { Content } from '../../../sub-blocks';
 import { block } from '../../../utils';
 import './TabsTextContent.css';
 const b = block('tabs-block-text-content');
-export const TabsTextContent = ({ centered, contentSize = 's', showMedia, data, imageProps, isReverse, }) => {
-    const isImage = (data === null || data === void 0 ? void 0 : data.media) || imageProps;
-    return (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
-        React.createElement("div", { className: b('wrapper', {
-                reverse: isReverse,
-                'no-image': !isImage,
-            }) },
-            React.createElement(Content, { title: data.title, text: data.text, additionalInfo: data.additionalInfo, size: contentSize, links: [...(data.link ? [data.link] : []), ...(data.links || [])], buttons: data.buttons, colSizes: { all: 12 } }))));
-};
+export const TabsTextContent = ({ centered, contentSize = 's', showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }) => (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
+    React.createElement("div", { className: b('wrapper', {
+            reverse: isReverse,
+            'no-image': !(media || imageProps),
+        }) },
+        React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
 export default TabsTextContent;

package/build/esm/blocks/Tabs/schema.d.ts

@@ -53,6 +53,9 @@ export declare const tabsItem: {
                             optionName: string;
                         })[];
                     };
+                    disableImageSliderForArrayInput: {
+                        type: string;
+                    };
                     video: {
                         type: string;
                         additionalProperties: boolean;

package/build/esm/components/InnerForm/InnerForm.js

@@ -2,18 +2,21 @@ import { __rest } from "tslib";
 import React, { useContext, useEffect } from 'react';
 import { YandexForm } from '..';
 import { FormsContext, } from '../../context/formsContext/FormsContext';
+import { useTheme } from '../../context/theme';
 import { isHubspotDataForm, isYandexDataForm } from '../../models';
 import { HubspotForm } from '../../sub-blocks';
+import { getThemedValue } from '../../utils';
 const InnerForm = (props) => {
     const { formData, onContentLoad, className } = props;
     const formsConfig = useContext(FormsContext);
+    const theme = useTheme();
     useEffect(() => {
         if (isHubspotDataForm(formData)) {
             onContentLoad();
         }
     }, [onContentLoad, formData]);
     if (isYandexDataForm(formData)) {
-        const _a = formData.yandex, { onLoad } = _a, rest = __rest(_a, ["onLoad"]);
+        const _a = getThemedValue(formData.yandex, theme), { onLoad } = _a, rest = __rest(_a, ["onLoad"]);
         return (React.createElement("div", { className: className },
             React.createElement(YandexForm, Object.assign({}, formsConfig.yandex, rest, { onLoad: () => {
                     onContentLoad();
@@ -21,7 +24,8 @@ const InnerForm = (props) => {
                 } }))));
     }
     if (isHubspotDataForm(formData)) {
-        return (React.createElement(HubspotForm, Object.assign({ createDOMElement: true }, formsConfig.hubspot, formData.hubspot)));
+        const themedFormData = getThemedValue(formData.hubspot, theme);
+        return (React.createElement(HubspotForm, Object.assign({ createDOMElement: true }, formsConfig.hubspot, themedFormData)));
     }
     return null;
 };

package/build/esm/components/Media/Image/Image.js

@@ -12,7 +12,10 @@ import './Image.css';
 const b = block('media-component-image');
 export const defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, qa, onLoad, } = props;
+    const { parallax, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
+    const image = Array.isArray(props.image) && disableImageSliderForArrayInput
+        ? props.image[0]
+        : props.image;
     const qaAttributes = getQaAttrubutes(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
     const [scrollY, setScrollY] = useState(0);
     const [{ springScrollY }, springSetScrollY] = useSpring(() => ({

package/build/esm/components/Media/Media.js

@@ -9,13 +9,13 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
         }
         if (video) {
             const videoProps = {
@@ -56,6 +56,7 @@ export const Media = (props) => {
         dataLens,
         iframe,
         parallax,
+        disableImageSliderForArrayInput,
         height,
         imageClassName,
         isBackground,

package/build/esm/models/constructor-items/blocks.d.ts

@@ -287,6 +287,7 @@ export interface ContentItemProps {
 export interface ContentListProps {
     list: ContentItemProps[];
     size: ContentSize;
+    theme?: ContentTheme;
 }
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
@@ -323,10 +324,10 @@ export declare enum FormBlockDirection {
     Center = "center"
 }
 export interface FormBlockYandexData {
-    yandex: YandexFormProps;
+    yandex: ThemeSupporting<YandexFormProps>;
 }
 export interface FormBlockHubspotData {
-    hubspot: HubspotFormProps;
+    hubspot: ThemeSupporting<HubspotFormProps>;
 }
 export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
 export interface FormBlockProps {
@@ -334,7 +335,7 @@ export interface FormBlockProps {
     title?: string;
     textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
     direction?: FormBlockDirection;
-    background?: BackgroundImageProps;
+    background?: ThemeSupporting<BackgroundImageProps>;
 }
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;

package/build/esm/models/constructor-items/common.d.ts

@@ -191,6 +191,7 @@ export interface MediaComponentImageProps {
     video?: MediaVideoProps;
     parallax?: boolean;
     height?: number;
+    disableImageSliderForArrayInput?: boolean;
 }
 export interface MediaComponentDataLensProps {
     dataLens: DataLensProps;

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

@@ -1306,6 +1306,9 @@ export declare const cardSchemas: {
                     optionName: string;
                 })[];
             };
+            disableImageSliderForArrayInput: {
+                type: string;
+            };
             video: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -983,6 +983,9 @@ export declare const MediaProps: {
             optionName: string;
         })[];
     };
+    disableImageSliderForArrayInput: {
+        type: string;
+    };
     video: {
         type: string;
         additionalProperties: boolean;

package/build/esm/schema/validators/common.js

@@ -509,6 +509,9 @@ export const MediaProps = {
             { type: 'array', items: ImageProps, optionName: 'list' },
         ],
     },
+    disableImageSliderForArrayInput: {
+        type: 'boolean',
+    },
     video: VideoProps,
     youtube: {
         type: 'string',

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

@@ -7,7 +7,7 @@ import Content from '../Content/Content';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, controlPosition = 'content', } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, controlPosition = 'content', list, } = props;
     const titleId = useUniqId();
     const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
@@ -16,7 +16,7 @@ const BackgroundCard = (props) => {
     return (React.createElement(CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         React.createElement(CardBase.Content, null,
             React.createElement(BackgroundImage, Object.assign({ className: b('image') }, getThemedValue(background, theme), { style: { backgroundColor } })),
-            React.createElement(Content, { titleId: titleId, title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: areControlsInFooter ? undefined : links, buttons: areControlsInFooter ? undefined : buttons, colSizes: { all: 12, md: 12 } })),
+            React.createElement(Content, { titleId: titleId, title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: areControlsInFooter ? undefined : links, buttons: areControlsInFooter ? undefined : buttons, list: list, colSizes: { all: 12, md: 12 } })),
         areControlsInFooter && (links || buttons) && (React.createElement(CardBase.Footer, null,
             React.createElement(Links, { className: b('links'), size: "s", links: links, titleId: titleId }),
             React.createElement(Buttons, { className: b('buttons'), size: "s", buttons: buttons, titleId: titleId })))));

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

@@ -43,6 +43,9 @@ export declare const LayoutItem: {
                     optionName: string;
                 })[];
             };
+            disableImageSliderForArrayInput: {
+                type: string;
+            };
             video: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -126,6 +126,9 @@ export declare const MediaCardBlock: {
                     optionName: string;
                 })[];
             };
+            disableImageSliderForArrayInput: {
+                type: string;
+            };
             video: {
                 type: string;
                 additionalProperties: boolean;

package/package.json

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

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

@@ -287,6 +287,7 @@ export interface ContentItemProps {
 export interface ContentListProps {
     list: ContentItemProps[];
     size: ContentSize;
+    theme?: ContentTheme;
 }
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
@@ -323,10 +324,10 @@ export declare enum FormBlockDirection {
     Center = "center"
 }
 export interface FormBlockYandexData {
-    yandex: YandexFormProps;
+    yandex: ThemeSupporting<YandexFormProps>;
 }
 export interface FormBlockHubspotData {
-    hubspot: HubspotFormProps;
+    hubspot: ThemeSupporting<HubspotFormProps>;
 }
 export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
 export interface FormBlockProps {
@@ -334,7 +335,7 @@ export interface FormBlockProps {
     title?: string;
     textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
     direction?: FormBlockDirection;
-    background?: BackgroundImageProps;
+    background?: ThemeSupporting<BackgroundImageProps>;
 }
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;

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

@@ -191,6 +191,7 @@ export interface MediaComponentImageProps {
     video?: MediaVideoProps;
     parallax?: boolean;
     height?: number;
+    disableImageSliderForArrayInput?: boolean;
 }
 export interface MediaComponentDataLensProps {
     dataLens: DataLensProps;