@gravity-ui/page-constructor 2.22.0-alpha → 2.22.0

package/build/cjs/sub-blocks/HubspotForm/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { HubspotFormProps } from '../../models';
-declare const HubspotForm: React.FunctionComponent<HubspotFormProps>;
+declare const HubspotForm: React.ForwardRefExoticComponent<HubspotFormProps & React.RefAttributes<HTMLDivElement>>;
 export default HubspotForm;

package/build/cjs/sub-blocks/HubspotForm/index.js

@@ -10,7 +10,7 @@ const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const HubspotFormContainer_1 = tslib_1.__importDefault(require("./HubspotFormContainer"));
 const b = (0, utils_1.block)('hubspot-form');
-const HubspotForm = (props) => {
+const HubspotForm = (0, react_1.forwardRef)((props, ref) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
     // hubspotEvents, // TODO: decide how to handle them
     analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
@@ -25,10 +25,10 @@ const HubspotForm = (props) => {
         onBeforeSubmit,
         onLoad,
         onSubmitError,
-        onSubmit: (e) => {
+        onSubmit: (event) => {
             handleMetrika === null || handleMetrika === void 0 ? void 0 : handleMetrika({ pixelEvents });
             handleAnalytics(analyticsEvents);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
         },
     }), [
         onBeforeLoad,
@@ -42,6 +42,7 @@ const HubspotForm = (props) => {
         onSubmitError,
     ]);
     (0, hooks_1.useHandleHubspotEvents)(handlers, formId);
-    return (react_1.default.createElement(HubspotFormContainer_1.default, { createDOMElement: createDOMElement, key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
-};
+    return (react_1.default.createElement(HubspotFormContainer_1.default, { createDOMElement: createDOMElement, key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region, ref: ref }));
+});
+HubspotForm.displayName = 'HubspotForm';
 exports.default = HubspotForm;

package/build/cjs/utils/blocks.d.ts

@@ -1,4 +1,4 @@
-import { CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
+import { Block, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
 import { ConstructorBlock } from '../models/constructor';
 export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
@@ -8,4 +8,7 @@ export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomCon
 };
 export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
+export declare const getOrderedBlocks: (blocks: Block[], headerBlockTypes?: string[]) => Block[];
+export declare const getHeaderBlock: (blocks: Block[], headerBlockTypes?: string[]) => Block | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getBlockIndexFromId: (blockId?: string) => number;

package/build/cjs/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 function getHeaderTag(size) {
     switch (size) {
@@ -46,6 +46,14 @@ const getShareUrlWithParams = (url, params = {}) => {
     });
     return result.toString();
 };
+const getOrderedBlocks = (blocks, headerBlockTypes = []) => {
+    return blocks.filter(({ type }) => !headerBlockTypes.includes(type));
+};
+exports.getOrderedBlocks = getOrderedBlocks;
+const getHeaderBlock = (blocks, headerBlockTypes = []) => {
+    return blocks.find(({ type }) => headerBlockTypes.includes(type));
+};
+exports.getHeaderBlock = getHeaderBlock;
 const getShareLink = (url, type, title, text) => {
     // https://github.com/bradvin/social-share-urls
     switch (type) {
@@ -75,3 +83,5 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getBlockIndexFromId = (blockId) => { var _a; return Number((_a = blockId === null || blockId === void 0 ? void 0 : blockId.split('-')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()); };
+exports.getBlockIndexFromId = getBlockIndexFromId;

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

@@ -3,7 +3,7 @@ import './Anchor.css';
 export declare const qaIdByDefault = "qa-anchor";
 export interface AnchorProps extends ClassNameProps {
     id: string;
-    dataQa?: string;
+    qa?: string;
 }
-declare const Anchor: ({ id, className, dataQa }: AnchorProps) => JSX.Element;
+declare const Anchor: ({ id, className, qa }: AnchorProps) => JSX.Element;
 export default Anchor;

package/build/esm/components/Anchor/Anchor.js

@@ -4,5 +4,5 @@ import { block } from '../../utils';
 import './Anchor.css';
 const b = block('Anchor');
 export const qaIdByDefault = 'qa-anchor';
-const Anchor = ({ id, className, dataQa }) => (React.createElement("div", { id: id, className: b(null, className), "data-qa": dataQa || qaIdByDefault }));
+const Anchor = ({ id, className, qa }) => (React.createElement("div", { id: id, className: b(null, className), "data-qa": qa || qaIdByDefault }));
 export default Anchor;

package/build/esm/components/BackgroundImage/BackgroundImage.js

@@ -4,8 +4,8 @@ import Image from '../Image/Image';
 import './BackgroundImage.css';
 const b = block('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, hide } = props;
-    return (React.createElement("div", { className: b(null, className), style: style },
+    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
+    return (React.createElement("div", { className: b(null, className), style: style, "data-qa": qa },
         (src || desktop) && !hide && React.createElement(Image, Object.assign({}, props, { className: b('img', imageClassName) })),
         children && React.createElement("div", { className: b('container') }, children)));
 };

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

@@ -1,4 +1,5 @@
-import { BlockBaseProps, ClassNameProps, WithChildren } from '../../models';
+import { PropsWithChildren } from 'react';
+import { BlockBaseProps, ClassNameProps } from '../../models';
 import './BlockBase.css';
-declare const BlockBase: (props: WithChildren<BlockBaseProps & ClassNameProps>) => JSX.Element;
+declare const BlockBase: (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) => JSX.Element;
 export default BlockBase;

package/build/esm/components/BlockBase/BlockBase.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BlockDecoration } from '../../customization/BlockDecoration';
 import { Col } from '../../grid';
 import { block } from '../../utils';
 import Anchor from '../Anchor/Anchor';
@@ -7,7 +8,8 @@ const b = block('block-base');
 const BlockBase = (props) => {
     const { anchor, visible, children, className, resetPaddings, qa } = props;
     return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
-        children));
+        React.createElement(BlockDecoration, null,
+            anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
+            children)));
 };
 export default BlockBase;

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

@@ -45,4 +45,7 @@ unpredictable css rules order in build */
 }
 .pc-button-block_size_xl {
   --btn-image-margin: 25px;
+}
+.pc-button-block_width_max .pc-button-block__text {
+  width: 100%;
 }

package/build/esm/components/Button/Button.js

@@ -14,7 +14,7 @@ const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const { lang, tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
     const onClick = useCallback((e) => {
@@ -24,12 +24,13 @@ const Button = (props) => {
             onClickOrigin(e);
         }
     }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
+    const buttonModifiers = { size, theme, width };
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };
     const buttonClass = img
-        ? b({ position: buttonImg.position, size, theme }, className)
-        : b({ size, theme }, className);
+        ? b(Object.assign({ position: buttonImg.position }, buttonModifiers), className)
+        : b(Object.assign({}, buttonModifiers), className);
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;
@@ -42,7 +43,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined }, buttonProps),
+    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined, width: width }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         React.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,

package/build/esm/components/FullscreenMedia/FullscreenMedia.js

@@ -8,6 +8,8 @@ const b = block('full-screen-media');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const getMediaClass = (type) => b('modal-media', { type });
+// TODO delete along with showFullScreenIcon props
+const getShowFullscreenIcon = ({ showFullScreenIcon = true, showFullscreenIcon = true }) => showFullScreenIcon && showFullscreenIcon;
 const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIcon = true, }) => {
     const [isOpened, setIsOpened] = useState(false);
     const isMobile = useContext(MobileContext);
@@ -22,7 +24,7 @@ const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIc
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullScreenIcon && showFullscreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+            getShowFullscreenIcon({ showFullScreenIcon, showFullscreenIcon }) && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
                 React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
         isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             React.createElement("div", { className: b('modal-content') },

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

@@ -5,6 +5,7 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
+    qa?: string;
 }
 declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;

package/build/esm/components/Image/Image.js

@@ -9,7 +9,7 @@ const checkWebP = (src) => {
 };
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
+    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -19,7 +19,7 @@ const Image = (props) => {
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
-    return (React.createElement("picture", { className: containerClassName },
+    return (React.createElement("picture", { className: containerClassName, "data-qa": qa },
         mobile && (React.createElement(Fragment, null,
             !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)` })),
             React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)` }))),

package/build/esm/components/Media/Image/Image.js

@@ -32,7 +32,7 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const fullscreenImage = (item) => {
+    const renderFullscreenImage = (item) => {
         const itemData = getMediaImage(item);
         return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
     };
@@ -47,13 +47,13 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? fullscreenImage(item) : imageOnly(item))));
+        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);
     }
     if (fullscreen) {
-        return fullscreenImage(image);
+        return renderFullscreenImage(image);
     }
     return isBackground ? imageBackground(image) : imageOnly(image);
 };

package/build/esm/components/Media/Media.js

@@ -7,6 +7,8 @@ import Image from './Image/Image';
 import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
+// TODO delete along with fullScreen props
+const getFullscreen = ({ fullScreen, fullscreen }) => fullScreen || fullscreen;
 export const Media = (props) => {
     const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, fullscreen, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
@@ -14,7 +16,7 @@ export const Media = (props) => {
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullScreen || fullscreen }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
         }
         if (video) {
             const videoProps = {
@@ -31,7 +33,7 @@ export const Media = (props) => {
                 hasVideoFallback,
                 setHasVideoFallback,
             };
-            if (fullScreen || fullscreen) {
+            if (getFullscreen({ fullScreen, fullscreen })) {
                 result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps)));
             }
             else {
@@ -39,7 +41,7 @@ export const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullScreen || fullscreen }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: getFullscreen({ fullScreen, fullscreen }) }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });

package/build/esm/containers/Loadable/Loadable.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Block, CustomItem, FetchLoadableData, LoadableData, LoadableProps } from '../../models';
+import { ConstructorItem, CustomItem, FetchLoadableData, LoadableData, LoadableProps } from '../../models';
 import './Loadable.css';
 export interface LoadableState {
     loading: boolean;
@@ -9,7 +9,7 @@ export interface LoadableState {
 export interface LoadableComponentsProps extends Omit<PropsWithChildren<LoadableProps>, 'source'> {
     Component: CustomItem;
     ChildComponent: CustomItem;
-    block: Block;
+    block: ConstructorItem;
     blockKey: string;
     fetch: FetchLoadableData;
 }

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

@@ -9,7 +9,7 @@ import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getCustomItems, getCustomSubBlockTypes, getThemedValue, } from '../../utils';
+import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getCustomItems, getCustomSubBlockTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
 import { ConstructorFootnotes } from './components/ConstructorFootnotes';
 import { ConstructorHeader } from './components/ConstructorItem';
@@ -26,13 +26,15 @@ export const Constructor = (props) => {
             itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(custom)),
             loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
             shouldRenderBlock,
+            customization: {
+                decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
+            },
         },
     }), [custom, shouldRenderBlock]);
     const { themeValue: theme } = useContext(ThemeValueContext);
     const hasFootnotes = footnotes.length > 0;
-    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 header = getHeaderBlock(blocks, context.headerBlockTypes);
+    const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
     const themedBackground = getThemedValue(background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
         React.createElement("div", { className: b() },

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

@@ -1,5 +1,6 @@
 import React, { Fragment, useContext } from 'react';
 import _ from 'lodash';
+import { BlockIdContext } from '../../../../context/blockIdContext';
 import { InnerContext } from '../../../../context/innerContext';
 import { getBlockKey } from '../../../../utils';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
@@ -30,9 +31,9 @@ export const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
+            itemElement = (React.createElement(ConstructorItem, { data: item, blockKey: blockId }, children));
         }
-        return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: blockId }, itemElement)) : (itemElement);
+        return (React.createElement(BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item }, itemElement)) : (itemElement)));
     };
     return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
 };

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

@@ -3,5 +3,5 @@ export interface ConstructorItemProps {
     data: ConstructorItemType;
     blockKey: string;
 }
-export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, 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,12 +1,12 @@
 import { __rest } from "tslib";
 import React, { useContext } from 'react';
-import { BlockIdContext } from '../../../../context/blockIdContext';
 import { InnerContext } from '../../../../context/innerContext';
-export const ConstructorItem = ({ data, blockKey, children }) => {
+import { BlockDecoration } from '../../../../customization/BlockDecoration';
+export const ConstructorItem = ({ data, children }) => {
     const { itemMap } = useContext(InnerContext);
     const { type } = data, rest = __rest(data, ["type"]);
     const Component = itemMap[type];
-    return (React.createElement(BlockIdContext.Provider, { value: blockKey },
-        React.createElement(Component, Object.assign({}, rest), children)));
+    return React.createElement(Component, Object.assign({}, rest), children);
 };
-export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));
+export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(BlockDecoration, { id: data.type },
+    React.createElement(ConstructorItem, { data: data, key: data.type, blockKey: blockKey })));

package/build/esm/context/innerContext/InnerContext.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ItemMap } from '../../containers/PageConstructor/PageConstructor';
-import { LoadableConfig, ShouldRenderBlock } from '../../models';
+import { CustomConfig, LoadableConfig, ShouldRenderBlock } from '../../models';
 export interface InnerContextType {
     blockTypes: string[];
     subBlockTypes: string[];
@@ -8,5 +8,6 @@ export interface InnerContextType {
     itemMap: ItemMap;
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
+    customization?: Pick<CustomConfig, 'decorators'>;
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/esm/customization/BlockDecoration.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { BlockDecorationProps } from '../models';
+export declare const BlockDecoration: (props: PropsWithChildren<BlockDecorationProps>) => JSX.Element;

package/build/esm/customization/BlockDecoration.js

@@ -0,0 +1,17 @@
+import React, { Fragment, useContext } from 'react';
+import { BlockIdContext } from '../context/blockIdContext';
+import { InnerContext } from '../context/innerContext';
+import { getBlockIndexFromId } from '../utils';
+export const BlockDecoration = (props) => {
+    var _a, _b;
+    const blockContenxtId = getBlockIndexFromId(useContext(BlockIdContext));
+    const { headerBlockTypes } = useContext(InnerContext);
+    const blockId = props.id || blockContenxtId;
+    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
+    const block = React.createElement(Fragment, null, props.children);
+    const blockDecorators = (_b = (_a = useContext(InnerContext).customization) === null || _a === void 0 ? void 0 : _a.decorators) === null || _b === void 0 ? void 0 : _b.block;
+    if (!blockDecorators) {
+        return block;
+    }
+    return blockDecorators.reduce((children, decorator) => (React.createElement(Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
+};

package/build/esm/editor/Components/AddBlock/AddBlock.css

@@ -0,0 +1,82 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-add-block {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 110;
+}
+.pc-add-block__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.2s;
+  width: 76px;
+  height: 40px;
+  color: var(--yc-color-text-inverted-primary);
+  background-color: var(--yc-color-promo-base-neon);
+  border-radius: 8px;
+}
+.pc-add-block__button:hover {
+  transform: scale(1.05);
+}
+.pc-add-block__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.pc-add-block__popup {
+  min-width: 420px;
+  border-radius: var(--pc-border-radius);
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06), 0px 4px 24px rgba(0, 0, 0, 0.06);
+}
+.pc-add-block__popup .pc-add-block__search {
+  padding: 20px 20px 0;
+}
+.pc-add-block__popup .pc-add-block__blocks {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  height: 296px;
+  max-height: 296px;
+  overflow-y: auto;
+}
+.pc-add-block__popup .pc-add-block__block {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.2s;
+  margin-top: 20px;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.pc-add-block__popup .pc-add-block__block:hover {
+  transform: scale(1.05);
+}
+.pc-add-block__popup .pc-add-block__block:first-child {
+  margin-top: 0;
+}
+.pc-add-block__popup .pc-add-block__preview {
+  width: 148px;
+  height: 74px;
+  border-radius: var(--pc-border-radius);
+  margin-right: 16px;
+}
+.pc-add-block__popup .pc-add-block__title {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-add-block__popup .pc-add-block__title,
+.pc-add-block__popup .pc-add-block__description {
+  margin: 0;
+}

package/build/esm/editor/Components/AddBlock/AddBlock.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { Block } from '../../../models';
+import './AddBlock.css';
+export interface AddBlockProps {
+    onAdd: (data: Block) => void;
+}
+declare const AddBlock: ({ onAdd }: PropsWithChildren<AddBlockProps>) => JSX.Element;
+export default AddBlock;

package/build/esm/editor/Components/AddBlock/AddBlock.js

@@ -0,0 +1,41 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { Plus } from '@gravity-ui/icons';
+import { Popup, TextInput } from '@gravity-ui/uikit';
+import { blockMap } from '../../../constructor-items';
+import { block } from '../../../utils';
+import EditorBlocksData from '../../data';
+import './AddBlock.css';
+const b = block('add-block');
+const sortedBlockNames = Object.keys(blockMap).sort();
+const AddBlock = ({ onAdd }) => {
+    const [isOpened, setIsOpened] = useState(false);
+    const [search, setSearch] = useState('');
+    const ref = useRef(null);
+    const blocks = useMemo(() => sortedBlockNames.filter((blockName) => EditorBlocksData[blockName].meta.title
+        .toLocaleLowerCase()
+        .startsWith(search.toLocaleLowerCase())), [search]);
+    return (React.createElement("div", { className: b(), ref: ref },
+        React.createElement("button", { className: b('button'), onClick: () => {
+                setIsOpened(!isOpened);
+                setSearch('');
+            } },
+            React.createElement(Plus, { className: b('icon') })),
+        isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, className: b('popup'), placement: "top", offset: [0, 24], onOutsideClick: () => setIsOpened(false) },
+            React.createElement("div", { className: b('search') },
+                React.createElement(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
+            React.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
+                var _a;
+                const blockData = EditorBlocksData[blockName];
+                const Preview = blockData === null || blockData === void 0 ? void 0 : blockData.preview;
+                return (React.createElement("div", { key: blockName, className: b('block'), onClick: () => {
+                        onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
+                        setIsOpened(false);
+                    } },
+                    React.createElement("div", { className: b('preview') },
+                        React.createElement(Preview, null)),
+                    React.createElement("div", { className: b('info') },
+                        React.createElement("h4", { className: b('title') }, blockData.meta.title),
+                        ((_a = blockData === null || blockData === void 0 ? void 0 : blockData.meta) === null || _a === void 0 ? void 0 : _a.description) && (React.createElement("p", { className: b('description') }, blockData.meta.description)))));
+            }))))));
+};
+export default AddBlock;

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

@@ -0,0 +1,47 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-edit-block {
+  cursor: pointer;
+  position: relative;
+}
+.pc-edit-block__controls {
+  position: absolute;
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+  top: -20px;
+  left: -20px;
+  border-radius: 8px;
+  z-index: 100;
+}
+.pc-edit-block__controls_isHeader {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.pc-edit-block__controls_active {
+  border: 4px solid var(--yc-color-promo-base-neon);
+}
+.pc-edit-block__controls-content {
+  display: flex;
+  position: absolute;
+  bottom: -44px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pc-edit-block__control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.2s;
+  width: 24px;
+  height: 24px;
+  border-radius: calc(8px / 2);
+  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;
+}

package/build/esm/editor/Components/EditBlock/EditBlock.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EditBlockProps } from '../../../editor/types';
+import './EditBlock.css';
+declare const _default: React.MemoExoticComponent<({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }: EditBlockProps) => JSX.Element>;
+export default _default;