@gravity-ui/page-constructor 1.20.4 → 1.21.0

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

@@ -0,0 +1,229 @@
+export declare const FilterTagProps: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        id: {
+            type: string;
+        };
+        label: {
+            type: string;
+        };
+    };
+};
+export declare const FilterItemProps: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        tags: {
+            type: string;
+            items: {
+                type: string;
+            };
+        };
+        card: {
+            $ref: string;
+        };
+    };
+};
+export declare const FilterProps: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        allTag: {
+            oneOf: {
+                type: string;
+            }[];
+        };
+        colSizes: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {};
+        };
+        tags: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        items: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        tagButtonSize: {
+            type: string;
+            enum: string[];
+        };
+        title: {
+            oneOf: ({
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    textSize: {
+                        type: string;
+                        enum: string[];
+                    };
+                    url: {
+                        type: string;
+                    };
+                    resetMargin: {
+                        type: string;
+                    };
+                };
+            } | {
+                type: string;
+            })[];
+        };
+        description: {
+            type: string;
+            contentType: string;
+        };
+        animated: {
+            type: string;
+        };
+        anchor: {
+            type: string;
+            additionalProperties: boolean;
+            required: string[];
+            properties: {
+                text: {
+                    type: string;
+                    contentType: string;
+                };
+                url: {
+                    type: string;
+                };
+            };
+        };
+        visible: {
+            type: string;
+            enum: string[];
+        };
+        resetPaddings: {
+            type: string;
+        };
+        context: {
+            type: string;
+        };
+        type: {};
+        when: {};
+    };
+};
+export declare const FilterBlock: {
+    'filterable-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            allTag: {
+                oneOf: {
+                    type: string;
+                }[];
+            };
+            colSizes: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {};
+            };
+            tags: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            tagButtonSize: {
+                type: string;
+                enum: string[];
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
+            };
+            description: {
+                type: string;
+                contentType: string;
+            };
+            animated: {
+                type: string;
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            context: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

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

@@ -0,0 +1,38 @@
+import { AnimatableProps, BlockBaseProps, BlockHeaderProps, containerSizesObject, } from '../../schema/validators/common';
+import { filteredArray } from '../../schema/validators/utils';
+export const FilterTagProps = {
+    additionalProperties: false,
+    required: ['id', 'label'],
+    properties: {
+        id: {
+            type: 'string',
+        },
+        label: {
+            type: 'string',
+        },
+    },
+};
+export const FilterItemProps = {
+    additionalProperties: false,
+    required: ['tags', 'card'],
+    properties: {
+        tags: {
+            type: 'array',
+            items: {
+                type: 'string',
+            },
+        },
+        card: { $ref: 'self#/definitions/card' },
+    },
+};
+export const FilterProps = {
+    additionalProperties: false,
+    required: ['filterTags', 'block'],
+    properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { allTag: { oneOf: [{ type: 'boolean' }, { type: 'string' }] }, colSizes: containerSizesObject, tags: filteredArray(FilterTagProps), items: filteredArray(FilterItemProps), tagButtonSize: {
+            type: 'string',
+            enum: ['s', 'm', 'l', 'xl'],
+        } }),
+};
+export const FilterBlock = {
+    'filterable-block': FilterProps,
+};

package/build/esm/blocks/Tabs/Tabs.css

@@ -13,11 +13,38 @@ unpredictable css rules order in build */
 .pc-tabs-block__block-title_centered > * {
   margin: 0 auto;
 }
+.pc-tabs-block__tabs {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  overflow: auto;
+}
 .pc-tabs-block__tabs_centered {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
+@media (max-width: 769px) {
+  .pc-tabs-block__tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: auto;
+    margin-left: -48px;
+    margin-right: -48px;
+    padding-left: 48px;
+    padding-right: 40px;
+  }
+}
+@media (max-width: 577px) {
+  .pc-tabs-block__tabs {
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-left: 24px;
+    padding-right: 16px;
+  }
+}
 .pc-tabs-block__row_reverse {
   flex-direction: row-reverse;
 }
@@ -65,16 +92,6 @@ unpredictable css rules order in build */
 }
 
 @media (max-width: 769px) {
-  .pc-tabs-block__tabs {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    overflow: auto;
-    margin-left: -48px;
-    margin-right: -48px;
-    padding-left: 48px;
-    padding-right: 40px;
-  }
   .pc-tabs-block__content-wrapper_margin {
     margin: 0 0 32px 0;
   }
@@ -86,14 +103,6 @@ unpredictable css rules order in build */
     padding-bottom: 0;
   }
 }
-@media (max-width: 577px) {
-  .pc-tabs-block__tabs {
-    margin-left: -24px;
-    margin-right: -24px;
-    padding-left: 24px;
-    padding-right: 16px;
-  }
-}
 @media (min-width: 769px) {
   .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
     position: relative;

package/build/esm/blocks/index.d.ts

@@ -19,3 +19,4 @@ export { default as HeaderSliderBlock } from './HeaderSlider/HeaderSlider';
 export { default as CardLayoutBlock } from './CardLayout/CardLayout';
 export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
 export { default as ShareBlock } from './Share/Share';
+export { default as FilterBlock } from './FilterBlock/FilterBlock';

package/build/esm/blocks/index.js

@@ -19,3 +19,4 @@ export { default as HeaderSliderBlock } from './HeaderSlider/HeaderSlider';
 export { default as CardLayoutBlock } from './CardLayout/CardLayout';
 export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
 export { default as ShareBlock } from './Share/Share';
+export { default as FilterBlock } from './FilterBlock/FilterBlock';

package/build/esm/components/Button/Button.css

@@ -14,6 +14,8 @@ unpredictable css rules order in build */
 .pc-button-block_theme_github.pc-button-block_theme_github {
   --yc-button-background-color: var(--pc-monochrome-button-background-color);
   --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+}
+.pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github:focus {
   color: var(--pc-monochrome-button-color);
 }
 .pc-button-block_theme_github.pc-button-block_theme_github:hover {
@@ -25,6 +27,8 @@ unpredictable css rules order in build */
 .pc-button-block_theme_monochrome {
   --yc-button-background-color: var(--pc-monochrome-button-background-color);
   --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+}
+.pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome:focus {
   color: var(--pc-monochrome-button-color);
 }
 .pc-button-block_theme_monochrome:hover {

package/build/esm/components/ButtonTabs/ButtonTabs.css

@@ -1,12 +1,25 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-button-tabs {
-  margin-bottom: 20px;
-}
 .pc-button-tabs__item {
   margin-right: 8px;
   margin-bottom: 12px;
+  --yc-button-background-color: var(--pc-tab-item-background-color);
+  --yc-button-background-color-hover: var(--pc-tab-item-background-color-hover);
+}
+.pc-button-tabs__item, .pc-button-tabs__item:link, .pc-button-tabs__item:visited, .pc-button-tabs__item:active, .pc-button-tabs__item:focus {
+  color: var(--pc-tab-item-color);
+}
+.pc-button-tabs__item:hover {
+  color: var(--pc-tab-item-color);
 }
 .pc-button-tabs__item_active {
   pointer-events: none;
+  --yc-button-background-color: var(--pc-selected-tab-item-background-color);
+  --yc-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
+}
+.pc-button-tabs__item_active, .pc-button-tabs__item_active:link, .pc-button-tabs__item_active:visited, .pc-button-tabs__item_active:active, .pc-button-tabs__item_active:focus {
+  color: var(--pc-selected-tab-item-color);
+}
+.pc-button-tabs__item_active:hover {
+  color: var(--pc-selected-tab-item-color);
 }

package/build/esm/components/ButtonTabs/ButtonTabs.d.ts

@@ -1,14 +1,17 @@
+import React from 'react';
+import { ButtonSize } from '@gravity-ui/uikit';
 import { ButtonProps } from '../../models';
 import './ButtonTabs.css';
 export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
-    id: string;
+    id: string | null;
     title: string;
 }
 export interface ButtonTabsProps {
     className?: string;
     items: ButtonTabsItemProps[];
-    activeTab?: string;
-    onSelectTab?: (tabId: string) => void;
+    activeTab?: string | null;
+    onSelectTab?: (tabId: string | null) => void;
+    tabSize?: ButtonSize;
 }
-declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
+declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/build/esm/components/ButtonTabs/ButtonTabs.js

@@ -3,8 +3,7 @@ import { block } from '../../utils';
 import { Button } from '../index';
 import './ButtonTabs.css';
 const b = block('button-tabs');
-const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
+const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', }) => {
     const activeTabId = useMemo(() => {
         if (activeTab) {
             return activeTab;
@@ -16,9 +15,6 @@ const ButtonTabs = (props) => {
             onSelectTab(tabId);
         }
     }, [onSelectTab]);
-    return (React.createElement("div", { className: b(null, className) }, items.map((item) => {
-        const isActive = item.id === activeTabId;
-        return (React.createElement(Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
-    })));
+    return (React.createElement("div", { className: b(null, className) }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
 };
 export default ButtonTabs;

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

@@ -16,10 +16,11 @@ export declare const blockMap: {
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
-    "card-layout-block": ({ title, description, animated, colSizes, children, }: import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps) => JSX.Element;
+    "card-layout-block": import("react").FC<import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps>;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;
     "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
     "map-block": ({ map, ...props }: import("./models").MapBlockProps) => JSX.Element;
+    "filter-block": import("react").FC<import("./models").FilterBlockProps>;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/esm/constructor-items.js

@@ -1,6 +1,6 @@
 import { BlockType, SubBlockType } from './models';
 import { Partner, PriceDetailed, MediaCard, NewsCard, TutorialCard, CardWithImage, LayoutItem, BackgroundCard, Content, Quote, Divider, BannerCard, BasicCard, } from './sub-blocks';
-import { BannerBlock, CompaniesBlock, SimpleBlock, MediaBlock, MapBlock, PreviewBlock, InfoBlock, SecurityBlock, SliderBlock, ExtendedFeaturesBlock, PromoFeaturesBlock, QuestionsBlock, TableBlock, TabsBlock, LinkTableBlock, HeaderBlock, IconsBlock, HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, ShareBlock, } from './blocks';
+import { BannerBlock, CompaniesBlock, SimpleBlock, MediaBlock, MapBlock, PreviewBlock, InfoBlock, SecurityBlock, SliderBlock, ExtendedFeaturesBlock, PromoFeaturesBlock, QuestionsBlock, TableBlock, TabsBlock, LinkTableBlock, HeaderBlock, IconsBlock, HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, ShareBlock, FilterBlock, } from './blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
     [BlockType.SimpleBlock]: SimpleBlock,
@@ -23,6 +23,7 @@ export const blockMap = {
     [BlockType.ContentLayoutBlock]: ContentLayoutBlock,
     [BlockType.ShareBlock]: ShareBlock,
     [BlockType.MapBlock]: MapBlock,
+    [BlockType.FilterBlock]: FilterBlock,
 };
 export const subBlockMap = {
     [SubBlockType.Divider]: Divider,

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -19,6 +19,14 @@ unpredictable css rules order in build */
   --pc-monochrome-button-color: var(--yc-color-text-light-primary);
   --pc-text-header-color: var(--yc-color-text-primary);
   --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
+  --pc-tab-item-color: var(--yc-color-text-primary);
+  --pc-tab-item-background-color: var(--yc-color-base-generic);
+  --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+  --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
+  --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
+  --pc-selected-tab-item-background-color-hover: var(
+      --pc-monochrome-button-background-color-hover
+  );
 }
 .yc-root.yc-root_theme_dark {
   --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import React, { useContext, useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
-import { HeaderBlockTypes, BlockTypes, } from '../../models';
+import { HeaderBlockTypes, BlockTypes, SubBlockTypes, } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
 import { Grid } from '../../grid';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
-import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getThemedValue, getCustomItems, } from '../../utils';
+import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getThemedValue, getCustomItems, getCustomSubBlockTypes, } from '../../utils';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
@@ -17,21 +17,20 @@ import Layout from '../../navigation/containers/Layout/Layout';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
-    const { context, headerBlockTypes } = useMemo(() => {
-        var _a;
-        return ({
-            context: {
-                blockTypes: [...BlockTypes, ...getCustomBlockTypes(props.custom)],
-                itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(props.custom)),
-                loadables: (_a = props === null || props === void 0 ? void 0 : props.custom) === null || _a === void 0 ? void 0 : _a.loadable,
-            },
-            headerBlockTypes: [...HeaderBlockTypes, ...getCustomHeaderTypes(props.custom)],
-        });
-    }, [props.custom]);
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { context } = useMemo(() => ({
+        context: {
+            blockTypes: [...BlockTypes, ...getCustomBlockTypes(custom)],
+            subBlockTypes: [...SubBlockTypes, ...getCustomSubBlockTypes(custom)],
+            headerBlockTypes: [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)],
+            itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(custom)),
+            loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
+            shouldRenderBlock,
+        },
+    }), [custom, shouldRenderBlock]);
     const { themeValue: theme } = useContext(ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, } = props;
     const hasFootnotes = footnotes.length > 0;
-    const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
+    const isHeaderBlock = (block) => context.headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
     const restBlocks = blocks === null || blocks === void 0 ? void 0 : blocks.filter((block) => !isHeaderBlock(block));
     const themedBackground = getThemedValue(background, theme);
@@ -44,7 +43,7 @@ export const Constructor = (props) => {
                     header && React.createElement(ConstructorHeader, { data: header }),
                     React.createElement(Grid, null,
                         restBlocks && (React.createElement(ConstructorRow, null,
-                            React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
+                            React.createElement(ConstructorBlocks, { items: restBlocks }))),
                         hasFootnotes && (React.createElement(ConstructorRow, null,
                             React.createElement(ConstructorFootnotes, { items: footnotes })))))))));
 };

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,9 +1,7 @@
-import { ReactElement } from 'react';
-import { Block, ShouldRenderBlock } from '../../../../models';
+import React from 'react';
+import { Block, WithChildren } from '../../../../models';
 interface ConstructorBlockProps {
     data: Block;
-    Component: ReactElement;
-    shouldRenderBlock?: ShouldRenderBlock;
 }
-export declare const ConstructorBlock: ({ data, Component }: ConstructorBlockProps) => JSX.Element;
+export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;
 export {};

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -2,7 +2,7 @@ import React from 'react';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { block } from '../../../../utils';
 const b = block('constructor-block');
-export const ConstructorBlock = ({ data, Component }) => {
-    const { anchor, visible } = data;
-    return (React.createElement(BlockBase, { className: b({ type: data.type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, Component));
+export const ConstructorBlock = ({ data, children, }) => {
+    const { anchor, visible, type } = data;
+    return (React.createElement(BlockBase, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
 };

package/build/esm/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.d.ts

@@ -1,7 +1,7 @@
-import { ConstructorItem as ConstructorItemType, ShouldRenderBlock } from '../../../../models';
+import React from 'react';
+import { ConstructorItem as ConstructorItemType } from '../../../../models';
 interface ConstructorBlocksProps {
     items: ConstructorItemType[];
-    shouldRenderBlock?: ShouldRenderBlock;
 }
-export declare const ConstructorBlocks: ({ items, shouldRenderBlock }: ConstructorBlocksProps) => JSX.Element;
+export declare const ConstructorBlocks: React.FC<ConstructorBlocksProps>;
 export {};

package/build/esm/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js

@@ -2,17 +2,15 @@ import _ from 'lodash';
 import React, { Fragment, useContext } from 'react';
 import { getBlockKey } from '../../../../utils';
 import { InnerContext } from '../../../../context/innerContext';
-import { BlockIdContext } from '../../../../context/blockIdContext';
 import { ConstructorLoadable } from '../ConstructorLoadable';
 import { ConstructorItem } from '../ConstructorItem';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
-export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
-    const { blockTypes, loadables, itemMap } = useContext(InnerContext);
+export const ConstructorBlocks = ({ items }) => {
+    const { blockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
             return null;
         }
-        let children;
         let itemElement;
         const key = getBlockKey(item, index);
         const blockId = parentId ? `${parentId}_${key}` : key;
@@ -28,13 +26,13 @@ export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
             itemElement = (React.createElement(ConstructorLoadable, { block: item, key: blockId, blockKey: blockId, config: config, serviceId: serviceId, params: params }));
         }
         else {
+            let children;
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (React.createElement(BlockIdContext.Provider, { value: blockId, key: blockId },
-                React.createElement(ConstructorItem, { data: item }, children)));
+            itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: blockId, Component: itemElement })) : (itemElement);
+        return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: blockId }, itemElement)) : (itemElement);
     };
     return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/esm/containers/PageConstructor/components/ConstructorItem/ConstructorItem.d.ts

@@ -1,6 +1,7 @@
 import { ConstructorItem as ConstructorItemType, WithChildren } from '../../../../models';
 export interface ConstructorItemProps {
     data: ConstructorItemType;
+    blockKey?: string;
 }
-export declare const ConstructorItem: ({ data, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
-export declare const ConstructorHeader: ({ data }: Pick<ConstructorItemProps, 'data'>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children, }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

package/build/esm/containers/PageConstructor/components/ConstructorItem/ConstructorItem.js

@@ -1,10 +1,12 @@
 import { __rest } from "tslib";
 import React, { useContext } from 'react';
 import { InnerContext } from '../../../../context/innerContext';
-export const ConstructorItem = ({ data, children }) => {
+import { BlockIdContext } from '../../../../context/blockIdContext';
+export const ConstructorItem = ({ data, blockKey = '', children, }) => {
     const { itemMap } = useContext(InnerContext);
     const { type } = data, rest = __rest(data, ["type"]);
     const Component = itemMap[type];
-    return React.createElement(Component, Object.assign({}, rest), children);
+    return (React.createElement(BlockIdContext.Provider, { value: blockKey },
+        React.createElement(Component, Object.assign({}, rest), children)));
 };
-export const ConstructorHeader = ({ data }) => (React.createElement(ConstructorItem, { data: data, key: data.type }));
+export const ConstructorHeader = ({ data, blockKey = '', }) => (React.createElement(ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));