@gravity-ui/page-constructor 5.14.3 → 5.15.1

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 const components_1 = require("../../components");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const DEFAULT_SIZES = {
@@ -13,7 +14,8 @@ const DEFAULT_SIZES = {
 };
 const b = (0, utils_1.block)('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, }) => {
-    const _a = background || {}, { border } = _a, backgroundImageProps = tslib_1.__rest(_a, ["border"]);
+    const theme = (0, theme_1.useTheme)();
+    const _a = (0, utils_1.getThemedValue)(background || {}, theme), { border } = _a, backgroundImageProps = tslib_1.__rest(_a, ["border"]);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(null, className), animate: animated },
         (title || description) && (react_1.default.createElement(components_1.Title, { title: title, subtitle: description, className: titleClassName })),
         react_1.default.createElement("div", { className: b('content', {

package/build/cjs/blocks/ContentLayout/ContentLayout.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../components");
 const mobileContext_1 = require("../../context/mobileContext");
+const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const sub_blocks_1 = require("../../sub-blocks");
 const utils_1 = require("../../utils");
@@ -33,11 +34,13 @@ const ContentLayoutBlock = (props) => {
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { textContent, fileContent, size = 'l', background, centered, theme = 'default', textWidth = 'm', } = props;
     const colSizes = (0, react_1.useMemo)(() => getTextWidth(textWidth), [textWidth]);
+    const globalTheme = (0, theme_1.useTheme)();
+    const themedBackground = (0, utils_1.getThemedValue)(background, globalTheme);
     return (react_1.default.createElement("div", { className: b({ size, theme, background: Boolean(background) }) },
         react_1.default.createElement(sub_blocks_1.Content, Object.assign({ className: b('content') }, textContent, { size: size, centered: centered, colSizes: colSizes, theme: theme })),
         fileContent && (react_1.default.createElement(grid_1.Col, { className: b('files', { size, centered }), reset: true, sizes: colSizes }, fileContent.map((file) => (react_1.default.createElement(components_1.FileLink, Object.assign({ className: b('file') }, file, { key: file.href, type: "horizontal", textSize: getFileTextSize(size), theme: theme })))))),
         background && (react_1.default.createElement("div", { className: b('background') },
-            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('background-item') }, background, { hide: isMobile }))))));
+            react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('background-item') }, themedBackground, { hide: isMobile }))))));
 };
 exports.ContentLayoutBlock = ContentLayoutBlock;
 exports.default = exports.ContentLayoutBlock;

package/build/cjs/blocks/ExtendedFeatures/schema.d.ts

@@ -144,6 +144,19 @@ export declare const ExtendedFeaturesItem: {
                     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/cjs/blocks/Form/schema.d.ts

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

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

@@ -26,6 +26,19 @@ export declare const HeaderBackgroundProps: {
                     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;
@@ -43,6 +56,19 @@ export declare const HeaderBackgroundProps: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                 };
                 optionName: string;
@@ -327,6 +353,19 @@ export declare const HeaderProperties: {
                 type: string;
                 pattern: string;
                 optionName: string;
+                items?: undefined;
+            } | {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+                optionName: string;
+                pattern?: undefined;
             })[];
         } & {
             optionName: string;
@@ -489,6 +528,19 @@ export declare const HeaderProperties: {
                             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;
@@ -506,6 +558,19 @@ export declare const HeaderProperties: {
                                 type: string;
                                 pattern: string;
                                 optionName: string;
+                                items?: undefined;
+                            } | {
+                                type: string;
+                                items: {
+                                    type: string;
+                                    properties: {
+                                        when: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                                optionName: string;
+                                pattern?: undefined;
                             })[];
                         };
                         optionName: string;
@@ -839,6 +904,19 @@ export declare const HeaderBlock: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                 } & {
                     optionName: string;
@@ -1001,6 +1079,19 @@ export declare const HeaderBlock: {
                                     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;
@@ -1018,6 +1109,19 @@ export declare const HeaderBlock: {
                                         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/cjs/blocks/HeaderSlider/schema.d.ts

@@ -55,6 +55,19 @@ export declare const HeaderSliderBlock: {
                                     type: string;
                                     pattern: string;
                                     optionName: string;
+                                    items?: undefined;
+                                } | {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                        properties: {
+                                            when: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                    optionName: string;
+                                    pattern?: undefined;
                                 })[];
                             } & {
                                 optionName: string;
@@ -217,6 +230,19 @@ export declare const HeaderSliderBlock: {
                                                 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;
@@ -234,6 +260,19 @@ export declare const HeaderSliderBlock: {
                                                     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/cjs/blocks/Icons/Icons.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../components");
 const locationContext_1 = require("../../context/locationContext");
+const theme_1 = require("../../context/theme");
 const hooks_1 = require("../../hooks");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('icons-block');
@@ -13,13 +14,15 @@ const getItemContent = (item) => (react_1.default.createElement(react_1.Fragment
 const Icons = ({ title, description, size = 's', colSizes = { all: 12 }, items }) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const theme = (0, theme_1.useTheme)();
     const onClick = (0, react_1.useCallback)(({ analyticsEvents, url }) => {
         handleAnalytics(analyticsEvents, { url });
     }, [handleAnalytics]);
     return (react_1.default.createElement("div", { className: b({ size }) },
         (title || description) && (react_1.default.createElement(components_1.Title, { className: b('header'), title: title, subtitle: description, colSizes: colSizes })),
         items.map((item) => {
-            const itemContent = getItemContent(item);
+            const themedSrc = (0, utils_1.getThemedValue)(item.src, theme);
+            const itemContent = getItemContent(Object.assign(Object.assign({}, item), { src: themedSrc }));
             const { url, text } = item;
             return url ? (react_1.default.createElement("a", Object.assign({ className: b('item'), key: url, href: url, "aria-label": text, title: text }, (0, utils_1.getLinkProps)(url, hostname), { onClick: () => onClick(item) }), itemContent)) : (react_1.default.createElement("div", { className: b('item'), key: text }, itemContent));
         })));

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

@@ -20,6 +20,19 @@ export declare const Media: {
                     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;
@@ -37,6 +50,19 @@ export declare const Media: {
                         type: string;
                         pattern: string;
                         optionName: string;
+                        items?: undefined;
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                        optionName: string;
+                        pattern?: undefined;
                     })[];
                 };
                 optionName: string;
@@ -617,6 +643,19 @@ export declare const MediaBlock: {
                                     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;
@@ -634,6 +673,19 @@ export declare const MediaBlock: {
                                         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/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -9,6 +9,7 @@ const Media_1 = tslib_1.__importDefault(require("../../components/Media/Media"))
 const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"));
 const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper"));
 const constants_1 = require("../../constants");
+const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('PromoFeaturesBlock');
 const breakpointColumns = {
@@ -19,12 +20,14 @@ const breakpointColumns = {
 const PromoFeaturesBlock = (props) => {
     const { items, title, description, theme, animated = true } = props;
     const backgroundTheme = theme || 'default';
+    const globalTheme = (0, theme_1.useTheme)();
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b({ [backgroundTheme]: true }), animate: animated },
         react_1.default.createElement(FullWidthBackground_1.default, { className: b('background', { [backgroundTheme]: true }) }),
         react_1.default.createElement(Title_1.default, { title: title, subtitle: description, className: b('header') }),
         react_1.default.createElement(BalancedMasonry_1.default, { breakpointCols: breakpointColumns, className: b('card-container'), columnClassName: b('card-container-column') }, items.map(({ title: cardTitle, text, media, theme: cardTheme }, index) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';
+            const themedMedia = (0, utils_1.getThemedValue)(media, globalTheme);
             return (react_1.default.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,
                     [themeMod]: Boolean(themeMod),
@@ -33,7 +36,7 @@ const PromoFeaturesBlock = (props) => {
                     react_1.default.createElement("h3", { className: b('card-title') }, cardTitle),
                     react_1.default.createElement("div", { className: b('card-text') },
                         react_1.default.createElement(YFMWrapper_1.default, { content: text, modifiers: { constructor: true } }))),
-                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, media))));
+                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, themedMedia))));
         }))));
 };
 exports.default = PromoFeaturesBlock;

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

@@ -36,6 +36,19 @@ export declare const PromoFeaturesItem: {
                             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;
@@ -53,6 +66,19 @@ export declare const PromoFeaturesItem: {
                                 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/cjs/blocks/Tabs/schema.d.ts

@@ -31,6 +31,19 @@ export declare const tabsItem: {
                                 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;
@@ -48,6 +61,19 @@ export declare const tabsItem: {
                                     type: string;
                                     pattern: string;
                                     optionName: string;
+                                    items?: undefined;
+                                } | {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                        properties: {
+                                            when: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                    optionName: string;
+                                    pattern?: undefined;
                                 })[];
                             };
                             optionName: string;
@@ -425,6 +451,19 @@ export declare const tabsItem: {
                     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/cjs/components/Author/schema.d.ts

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

package/build/cjs/components/Image/schema.d.ts

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

package/build/cjs/components/Image/schema.js

@@ -53,6 +53,16 @@ exports.ImageProps = {
         },
         (0, utils_1.filteredItem)(Object.assign(Object.assign({}, exports.ImageObjectProps), { optionName: 'options' })),
         (0, utils_1.filteredItem)(Object.assign(Object.assign({}, exports.ImageDeviceProps), { optionName: 'device options' })),
+        {
+            type: 'array',
+            items: (0, utils_1.filteredItem)(Object.assign({}, exports.ImageObjectProps)),
+            optionName: 'options list',
+        },
+        {
+            type: 'array',
+            items: (0, utils_1.filteredItem)(Object.assign({}, exports.ImageDeviceProps)),
+            optionName: 'device options list',
+        },
     ],
 };
 exports.BackgroundImageProps = {

package/build/cjs/editor/components/CodeEditor/CodeEditor.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { PageContent } from '../../../models';
 import { CodeEditorMessageProps } from '../../utils/validation';
 interface CodeEditorProps {
@@ -8,5 +9,5 @@ interface CodeEditorProps {
     onChange: (content: PageContent) => void;
     message?: CodeEditorMessageProps;
 }
-export declare const CodeEditor: ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }: CodeEditorProps) => JSX.Element;
+export declare const CodeEditor: React.MemoExoticComponent<({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }: CodeEditorProps) => JSX.Element>;
 export {};

package/build/cjs/editor/components/CodeEditor/CodeEditor.js

@@ -13,7 +13,8 @@ const context_1 = require("../../context");
 const code_1 = require("../../utils/code");
 const constants_1 = require("./constants");
 const b = (0, utils_1.block)('code-editor');
-const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }) => {
+const ON_CHANGE_DEBOUNCE_TIMEOUT = 300;
+exports.CodeEditor = react_1.default.memo(({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code }) => {
     const [message, setMessage] = (0, react_1.useState)(() => validator(code));
     const { theme = models_1.Theme.Light } = (0, react_1.useContext)(context_1.EditorContext);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -21,14 +22,14 @@ const CodeEditor = ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnU
         const validationResult = validator(newCode);
         setMessage(validationResult);
         onChange((0, code_1.parseCode)(newCode));
-    }, 200), [onChange, validator]);
+    }, ON_CHANGE_DEBOUNCE_TIMEOUT), [onChange, validator]);
     return (react_1.default.createElement("div", { className: b({ fullscreen: fullscreenModeOn }) },
         react_1.default.createElement("div", { className: b('header') },
             react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: () => onFullscreenModeOnUpdate(!fullscreenModeOn) },
                 react_1.default.createElement(uikit_1.Icon, { data: fullscreenModeOn ? icons_1.ChevronsCollapseUpRight : icons_1.ChevronsExpandUpRight, size: 16 }))),
         react_1.default.createElement("div", { className: b('code') },
-            react_1.default.createElement(react_monaco_editor_1.default, { key: String(fullscreenModeOn), value: code, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: theme === models_1.Theme.Dark ? 'vs-dark' : 'vs' })),
+            react_1.default.createElement(react_monaco_editor_1.default, { key: String(fullscreenModeOn), defaultValue: code, value: code, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: theme === models_1.Theme.Dark ? 'vs-dark' : 'vs' })),
         react_1.default.createElement("div", { className: b('footer') }, message && (react_1.default.createElement("div", { className: b('message-container') },
             react_1.default.createElement("div", { className: b('message', { status: message.status }) }, message.text))))));
-};
-exports.CodeEditor = CodeEditor;
+});
+exports.CodeEditor.displayName = 'CodeEditor';

package/build/cjs/editor/containers/Editor/hooks/useEditorState.js

@@ -23,7 +23,7 @@ const useEditorState = (_a) => {
     const isFormEditMode = editMode === types_1.EditModeItem.Form;
     const isDesktopViewMode = viewMode === types_1.ViewModeItem.Desktop;
     const isCodeOnlyMode = codeFullscreeModeOn && isCodeEditMode;
-    const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
+    const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode, editMode }) : content), [content, transformContent, viewMode, editMode]);
     const schema = (0, react_1.useMemo)(() => (0, schema_1.generateDefaultSchema)(customSchema), [customSchema]);
     const codeValidator = (0, useCodeValidator_1.useCodeValidator)(schema);
     const outgoingProps = (0, react_1.useMemo)(() => {