@gravity-ui/page-constructor 3.8.2 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [3.9.0](https://github.com/gravity-ui/page-constructor/compare/v3.8.3...v3.9.0) (2023-06-27)
+
+
+### Features
+
+* add content filtration utils ([6cf8038](https://github.com/gravity-ui/page-constructor/commit/6cf803818a222eed964f5e24960ad99a567adc1e))
+* add transform when variables handling ([#427](https://github.com/gravity-ui/page-constructor/issues/427)) ([6cf8038](https://github.com/gravity-ui/page-constructor/commit/6cf803818a222eed964f5e24960ad99a567adc1e))
+
+## [3.8.3](https://github.com/gravity-ui/page-constructor/compare/v3.8.2...v3.8.3) (2023-06-27)
+
+
+### Bug Fixes
+
+* editor form style indent ([#428](https://github.com/gravity-ui/page-constructor/issues/428)) ([3fc6da7](https://github.com/gravity-ui/page-constructor/commit/3fc6da73f7e724aaa4e8f22a45228f1a2cc4dc81))
+
 ## [3.8.2](https://github.com/gravity-ui/page-constructor/compare/v3.8.1...v3.8.2) (2023-06-23)
 
 

package/README.md

@@ -366,3 +366,25 @@ If you want to release a new version in previous major after commit it to the ma
 6. Wait until robot creates a PR with a new version of the package and information about your changes in CHANGELOG.md. You can see the process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
 7. Check your changes in CHANGELOG.md and approve robot's PR.
 8. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
+
+## Page constructor editor
+
+Editor provides user interface for page content management with realtime preview.
+
+How to use:
+
+```tsx
+import {PageConstructor} from '@gravity-ui/page-constructor';
+import {Editor} from '@gravity-ui/page-constructor/editor';
+
+interface MyAppEditorProps {
+  initialContent: PageContent;
+  onChange: (content: PageContent) => void;
+}
+
+export const MyAppEditor = ({initialContent, onChange}: MyAppEditorProps) => (
+  <Editor onChange={onChange} content={initialContent}>
+    {(props) => <PageConstructor {...props} />}
+  </Editor>
+);
+```

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

@@ -288,7 +288,9 @@ export declare const BannerCardProps: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };
 export declare const BannerBlock: {
@@ -582,7 +584,9 @@ export declare const BannerBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };
@@ -877,7 +881,9 @@ export declare const BannerCard: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -73,7 +73,9 @@ export declare const CardLayoutProps: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };
 export declare const CardLayoutBlock: {
@@ -152,7 +154,9 @@ export declare const CardLayoutBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

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

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

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

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

@@ -123,7 +123,9 @@ export declare const ExtendedFeaturesItem: {
                     })[];
                 };
                 type: {};
-                when: {};
+                when: {
+                    type: string;
+                };
             };
         };
         icon: {
@@ -233,7 +235,9 @@ export declare const ExtendedFeaturesBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -126,7 +126,9 @@ export declare const FilterProps: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };
 export declare const FilterBlock: {
@@ -231,7 +233,9 @@ export declare const FilterBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

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

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

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

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

@@ -59,7 +59,9 @@ export declare const IconsProps: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };
 export declare const IconsBlock: {
@@ -124,7 +126,9 @@ export declare const IconsBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -197,7 +197,9 @@ export declare const InfoBlock: {
                 }>;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

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

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

@@ -570,7 +570,9 @@ export declare const MediaBlockBaseProps: {
         type: string;
     };
     type: {};
-    when: {};
+    when: {
+        type: string;
+    };
 };
 export declare const MediaBlock: {
     'media-block': {
@@ -1158,7 +1160,9 @@ export declare const MediaBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

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

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

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

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

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

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

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

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

@@ -43,7 +43,9 @@ export declare const TableBlock: {
                         enum: string[];
                     };
                     type: {};
-                    when: {};
+                    when: {
+                        type: string;
+                    };
                 };
             };
             anchor: {
@@ -71,7 +73,9 @@ export declare const TableBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -353,7 +353,9 @@ export declare const tabsItem: {
                     })[];
                 };
                 type: {};
-                when: {};
+                when: {
+                    type: string;
+                };
             };
         };
         image: {
@@ -535,7 +537,9 @@ export declare const TabsBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

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

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

@@ -1,7 +1,7 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-add-block {
-  position: fixed;
+  position: absolute;
   bottom: 32px;
   left: calc(50% + var(--editor-left-column-width) / 2);
   transform: translateX(-50%);

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

@@ -14,9 +14,9 @@ exports.BlockForm = (0, react_1.memo)((_a) => {
     const prevContent = (0, usePreviousValue_1.default)(content);
     const spec = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, specRaw), { viewSpec: Object.assign(Object.assign({}, specRaw.viewSpec), { layoutOpen: active }) })), [specRaw, active]);
     if (!active) {
-        return (react_1.default.createElement(dynamic_forms_1.SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, 1));
+        return (react_1.default.createElement(dynamic_forms_1.SimpleVerticalAccordeon, { open: false, name: type, title: spec.viewSpec.layoutTitle || type, onOpenChange: onSelect }, ' '));
     }
-    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(react_final_form_1.Form, { initialValues: initialValues, onSubmit: lodash_1.default.noop }, () => (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(react_final_form_1.FormSpy, { onChange: ({ values }) => {
                 // fix for FormSpy onChange called twice without content changes
                 if (!lodash_1.default.isEqual(values.content, prevContent)) {

package/build/cjs/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/cjs/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/cjs/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/cjs/editor/components/Layout/Layout.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
+const types_1 = require("../../types");
 const ControlPanel_1 = tslib_1.__importDefault(require("../ControlPanel/ControlPanel"));
 const b = (0, utils_1.block)('editor-layout');
 const Left = () => null;
 const Right = () => null;
 const Layout = ({ children, mode, onModeChange }) => {
     let left, right;
+    const isEditingMode = mode === types_1.ViewModeItem.Edititng;
     function handleChild(child) {
         switch (child === null || child === void 0 ? void 0 : child.type) {
             case Left:
@@ -27,7 +29,7 @@ const Layout = ({ children, mode, onModeChange }) => {
         react_1.default.createElement("div", { className: b('container') },
             react_1.default.createElement(react_1.Fragment, null,
                 left && react_1.default.createElement("div", { className: b('left') }, left),
-                right && react_1.default.createElement("div", { className: b('right') }, right)))));
+                right && react_1.default.createElement("div", { className: b('right', { editing: isEditingMode }) }, right)))));
 };
 Layout.Left = Left;
 Layout.Right = Right;

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

@@ -15,8 +15,9 @@ const Form_1 = require("../Form/Form");
 const Editor = (_a) => {
     var { children, customSchema, onChange } = _a, rest = tslib_1.__rest(_a, ["children", "customSchema", "onChange"]);
     const { content, activeBlockIndex, errorBoundaryState, viewMode, onContentUpdate, onViewModeUpdate, onAdd, onSelect, injectEditBlockProps, } = (0, store_1.useEditorState)(rest);
+    const formSpecs = (0, useFormSpec_1.default)(customSchema);
     const isEditingMode = viewMode === types_1.ViewModeItem.Edititng;
-    const constructorProps = (0, react_1.useMemo)(() => {
+    const outgoingProps = (0, react_1.useMemo)(() => {
         const custom = isEditingMode
             ? (0, utils_1.addCustomDecorator)([
                 (props) => (react_1.default.createElement(EditBlock_1.default, Object.assign({}, injectEditBlockProps(props)))),
@@ -24,17 +25,16 @@ const Editor = (_a) => {
                 (props) => (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, Object.assign({}, props, { key: `${(0, utils_1.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]);
     (0, react_1.useEffect)(() => {
         onChange === null || onChange === void 0 ? void 0 : onChange(content);
     }, [content, onChange]);
-    const formSpecs = (0, useFormSpec_1.default)(customSchema);
     return (react_1.default.createElement(Layout_1.default, { mode: viewMode, onModeChange: onViewModeUpdate },
         isEditingMode && (react_1.default.createElement(Layout_1.default.Left, null,
             react_1.default.createElement(Form_1.Form, { content: content, onChange: onContentUpdate, activeBlockIndex: activeBlockIndex, onSelect: onSelect, spec: formSpecs }))),
         react_1.default.createElement(Layout_1.default.Right, null,
-            react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState }, children(constructorProps)),
+            react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { key: errorBoundaryState }, children(outgoingProps)),
             isEditingMode && react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd }))));
 };
 exports.Editor = Editor;

package/build/cjs/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/cjs/editor/containers/Form/Form.js

@@ -30,13 +30,14 @@ exports.Form = (0, react_1.memo)(({ content, onChange, activeBlockIndex, onSelec
             break;
         }
         case FormTab.Blocks: {
-            form = (react_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], key: (0, utils_1.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_1.default.createElement(react_1.Fragment, null, blocks.map((blockData, index) => blocksSpec[blockData.type] ? (react_1.default.createElement("div", { className: b('block-form') },
+                react_1.default.createElement(BlockForm_1.BlockForm, { spec: blocksSpec[blockData.type], key: (0, utils_1.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/cjs/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/cjs/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;
 }