@gravity-ui/page-constructor 4.42.0 → 4.42.2

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

@@ -78,6 +78,18 @@ export declare const CardLayoutProps: {
         context: {
             type: string;
         };
+        indent: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {
+                top: {
+                    enum: string[];
+                };
+                bottom: {
+                    enum: string[];
+                };
+            };
+        };
         type: {};
         when: {
             type: string;
@@ -165,6 +177,18 @@ export declare const CardLayoutBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -7,6 +7,10 @@ export declare const CompaniesBlock: {
                 type: string;
                 contentType: string;
             };
+            description: {
+                type: string;
+                contentType: string;
+            };
             images: {
                 oneOf: (({
                     type: string;

package/build/cjs/blocks/Companies/schema.js

@@ -9,6 +9,9 @@ exports.CompaniesBlock = {
         properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { title: {
                 type: 'string',
                 contentType: 'text',
+            }, description: {
+                type: 'string',
+                contentType: 'text',
             }, images: (0, common_1.withTheme)({
                 type: 'object',
                 required: ['desktop', 'tablet', 'mobile'],

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

@@ -242,6 +242,18 @@ export declare const ContentLayoutBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -243,6 +243,18 @@ export declare const ExtendedFeaturesBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -134,6 +134,18 @@ export declare const FilterProps: {
         context: {
             type: string;
         };
+        indent: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {
+                top: {
+                    enum: string[];
+                };
+                bottom: {
+                    enum: string[];
+                };
+            };
+        };
         type: {};
         when: {
             type: string;
@@ -250,6 +262,18 @@ export declare const FilterBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -193,6 +193,18 @@ export declare const FormBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -1318,6 +1318,18 @@ export declare const HeaderBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -587,6 +587,18 @@ export declare const HeaderSliderBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -6,11 +6,20 @@ export declare const IconsProps: {
             type: string;
             contentType: string;
         };
+        description: {
+            type: string;
+            contentType: string;
+        };
         size: {
             type: string;
             enum: string[];
             default: string;
         };
+        colSizes: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {};
+        };
         items: {
             type: string;
             items: {
@@ -142,6 +151,18 @@ export declare const IconsProps: {
         context: {
             type: string;
         };
+        indent: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {
+                top: {
+                    enum: string[];
+                };
+                bottom: {
+                    enum: string[];
+                };
+            };
+        };
         type: {};
         when: {
             type: string;
@@ -157,11 +178,20 @@ export declare const IconsBlock: {
                 type: string;
                 contentType: string;
             };
+            description: {
+                type: string;
+                contentType: string;
+            };
             size: {
                 type: string;
                 enum: string[];
                 default: string;
             };
+            colSizes: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {};
+            };
             items: {
                 type: string;
                 items: {
@@ -293,6 +323,18 @@ export declare const IconsBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/cjs/blocks/Icons/schema.js

@@ -9,11 +9,14 @@ exports.IconsProps = {
     properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), { title: {
             type: 'string',
             contentType: 'text',
+        }, description: {
+            type: 'string',
+            contentType: 'text',
         }, size: {
             type: 'string',
             enum: ['s', 'm', 'l'],
             default: 's',
-        }, items: {
+        }, colSizes: common_1.containerSizesObject, items: {
             type: 'array',
             items: {
                 type: 'object',

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

@@ -473,6 +473,18 @@ export declare const MapBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -637,6 +637,18 @@ export declare const MediaBlockBaseProps: {
     context: {
         type: string;
     };
+    indent: {
+        type: string;
+        additionalProperties: boolean;
+        properties: {
+            top: {
+                enum: string[];
+            };
+            bottom: {
+                enum: string[];
+            };
+        };
+    };
     type: {};
     when: {
         type: string;
@@ -1295,6 +1307,18 @@ export declare const MediaBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -374,6 +374,18 @@ export declare const PromoFeaturesBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -115,6 +115,18 @@ export declare const QuestionsBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -215,6 +215,18 @@ export declare const SliderBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -81,6 +81,18 @@ export declare const TableBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

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

@@ -607,6 +607,18 @@ export declare const TabsBlock: {
             context: {
                 type: string;
             };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
             type: {};
             when: {
                 type: string;

package/build/cjs/components/Author/Author.css

@@ -5,7 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-3-line-height);
   display: flex;
   flex-direction: column;
-  color: var(--g-color-text-secondary);
 }
 .pc-author__avatar {
   width: 80px;
@@ -25,11 +24,11 @@ unpredictable css rules order in build */
 .pc-author__name {
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
-  color: var(--g-color-text-primary);
 }
 .pc-author__description {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
+  color: var(--g-color-text-secondary);
   padding-top: 4px;
 }
 .pc-author__label:not(:first-child) {
@@ -53,4 +52,7 @@ unpredictable css rules order in build */
 }
 .pc-author_type_line .pc-author__label:not(:first-child) {
   margin-left: 16px;
+}
+.pc-author_theme_dark .pc-author__description {
+  color: var(--g-color-text-light-secondary);
 }

package/build/cjs/components/Author/Author.js

@@ -8,7 +8,7 @@ const utils_2 = require("../Media/Image/utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa } = props;
+    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, qa, theme, } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
     const isAvatarJSX = react_1.default.isValidElement(avatar);
@@ -16,7 +16,7 @@ const Author = (props) => {
     if (!isAvatarJSX && avatar) {
         avatarProps = (0, utils_2.getMediaImage)(avatar);
     }
-    return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": qa },
+    return (react_1.default.createElement("div", { className: b({ type, theme }, className), "data-qa": qa },
         avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, isAvatarJSX ? avatar : react_1.default.createElement(index_1.Image, Object.assign({}, avatarProps)))),
         react_1.default.createElement("div", { className: b('label') },
             react_1.default.createElement("div", { className: b('name') }, name),

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

@@ -4,17 +4,14 @@
   overflow: hidden;
 }
 .pc-code-editor_fullscreen {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   z-index: 1000;
   background: var(--g-color-base-background);
 }
-.pc-code-editor_fullscreen .pc-code-editor__header {
-  margin-top: var(--pc-editor-header-height);
-}
 .pc-code-editor__code {
   width: 100%;
   height: 100%;

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

@@ -1,12 +1,12 @@
 import { PageContent } from '../../../models';
 import { CodeEditorMessageProps } from '../../utils/validation';
 interface CodeEditorProps {
-    content: PageContent;
+    code: string;
     fullscreenModeOn: boolean;
     validator: (code: string) => CodeEditorMessageProps;
     onFullscreenModeOnUpdate: (fullscreenModeOn: boolean) => void;
     onChange: (content: PageContent) => void;
     message?: CodeEditorMessageProps;
 }
-export declare const CodeEditor: ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }: CodeEditorProps) => JSX.Element;
+export declare const CodeEditor: ({ onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code, }: CodeEditorProps) => JSX.Element;
 export {};

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

@@ -5,26 +5,29 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const js_yaml_1 = tslib_1.__importDefault(require("js-yaml"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const react_monaco_editor_1 = tslib_1.__importDefault(require("react-monaco-editor"));
+const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
+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 = ({ content, onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, }) => {
-    const value = (0, react_1.useMemo)(() => js_yaml_1.default.dump(content), [content]);
-    const [message, setMessage] = (0, react_1.useState)(() => validator(value));
-    const onChangeWithValidation = (0, react_1.useCallback)((code) => {
-        const validationResult = validator(code);
+const CodeEditor = ({ 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
+    const onChangeWithValidation = (0, react_1.useCallback)((0, debounce_1.default)((newCode) => {
+        const validationResult = validator(newCode);
         setMessage(validationResult);
-        onChange((0, code_1.parseCode)(code));
-    }, [onChange, validator]);
+        onChange((0, code_1.parseCode)(newCode));
+    }, 200), [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: value, language: "yaml", options: constants_1.options, onChange: onChangeWithValidation, theme: "vs" })),
+            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("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))))));
 };

package/build/cjs/editor/containers/Editor/Editor.d.ts

@@ -1,2 +1,2 @@
 import { EditorProps } from '../../types';
-export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, ...rest }: EditorProps) => JSX.Element;
+export declare const Editor: ({ customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme, ...rest }: EditorProps) => JSX.Element;

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

@@ -15,13 +15,15 @@ const useCodeValidator_1 = require("../../hooks/useCodeValidator");
 const main_1 = require("../../store/main");
 const settings_1 = require("../../store/settings");
 const types_1 = require("../../types");
+const index_1 = require("../../types/index");
 const utils_1 = require("../../utils");
 const Form_1 = require("../Form/Form");
 const Editor = (_a) => {
-    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings"]);
+    var { customSchema, onChange, providerProps, transformContent, deviceEmulationSettings, theme: editorTheme } = _a, rest = tslib_1.__rest(_a, ["customSchema", "onChange", "providerProps", "transformContent", "deviceEmulationSettings", "theme"]);
     const { content, activeBlockIndex, errorBoundaryState, onContentUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, main_1.useMainState)(rest);
-    const { viewMode, theme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = (0, settings_1.useSettingsState)();
+    const { viewMode, theme: constructorTheme, onViewModeUpdate, onThemeUpdate, formTab, onFormTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, } = (0, settings_1.useSettingsState)();
     const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
+    const isCodeOnlyMode = codeFullscreeModeOn && formTab === index_1.FormTab.Code && viewMode === types_1.ViewModeItem.Edititng;
     const transformedContent = (0, react_1.useMemo)(() => (transformContent ? transformContent(content, { viewMode }) : content), [content, transformContent, viewMode]);
     const schema = (0, react_1.useMemo)(() => (0, schema_1.generateDefaultSchema)(customSchema), [customSchema]);
     const codeValidator = (0, useCodeValidator_1.useCodeValidator)(schema);
@@ -52,20 +54,29 @@ const Editor = (_a) => {
             content: transformedContent,
             custom: rest.custom,
         },
-        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme }),
+        providerProps: Object.assign(Object.assign({}, providerProps), { isMobile: (0, utils_1.checkIsMobile)(viewMode), theme: constructorTheme }),
         deviceEmulationSettings,
-    }), [providerProps, rest.custom, viewMode, transformedContent, deviceEmulationSettings, theme]);
+        theme: editorTheme,
+    }), [
+        providerProps,
+        rest.custom,
+        viewMode,
+        transformedContent,
+        deviceEmulationSettings,
+        constructorTheme,
+        editorTheme,
+    ]);
     (0, react_1.useEffect)(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
     return (react_1.default.createElement(context_1.EditorContext.Provider, { value: context },
-        react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: theme, onThemeChange: onThemeUpdate },
+        react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate, theme: constructorTheme, onThemeChange: onThemeUpdate },
             isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
                 react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, activeTab: formTab, codeFullscreeModeOn: codeFullscreeModeOn, schema: schema, codeValidator: codeValidator, onActiveTabUpdate: onFormTabUpdate, onCodeFullscreeModeOnUpdate: onCodeFullscreeModeOnUpdate, onSelect: onSelect }))),
-            react_1.default.createElement(Layout_1.default.Right, null,
+            !isCodeOnlyMode && (react_1.default.createElement(Layout_1.default.Right, null,
                 react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState },
-                    react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps, { theme: theme }),
+                    react_1.default.createElement(PageConstructor_1.PageConstructorProvider, Object.assign({}, providerProps, { theme: constructorTheme }),
                         react_1.default.createElement(PageConstructor_1.PageConstructor, Object.assign({}, outgoingProps)))),
-                isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd })))));
+                isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd }))))));
 };
 exports.Editor = Editor;

package/build/cjs/editor/containers/Form/Form.js

@@ -10,6 +10,7 @@ const CodeEditor_1 = require("../../components/CodeEditor/CodeEditor");
 const PagePropsForm_1 = require("../../components/PagePropsForm/PagePropsForm");
 const useFormSpec_1 = tslib_1.__importDefault(require("../../hooks/useFormSpec"));
 const types_1 = require("../../types");
+const hooks_1 = require("./hooks");
 const b = (0, utils_1.block)('editor-form');
 const tabsItems = Object.values(types_1.FormTab).map((tab) => ({
     id: tab,
@@ -17,6 +18,7 @@ const tabsItems = Object.values(types_1.FormTab).map((tab) => ({
 }));
 exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelect, schema, codeValidator, activeTab, onActiveTabUpdate, codeFullscreeModeOn, onCodeFullscreeModeOnUpdate, }) => {
     const _a = content || {}, { blocks } = _a, page = tslib_1.__rest(_a, ["blocks"]);
+    const code = (0, hooks_1.useCode)({ activeTab, content, codeFullscreeModeOn });
     const spec = (0, useFormSpec_1.default)(schema);
     const { blocks: blocksSpec, page: pageSpec } = spec || {};
     let form;
@@ -39,7 +41,7 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
             break;
         }
         case types_1.FormTab.Code: {
-            form = (react_1.default.createElement(CodeEditor_1.CodeEditor, { content: content, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
+            form = (react_1.default.createElement(CodeEditor_1.CodeEditor, { code: code, onChange: onChange, validator: codeValidator, fullscreenModeOn: codeFullscreeModeOn, onFullscreenModeOnUpdate: onCodeFullscreeModeOnUpdate }));
             break;
         }
     }