@gravity-ui/page-constructor 3.8.2 → 3.9.0

package/build/esm/editor/components/BlockForm/BlockForm.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { memo, useMemo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 import { DynamicField, SimpleVerticalAccordeon } from '@gravity-ui/dynamic-forms';
 import _ from 'lodash';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
@@ -11,9 +11,9 @@ export const BlockForm = memo((_a) => {
     const prevContent = usePreviousValue(content);
     const spec = useMemo(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
     if (!active) {
-        return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
+        return (React.createElement(SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, ' '));
     }
-    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement("div", null,
+    return (React.createElement(FinalForm, { initialValues: initialValues, onSubmit: _.noop }, () => (React.createElement(Fragment, null,
         React.createElement(FormSpy, { onChange: ({ values }) => {
                 // fix for FormSpy onChange called twice without content changes
                 if (!_.isEqual(values.content, prevContent)) {

package/build/esm/editor/components/ControlPanel/ControlPanel.css

@@ -7,7 +7,8 @@ unpredictable css rules order in build */
   height: var(--editor-header-height);
   padding: 8px 20px;
   background-color: var(--yc-color-base-background);
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border: 1px var(--yc-color-line-generic);
+  border-style: solid none;
 }
 .pc-control-panel__icon {
   display: flex;

package/build/esm/editor/components/EditBlock/EditBlock.css

@@ -10,7 +10,7 @@ unpredictable css rules order in build */
   height: calc(100% + 40px);
   top: -20px;
   left: -20px;
-  border-radius: 8px;
+  border-radius: var(--pc-border-radius);
   z-index: 100;
 }
 .pc-edit-block__controls_isHeader {
@@ -25,7 +25,7 @@ unpredictable css rules order in build */
 .pc-edit-block__controls-content {
   display: flex;
   position: absolute;
-  bottom: -44px;
+  bottom: -40px;
   left: 50%;
   transform: translateX(-50%);
 }
@@ -34,14 +34,14 @@ unpredictable css rules order in build */
   justify-content: center;
   align-items: center;
   transition: transform 0.2s;
-  width: 24px;
-  height: 24px;
-  border-radius: calc(8px / 2);
+  width: 48px;
+  height: 32px;
+  border-radius: 8px;
   background-color: var(--yc-color-promo-highlight-neon);
 }
 .pc-edit-block__control:hover {
   transform: scale(1.1);
 }
 .pc-edit-block__control:not(:first-child) {
-  margin-left: 12px;
+  margin-left: 4px;
 }

package/build/esm/editor/components/Layout/Layout.css

@@ -29,11 +29,14 @@ unpredictable css rules order in build */
 }
 .pc-editor-layout__left {
   flex: 0 0 auto;
-  padding: 8px 20px 20px;
+  padding: 24px 16px;
   width: var(--editor-left-column-width);
   border-right: var(--editor-divider-width) solid var(--yc-color-line-generic);
   overflow-x: auto;
 }
 .pc-editor-layout__right {
   width: 100%;
+}
+.pc-editor-layout__right_editing {
+  padding-bottom: 200px;
 }

package/build/esm/editor/components/Layout/Layout.js

@@ -1,5 +1,6 @@
 import React, { Children, Fragment } from 'react';
 import { block } from '../../../utils';
+import { ViewModeItem } from '../../types';
 import ControlPanel from '../ControlPanel/ControlPanel';
 import './Layout.css';
 const b = block('editor-layout');
@@ -7,6 +8,7 @@ const Left = () => null;
 const Right = () => null;
 const Layout = ({ children, mode, onModeChange }) => {
     let left, right;
+    const isEditingMode = mode === ViewModeItem.Edititng;
     function handleChild(child) {
         switch (child === null || child === void 0 ? void 0 : child.type) {
             case Left:
@@ -25,7 +27,7 @@ const Layout = ({ children, mode, onModeChange }) => {
         React.createElement("div", { className: b('container') },
             React.createElement(Fragment, null,
                 left && React.createElement("div", { className: b('left') }, left),
-                right && React.createElement("div", { className: b('right') }, right)))));
+                right && React.createElement("div", { className: b('right', { editing: isEditingMode }) }, right)))));
 };
 Layout.Left = Left;
 Layout.Right = Right;

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

@@ -12,8 +12,9 @@ import { Form } from '../Form/Form';
 export const Editor = (_a) => {
     var { children, customSchema, onChange } = _a, rest = __rest(_a, ["children", "customSchema", "onChange"]);
     const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = useEditorState(rest);
+    const formSpecs = useFormSpec(customSchema);
     const isEditingMode = viewMode === ViewModeItem.Edititng;
-    const constructorProps = useMemo(() => {
+    const outgoingProps = useMemo(() => {
         const custom = isEditingMode
             ? addCustomDecorator([
                 (props) => (React.createElement(EditBlock, Object.assign({}, injectEditBlockProps(props)))),
@@ -21,16 +22,15 @@ export const Editor = (_a) => {
                 (props) => (React.createElement(ErrorBoundary, Object.assign({}, props, { key: `${getBlockId(props)}-${errorBoundaryState}` }))),
             ], rest.custom)
             : rest.custom;
-        return { content, custom };
-    }, [injectEditBlockProps, content, errorBoundaryState, isEditingMode, rest.custom]);
+        return { content, custom, viewMode };
+    }, [injectEditBlockProps, content, errorBoundaryState, isEditingMode, viewMode, rest.custom]);
     useEffect(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
-    const formSpecs = useFormSpec(customSchema);
     return (React.createElement(Layout, { mode: viewMode, onModeChange: onViewModeUpdate },
         isEditingMode && (React.createElement(Layout.Left, null,
             React.createElement(Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
         React.createElement(Layout.Right, null,
-            React.createElement(ErrorBoundary, { key: errorBoundaryState }, children(constructorProps)),
+            React.createElement(ErrorBoundary, { key: errorBoundaryState }, children(outgoingProps)),
             isEditingMode && React.createElement(AddBlock, { onAdd: onAdd }))));
 };

package/build/esm/editor/containers/Form/Form.css

@@ -3,14 +3,14 @@ unpredictable css rules order in build */
 .pc-editor-form {
   --top-level-font-size: var(--yc-text-display-2-font-size);
   --top-level-line-height: var(--yc-text-display-2-line-height);
-  --block-propery-font-size: var(--yc-text-body-3-font-size);
-  --block-property-line-height: var(--yc-text-body-3-line-height);
-  --nested-property-font-size: var(--yc-text-body-1-font-size);
-  --nested-property-line-height: var(--yc-text-body-1-line-height);
-  --complex-nested-property-font-size: var(--yc-text-body-2-font-size);
-  --complex-nested-property-line-height: var(--yc-text-body-2-line-height);
+  --block-level-complex-propery-font-size: var(--yc-text-body-3-font-size);
+  --block-level-complex-property-line-height: var(--yc-text-body-3-line-height);
+  --complex-property-font-size: var(--yc-text-body-2-font-size);
+  --complex-property-line-height: var(--yc-text-body-2-line-height);
+  --property-font-size: var(--yc-text-body-1-font-size);
+  --property-line-height: var(--yc-text-body-1-line-height);
   --input-min-width: 150px;
-  --property-title-width: 140px;
+  --property-title-width: 96px;
   --button-height: 48px;
   --icon-size: 32px;
   --icon-margin: 42px;
@@ -24,20 +24,23 @@ unpredictable css rules order in build */
   --button-height: 32px;
   --icon-size: 20px;
   --icon-margin: 30px;
-  --header-text-size: var(--block-propery-font-size);
-  --header-line-height: var(--block-property-line-height);
-  --text-size: var(--block-propery-font-size);
-  --line-height: var(--block-property-line-height);
+  --header-text-size: var(--block-level-complex-propery-font-size);
+  --header-line-height: var(--block-level-complex-property-line-height);
+  --text-size: var(--property-font-size);
+  --line-height: var(--property-line-height);
+  --property-font-weight: 400;
 }
 .pc-editor-form .df-use-search .df-use-search .df-use-search {
   --button-height: 28px;
   --icon-size: 16px;
   --icon-margin: 25px;
   --property-font-weight: 400;
-  --header-text-size: var(--complex-nested-property-font-size);
-  --header-line-height: var(--complex-nested-property-line-height);
-  --text-size: var(--nested-property-font-size);
-  --line-height: var(--nested-property-line-height);
+  --header-text-size: var(--complex-property-font-size);
+  --header-line-height: var(--complex-property-line-height);
+  --text-size: var(--property-font-size);
+  --line-height: var(--property-line-height);
+  --oneof-text-size: var(--complex-propery-font-size);
+  --oneof-line-height: var(--complex-property-line-height);
 }
 .pc-editor-form .df-row {
   width: inherit;
@@ -73,17 +76,29 @@ unpredictable css rules order in build */
 .pc-editor-form .df-simple-vertical-accordeon__header .yc-button .yc-button__icon_side_right ~ .yc-button__text {
   margin-right: var(--icon-margin);
 }
+.pc-editor-form .df-simple-vertical-accordeon__body {
+  margin-top: 0px;
+  padding-top: 12px;
+}
+.pc-editor-form .df-use-search {
+  margin: 4px 0;
+}
 .pc-editor-form .df-simple-vertical-accordeon__body,
 .pc-editor-form .df-group-indent > .df-use-search {
   margin-top: 0;
   margin-left: 1px;
-  padding-top: 12px;
-  padding-left: 16px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 12px;
   border-left: 1px solid var(--yc-color-line-generic-accent);
 }
+.pc-editor-form .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
+  padding-left: 12px;
+}
 .pc-editor-form .g-select,
 .pc-editor-form .yc-text-input {
-  width: var(--input-min-width);
+  min-width: var(--input-min-width);
+  width: 100%;
 }
 .pc-editor-form + .pc-editor-form {
   margin-top: 12px;
@@ -91,4 +106,7 @@ unpredictable css rules order in build */
 .pc-editor-form__tabs {
   --yc-color-base-special: var(--yc-color-promo-base-neon);
   margin-bottom: 20px;
+}
+.pc-editor-form__block-form {
+  margin-bottom: 16px;
 }

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

@@ -28,13 +28,14 @@ export const Form = memo(({ content, onChange, activeBlockIndex, onSelect, spec
             break;
         }
         case FormTab.Blocks: {
-            form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement(BlockForm, { spec: blocksSpec[blockData.type], key: getBlockKey(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
-                    onChange(Object.assign(Object.assign({}, content), { blocks: [
-                            ...blocks.slice(0, index),
-                            data,
-                            ...blocks.slice(index + 1),
-                        ] }));
-                }, onSelect: () => onSelect(index) })) : null)));
+            form = (React.createElement(Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (React.createElement("div", { className: b('block-form') },
+                React.createElement(BlockForm, { spec: blocksSpec[blockData.type], key: getBlockKey(blockData, index), data: blockData, active: activeBlockIndex === index, onChange: (data) => {
+                        onChange(Object.assign(Object.assign({}, content), { blocks: [
+                                ...blocks.slice(0, index),
+                                data,
+                                ...blocks.slice(index + 1),
+                            ] }));
+                    }, onSelect: () => onSelect(index) }))) : null)));
             break;
         }
     }

package/build/esm/editor/dynamic-forms-custom/components/OneOfCustom/OneOfCustom.css

@@ -10,7 +10,7 @@
 }
 .pc-one-of-custom .df-group-indent > .df-use-search {
   padding-top: 11px;
-  padding-left: 20px;
+  padding-left: 12px;
   margin-top: 4px;
   margin-bottom: 20px;
   margin-left: 5px;

package/build/esm/editor/types/index.d.ts

@@ -4,8 +4,11 @@ import { BlockDecorationProps, PageContent } from '../../models';
 import { SchemaCustomConfig } from '../../schema';
 import { EditBlockActions } from '../components/EditBlock/EditBlock';
 export type EditorBlockId = number | string;
+export interface EditorOutgoingProps extends Partial<PageConstructorProps> {
+    viewMode: ViewModeItem;
+}
 export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
-    children: (props: Partial<PageConstructorProps>) => React.ReactNode;
+    children: (props: EditorOutgoingProps) => React.ReactNode;
     onChange?: (data: PageContent) => void;
     customSchema?: SchemaCustomConfig;
 }

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

@@ -91,7 +91,9 @@ export declare const cardSchemas: {
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
     quote: {
@@ -166,7 +168,9 @@ export declare const cardSchemas: {
                 };
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
     'background-card': {
@@ -280,7 +284,9 @@ export declare const cardSchemas: {
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
     'price-detailed': {
@@ -372,7 +378,9 @@ export declare const cardSchemas: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
     'banner-card': {
@@ -665,7 +673,9 @@ export declare const cardSchemas: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
     'media-card': {
@@ -899,7 +909,9 @@ export declare const cardSchemas: {
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -21,7 +21,9 @@ export declare const sizeNumber: {
 export declare const contentThemes: string[];
 export declare const BaseProps: {
     type: {};
-    when: {};
+    when: {
+        type: string;
+    };
 };
 export declare const containerSizesObject: {
     type: string;
@@ -412,7 +414,9 @@ export declare const LinkProps: {
             })[];
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };
 export declare const FileLinkProps: {
@@ -750,7 +754,9 @@ export declare const BlockBaseProps: {
         type: string;
     };
     type: {};
-    when: {};
+    when: {
+        type: string;
+    };
 };
 export declare const TitleProps: {
     type: string;

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

@@ -18,7 +18,9 @@ export const sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
 export const contentThemes = ['default', 'dark', 'light'];
 export const BaseProps = {
     type: {},
-    when: {},
+    when: {
+        type: 'string',
+    },
 };
 export const containerSizesObject = {
     type: 'object',

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

@@ -110,7 +110,9 @@ export declare const BackgroundCard: {
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -89,7 +89,9 @@ export declare const BasicCard: {
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -9,7 +9,9 @@ export declare const Divider: {
                 enum: (string | number)[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -308,6 +308,8 @@ export declare const LayoutItem: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };

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

@@ -230,7 +230,9 @@ export declare const MediaCardBlock: {
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -88,7 +88,9 @@ export declare const PriceDetailedBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -71,7 +71,9 @@ export declare const Quote: {
                 };
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

package/build/esm/text-transform/filter.d.ts

@@ -0,0 +1,20 @@
+import { ContentVariables } from './transformers';
+type WhenValue = string | boolean | undefined;
+type OrArray<T> = T | T[];
+type OrArrayRecord<T> = Record<string, OrArray<T>>;
+interface FilteredContentItem extends OrArrayRecord<FilteredContentItem> {
+}
+type FilteredContent = OrArray<FilteredContentItem>;
+type FilterableContentItem = FilteredContentItem & {
+    when: WhenValue;
+};
+export type FilterableContent = OrArray<FilterableContentItem>;
+/**
+ * Filters content recoursively by result of it's 'when' property evaluation applied to vars argument.
+ * e.g. property {..., when: 'someVar == "someValue"' } will be included in result only if vars.someVar === 'someValue'
+ * @param {FilterableContent} content
+ * @param {ContentVariables} vars
+ * @return {FilteredContent}
+ */
+export declare function filterContent(content: FilterableContent | FilteredContent, vars: ContentVariables): FilteredContent;
+export {};

package/build/esm/text-transform/filter.js

@@ -0,0 +1,56 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
+import evalExp from '@doc-tools/transform/lib/liquid/evaluation';
+function filterItems(items, vars, propertyName) {
+    if (!Array.isArray(items)) {
+        throw new Error(`Error while filtering: items has invalid key '${propertyName}' equals ${JSON.stringify(items)}`);
+    }
+    return items.reduce((result, item) => {
+        const passedFiltration = checkWhenCondition(item.when, vars);
+        if (passedFiltration) {
+            const property = propertyName && item[propertyName];
+            if (property === undefined) {
+                result.push(item);
+            }
+            else {
+                const filteredProperty = filterItems(property, vars, propertyName);
+                if (filteredProperty.length !== 0) {
+                    result.push(Object.assign(Object.assign({}, item), { [propertyName]: filteredProperty }));
+                }
+            }
+        }
+        return result;
+    }, []);
+}
+function checkWhenCondition(whenValue, vars) {
+    return (whenValue === true ||
+        whenValue === undefined ||
+        (typeof whenValue === 'string' && (!whenValue || evalExp(whenValue, vars))));
+}
+function isItemArray(content) {
+    return Array.isArray(content);
+}
+function isItem(content) {
+    return content && typeof content === 'object' && !Array.isArray(content);
+}
+/**
+ * Filters content recoursively by result of it's 'when' property evaluation applied to vars argument.
+ * e.g. property {..., when: 'someVar == "someValue"' } will be included in result only if vars.someVar === 'someValue'
+ * @param {FilterableContent} content
+ * @param {ContentVariables} vars
+ * @return {FilteredContent}
+ */
+export function filterContent(content, vars) {
+    if (isItemArray(content)) {
+        return filterItems(content, vars).map((item) => filterContent(item, vars));
+    }
+    else if (isItem(content)) {
+        return Object.entries(content).reduce((acc, [key, value]) => {
+            acc[key] = filterContent(value, vars);
+            return acc;
+        }, {});
+    }
+    else {
+        return content;
+    }
+}

package/build/esm/text-transform/index.d.ts

@@ -2,3 +2,4 @@ export * from './utils';
 export * from './config';
 export * from './common';
 export * from './transformers';
+export * from './filter';

package/build/esm/text-transform/index.js

@@ -2,3 +2,4 @@ export * from './utils';
 export * from './config';
 export * from './common';
 export * from './transformers';
+export * from './filter';

package/build/esm/text-transform/transformers.d.ts

@@ -1,5 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { Lang } from '../utils/configure';
+export type ContentVariables = Record<string, string>;
 export type ContentTransformerProps = {
     content: {
         blocks?: ConstructorBlock[];
@@ -7,6 +8,7 @@ export type ContentTransformerProps = {
     options: {
         lang: Lang;
         customConfig?: {};
+        vars?: ContentVariables;
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/build/esm/text-transform/transformers.js

@@ -2,6 +2,7 @@
 /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 import _ from 'lodash';
 import { config } from './config';
+import { filterContent } from './filter';
 function transformBlocks(blocks, lang, customConfig = {}) {
     const fullConfig = Object.assign(Object.assign({}, config), customConfig);
     const clonedBlocks = _.cloneDeep(blocks);
@@ -42,8 +43,8 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 export const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {} } = options;
-    const { blocks = [] } = content;
+    const { lang, customConfig = {}, vars } = options;
+    const { blocks = [] } = (vars ? filterContent(content, vars) : content);
     const transformedBlocks = transformBlocks(blocks, lang, customConfig);
     return {
         blocks: transformedBlocks,

package/package.json

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

package/server/text-transform/filter.d.ts

@@ -0,0 +1,20 @@
+import { ContentVariables } from './transformers';
+type WhenValue = string | boolean | undefined;
+type OrArray<T> = T | T[];
+type OrArrayRecord<T> = Record<string, OrArray<T>>;
+interface FilteredContentItem extends OrArrayRecord<FilteredContentItem> {
+}
+type FilteredContent = OrArray<FilteredContentItem>;
+type FilterableContentItem = FilteredContentItem & {
+    when: WhenValue;
+};
+export type FilterableContent = OrArray<FilterableContentItem>;
+/**
+ * Filters content recoursively by result of it's 'when' property evaluation applied to vars argument.
+ * e.g. property {..., when: 'someVar == "someValue"' } will be included in result only if vars.someVar === 'someValue'
+ * @param {FilterableContent} content
+ * @param {ContentVariables} vars
+ * @return {FilteredContent}
+ */
+export declare function filterContent(content: FilterableContent | FilteredContent, vars: ContentVariables): FilteredContent;
+export {};