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

package/build/cjs/editor/data/previews/default-preview.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../../../utils/svg");
+const DefaultPreview = (props) => (react_1.default.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "14.7675", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "14.7675", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#E7E7E7" }),
+    react_1.default.createElement("rect", { x: "33.6977", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+exports.default = DefaultPreview;

package/build/cjs/editor/data/previews/header-block.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Header: React.FC<React.SVGProps<SVGSVGElement>>;
+export default Header;

package/build/cjs/editor/data/previews/header-block.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../../../utils/svg");
+const Header = (props) => (react_1.default.createElement("svg", Object.assign({ width: "150", height: "76", viewBox: "0 0 150 76", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("rect", { x: "1", y: "1", width: "148", height: "74", rx: "8", fill: "white" }),
+    react_1.default.createElement("rect", { x: "4.44174", y: "9.60464", width: "141.116", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "43.1628", y: "21.6512", width: "28.3953", height: "6.88372", rx: "0.860465", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "31.9767", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "37.1395", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "42.3023", width: "56.7907", height: "3.44186", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "14.7674", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "white" }),
+    react_1.default.createElement("rect", { x: "33.6976", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "52.6279", y: "49.186", width: "18.9302", height: "5.16279", rx: "0.860465", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "78.4418", y: "9.60464", width: "56.7907", height: "56.7907", rx: "5.16279", fill: "#A967FF" }),
+    react_1.default.createElement("rect", { x: "0.5", y: "0.5", width: "149", height: "75", rx: "8.5", stroke: "black", strokeOpacity: "0.1" })));
+exports.default = Header;

package/build/cjs/editor/index.d.ts

@@ -0,0 +1,2 @@
+export { Editor } from './Containers/Editor';
+export * from './types';

package/build/cjs/editor/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const tslib_1 = require("tslib");
+var Editor_1 = require("./Containers/Editor");
+Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return Editor_1.Editor; } });
+tslib_1.__exportStar(require("./types"), exports);

package/build/cjs/editor/store/index.d.ts

@@ -0,0 +1,15 @@
+import { Block } from '../../models';
+import { EditorProps } from '../types';
+export type EditorBlockId = number | string;
+export declare function useEditorState({ content: intialContent, custom }: Omit<EditorProps, 'children'>): {
+    content: import("../../models").PageContent;
+    editControlsProps: {
+        activeBlockId: import("./reducer").EditorBlockId;
+        orderedBlocksCount: number;
+        onDelete: (id: EditorBlockId) => void;
+        onSelect: (id: EditorBlockId) => void;
+        onCopy: (index: number) => void;
+        onOrderChange: (oldIndex: number, newIndex: number) => void;
+    };
+    onAdd: (block: Block) => void;
+};

package/build/cjs/editor/store/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorState = void 0;
+const react_1 = require("react");
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const reducer_1 = require("./reducer");
+const utils_2 = require("./utils");
+function useEditorState({ content: intialContent, custom }) {
+    const headerBlockTypes = (0, react_1.useMemo)(() => [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)], [custom]);
+    const reducer = (0, react_1.useMemo)(() => (0, reducer_1.getReducer)(headerBlockTypes), [headerBlockTypes]);
+    const [{ activeBlockId, content, orderedBlocksCount }, dispatch] = (0, react_1.useReducer)(reducer, {
+        activeBlockId: 0,
+        orderedBlocksCount: (0, utils_1.getOrderedBlocks)(intialContent.blocks, headerBlockTypes).length,
+        content: (0, utils_2.addEditorProps)(intialContent),
+    });
+    return (0, react_1.useMemo)(() => {
+        return {
+            content,
+            editControlsProps: {
+                activeBlockId,
+                orderedBlocksCount,
+                onDelete: (id) => dispatch({ type: reducer_1.DELETE_BLOCK, payload: id }),
+                onSelect: (id) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: id }),
+                onCopy: (index) => dispatch({ type: reducer_1.COPY_BLOCK, payload: index }),
+                onOrderChange: (oldIndex, newIndex) => dispatch({ type: reducer_1.ORDER_BLOCK, payload: { oldIndex, newIndex } }),
+            },
+            onAdd: (block) => dispatch({ type: reducer_1.ADD_BLOCK, payload: block }),
+        };
+    }, [content, activeBlockId, orderedBlocksCount]);
+}
+exports.useEditorState = useEditorState;

package/build/cjs/editor/store/reducer.d.ts

@@ -0,0 +1,41 @@
+import { Block, CustomConfig, PageContent } from '../../models';
+export type EditorBlockId = number | string;
+interface EditorState {
+    content: PageContent;
+    activeBlockId: EditorBlockId;
+    orderedBlocksCount: number;
+    custom?: CustomConfig;
+}
+interface OrderBlockParams {
+    oldIndex: number;
+    newIndex: number;
+}
+export declare const SELECT_BLOCK = "SELECT_BLOCK";
+export declare const DELETE_BLOCK = "DELETE_BLOCK";
+export declare const COPY_BLOCK = "COPY_BLOCK";
+export declare const ADD_BLOCK = "ADD_BLOCK";
+export declare const SET_REGION = "SET_REGION";
+export declare const ORDER_BLOCK = "ORDER_BLOCK";
+interface SelectBlock {
+    type: typeof SELECT_BLOCK;
+    payload: EditorBlockId;
+}
+interface DeleteBlock {
+    type: typeof DELETE_BLOCK;
+    payload: EditorBlockId;
+}
+interface CopyBlock {
+    type: typeof COPY_BLOCK;
+    payload: number;
+}
+interface AddBlock {
+    type: typeof ADD_BLOCK;
+    payload: Block;
+}
+interface OrderBlock {
+    type: typeof ORDER_BLOCK;
+    payload: OrderBlockParams;
+}
+export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock;
+export declare const getReducer: (headerBlockTypes: string[]) => (state: EditorState, action: EditorAction) => EditorState;
+export {};

package/build/cjs/editor/store/reducer.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReducer = exports.ORDER_BLOCK = exports.SET_REGION = exports.ADD_BLOCK = exports.COPY_BLOCK = exports.DELETE_BLOCK = exports.SELECT_BLOCK = void 0;
+const utils_1 = require("../../utils");
+const utils_2 = require("./utils");
+// actions
+exports.SELECT_BLOCK = 'SELECT_BLOCK';
+exports.DELETE_BLOCK = 'DELETE_BLOCK';
+exports.COPY_BLOCK = 'COPY_BLOCK';
+exports.ADD_BLOCK = 'ADD_BLOCK';
+exports.SET_REGION = 'SET_REGION';
+exports.ORDER_BLOCK = 'ORDER_BLOCK';
+// reducer
+const getReducer = (headerBlockTypes) => (state, action) => {
+    const { content } = state;
+    const header = (0, utils_1.getHeaderBlock)(content.blocks, headerBlockTypes);
+    const orderedBlocks = (0, utils_1.getOrderedBlocks)(content.blocks, headerBlockTypes);
+    const withHeader = (blocks) => [header, ...blocks].filter(Boolean);
+    const getNewState = (blocks, activeBlockId) => (Object.assign(Object.assign({}, state), { content: Object.assign(Object.assign({}, content), { blocks }), activeBlockId, orderedBlocksCount: orderedBlocks.length }));
+    switch (action.type) {
+        case exports.SELECT_BLOCK:
+            return getNewState(content.blocks, action.payload);
+        case exports.DELETE_BLOCK: {
+            const blockId = action.payload;
+            return getNewState(typeof blockId === 'string'
+                ? content.blocks.filter(({ type }) => type !== blockId)
+                : withHeader(orderedBlocks.filter((_block, index) => index !== blockId)), -1);
+        }
+        case exports.COPY_BLOCK: {
+            const index = action.payload;
+            return getNewState(withHeader((0, utils_2.duplicateBlock)(orderedBlocks, index)), index + 1);
+        }
+        case exports.ADD_BLOCK: {
+            let blocks;
+            let activeBlockId;
+            const block = action.payload;
+            if (headerBlockTypes.includes(block.type)) {
+                blocks = header ? blocks : [block, ...orderedBlocks];
+                activeBlockId = block.type;
+            }
+            else {
+                const newBlockIndex = (0, utils_2.getNewBlockIndex)(state.activeBlockId, orderedBlocks.length);
+                blocks = withHeader((0, utils_2.addBlock)(orderedBlocks, block, newBlockIndex));
+                activeBlockId = newBlockIndex;
+            }
+            if (blocks) {
+                return getNewState(blocks, activeBlockId);
+            }
+            return state;
+        }
+        case exports.ORDER_BLOCK: {
+            const { oldIndex, newIndex } = action.payload;
+            return getNewState(withHeader((0, utils_2.changeBlocksOrder)(orderedBlocks, oldIndex, newIndex)), newIndex);
+        }
+        default:
+            return state;
+    }
+};
+exports.getReducer = getReducer;

package/build/cjs/editor/store/utils.d.ts

@@ -0,0 +1,13 @@
+import { Block, PageContent } from '../../models';
+import { EditorBlockId } from './reducer';
+export declare const changeBlocksOrder: (array: Block[], oldIndex: number, newIndex: number) => Block[];
+export declare const duplicateBlock: (array: Block[], index: number) => Block[];
+export declare const getNewBlockIndex: (id: EditorBlockId, orderedBlocksCount: number) => number;
+export declare const addBlock: (array: Block[], block: Block, index: number) => Block[];
+export declare const addEditorProps: (content: PageContent) => {
+    animated: boolean;
+    blocks: Block[];
+    menu?: import("../../models").Menu | undefined;
+    background?: import("../../models").ThemedMediaProps | undefined;
+    footnotes?: string[] | undefined;
+};

package/build/cjs/editor/store/utils.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addEditorProps = exports.addBlock = exports.getNewBlockIndex = exports.duplicateBlock = exports.changeBlocksOrder = void 0;
+const changeBlocksOrder = (array, oldIndex, newIndex) => {
+    const result = [...array];
+    const element = result.splice(oldIndex, 1)[0];
+    result.splice(newIndex, 0, element);
+    return result;
+};
+exports.changeBlocksOrder = changeBlocksOrder;
+const duplicateBlock = (array, index) => {
+    const result = [...array];
+    result.splice(index + 1, 0, result[index]);
+    return result;
+};
+exports.duplicateBlock = duplicateBlock;
+const getNewBlockIndex = (id, orderedBlocksCount) => {
+    if (id === -1) {
+        return orderedBlocksCount;
+    }
+    // id === 'string' - header block
+    return typeof id === 'string' ? 0 : id + 1;
+};
+exports.getNewBlockIndex = getNewBlockIndex;
+const addBlock = (array, block, index) => {
+    const result = [...array];
+    result.splice(index, 0, block);
+    return result;
+};
+exports.addBlock = addBlock;
+const addEditorProps = (content) => {
+    return Object.assign(Object.assign({}, content), { animated: false });
+};
+exports.addEditorProps = addEditorProps;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { PageConstructorProps } from '../../containers/PageConstructor';
+import { BlockDecoratorProps, PageData } from '../../models';
+export type EditorBlockId = number | string;
+export interface EditorProps extends Required<Pick<PageConstructorProps, 'content'>>, Partial<Omit<PageConstructorProps, 'content'>> {
+    children: (props: Partial<PageConstructorProps>) => React.ReactNode;
+    onChange?: (data: PageData) => void;
+}
+export interface EditBlockEditorProps {
+    activeBlockId: EditorBlockId;
+    orderedBlocksCount: number;
+    onSelect: (index: EditorBlockId) => void;
+    onDelete: (index: EditorBlockId) => void;
+    onCopy: (index: number) => void;
+    onOrderChange: (index: number, newIndex: number) => void;
+}
+export type EditBlockProps = EditBlockEditorProps & BlockDecoratorProps;

package/build/cjs/editor/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/editor/utils/index.d.ts

@@ -0,0 +1,11 @@
+import { BlockDecorator, CustomConfig } from '../../models';
+export declare const formatBlockName: (name: string) => string;
+export declare const addCustomDecorator: (decorator: BlockDecorator, custom?: CustomConfig) => {
+    decorators: {
+        block: ((props: import("../../models").BlockDecoratorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+    };
+    blocks?: import("../../models").CustomItems | undefined;
+    subBlocks?: import("../../models").CustomItems | undefined;
+    headers?: import("../../models").CustomItems | undefined;
+    loadable?: import("../../models").LoadableConfig | undefined;
+};

package/build/cjs/editor/utils/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCustomDecorator = exports.formatBlockName = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const formatBlockName = (name) => lodash_1.default.capitalize(name).replace(/(block|-)/g, ' ');
+exports.formatBlockName = formatBlockName;
+const addCustomDecorator = (decorator, custom = {}) => {
+    const decorators = custom.decorators || {};
+    return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, decorators), { block: [...(decorators.block || []), decorator] }) });
+};
+exports.addCustomDecorator = addCustomDecorator;

package/build/cjs/grid/Col/Col.d.ts

@@ -7,4 +7,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     dataQa?: string;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "dataQa" | "reset" | "visible" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "reset" | "visible" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/hooks/useMetrika.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMetrika = void 0;
 const react_1 = require("react");
 const metrikaContext_1 = require("../context/metrikaContext");
-const models_1 = require("../models");
 const guards_1 = require("../models/guards");
 // eslint-disable-next-line valid-jsdoc
 /**
@@ -29,12 +28,6 @@ const useMetrika = () => {
             else {
                 metrika.reachGoals(metrikaGoals);
             }
-            if (!pixelEvents && pixel) {
-                pixel.trackStandard(models_1.PixelEventType.SubmitApplication, {
-                    content_category: 'custom',
-                    content_ids: Array.isArray(metrikaGoals) ? metrikaGoals : [metrikaGoals],
-                });
-            }
         }
         if (pixel && pixelEvents) {
             if (isButtonPixel(pixelEvents)) {

package/build/cjs/internal-typings/global.d.ts

@@ -10,22 +10,17 @@ declare module '*.svg' {
     export default path;
 }
 
-interface CreateFormProps {
-    portalId: string;
-    formId: string;
-    region?: string;
-    target?: string;
-    cssClass?: string;
-    formInstanceId?: string;
-}
+declare module '*.md';
 
-interface Window {
-    hbspt?: {
-        forms: {
-            create: (args: CreateFormProps) => unknown;
-        };
-    };
-    ymaps: Ymaps;
+declare namespace Hbspt {
+    interface CreateFormProps {
+        portalId: string;
+        formId: string;
+        region?: string;
+        target?: string;
+        cssClass?: string;
+        formInstanceId?: string;
+    }
 }
 
 declare namespace Ymaps {
@@ -63,4 +58,11 @@ declare namespace Ymaps {
     }
 }
 
-declare module '*.md';
+interface Window {
+    hbspt?: {
+        forms: {
+            create: (args: Hbspt.CreateFormProps) => unknown;
+        };
+    };
+    ymaps: Ymaps;
+}

package/build/cjs/models/constructor-items/blocks.d.ts

@@ -8,8 +8,6 @@ export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
     SliderBlock = "slider-block",
-    CalculatorBlock = "calculator-block",
-    ServiceDemoBlock = "service-demo-block",
     QuestionsBlock = "questions-block",
     BannerBlock = "banner-block",
     CompaniesBlock = "companies-block",
@@ -52,7 +50,6 @@ export interface LoadableProps {
 export interface LoadableChildren {
     loadable?: LoadableProps;
 }
-export type ServiceDemoProps = Animatable;
 export declare enum SliderBreakpointNames {
     Sm = "sm",
     Md = "md",
@@ -114,7 +111,6 @@ export interface HeaderBlockProps {
     breadcrumbs?: HeaderBreadCrumbsProps;
     status?: JSX.Element;
 }
-export type CalculatorProps = Animatable;
 export interface SimpleBlockProps extends Animatable, Childable {
     title: TitleBaseProps;
     description: string;
@@ -317,15 +313,9 @@ export interface ShareBlockProps {
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;
 } & HeaderBlockProps;
-export type CalculatorBlockModel = {
-    type: BlockType.CalculatorBlock;
-} & CalculatorProps;
 export type SliderBlockModel = {
     type: BlockType.SliderBlock;
 } & SliderProps;
-export type ServiceDemoBlockModel = {
-    type: BlockType.ServiceDemoBlock;
-} & ServiceDemoProps;
 export type ExtendedFeaturesBlockModel = {
     type: BlockType.ExtendedFeaturesBlock;
 } & ExtendedFeaturesProps;
@@ -386,6 +376,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
+type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/build/cjs/models/constructor-items/blocks.js

@@ -6,8 +6,6 @@ var BlockType;
     BlockType["PromoFeaturesBlock"] = "promo-features-block";
     BlockType["ExtendedFeaturesBlock"] = "extended-features-block";
     BlockType["SliderBlock"] = "slider-block";
-    BlockType["CalculatorBlock"] = "calculator-block";
-    BlockType["ServiceDemoBlock"] = "service-demo-block";
     BlockType["QuestionsBlock"] = "questions-block";
     BlockType["BannerBlock"] = "banner-block";
     BlockType["CompaniesBlock"] = "companies-block";

package/build/cjs/models/constructor-items/common.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
@@ -99,6 +99,7 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
+    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
@@ -131,11 +132,10 @@ export interface FileLinkProps extends ClassNameProps {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
     text: string;
     url: string;
     primary?: boolean;
-    size?: ButtonSize;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;

package/build/cjs/models/constructor.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Animatable, Block, ConstructorItem, ThemedMediaProps, WithChildren } from './';
+import { Animatable, Block, BlockDecoratorProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
 export interface PageData {
     content: PageContent;
 }
@@ -41,5 +41,8 @@ export interface CustomConfig {
     subBlocks?: CustomItems;
     headers?: CustomItems;
     loadable?: LoadableConfig;
+    decorators?: {
+        block?: ((props: BlockDecoratorProps) => React.ReactElement)[];
+    };
 }
 export {};

package/build/cjs/models/customization.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export interface BlockDecorationProps extends PropsWithChildren {
+    id?: string;
+}
+export interface BlockDecoratorProps extends PropsWithChildren {
+    id: string | number;
+    isHeader?: boolean;
+}
+export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;

package/build/cjs/models/customization.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/models/index.d.ts

@@ -5,3 +5,4 @@ export * from './components';
 export * from './guards';
 export * from './react';
 export * from './navigation';
+export * from './customization';

package/build/cjs/models/index.js

@@ -8,3 +8,4 @@ tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./guards"), exports);
 tslib_1.__exportStar(require("./react"), exports);
 tslib_1.__exportStar(require("./navigation"), exports);
+tslib_1.__exportStar(require("./customization"), exports);

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { HubspotFormProps } from '../../models';
 type HubspotFormContainerPropsKeys = 'className' | 'formId' | 'formInstanceId' | 'portalId' | 'region' | 'formClassName' | 'createDOMElement';
 type HubspotFormContainerProps = Pick<HubspotFormProps, HubspotFormContainerPropsKeys>;
-declare const HubspotFormContainer: (props: HubspotFormContainerProps) => JSX.Element;
+declare const HubspotFormContainer: React.ForwardRefExoticComponent<HubspotFormContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default HubspotFormContainer;

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

@@ -4,10 +4,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("../../hooks");
 const loadHubspotScript_1 = tslib_1.__importDefault(require("./loadHubspotScript"));
-const HubspotFormContainer = (props) => {
+const HubspotFormContainer = (0, react_1.forwardRef)((props, ref) => {
     const { className, formId, formInstanceId, portalId, region, formClassName, createDOMElement, } = props;
     const containerRef = (0, react_1.useRef)(null);
     const hsContainerRef = (0, react_1.useRef)();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (0, react_1.useImperativeHandle)(ref, () => containerRef.current);
     const containerId = formInstanceId
         ? `hubspot-form-${formId}-${formInstanceId}`
         : `hubspot-form-${formId}`;
@@ -45,5 +47,6 @@ const HubspotFormContainer = (props) => {
         };
     });
     return react_1.default.createElement("div", { className: className, id: containerId, ref: containerRef });
-};
+});
+HubspotFormContainer.displayName = 'HubspotFormContainer';
 exports.default = HubspotFormContainer;

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;