@gravity-ui/page-constructor 3.3.0 → 3.5.0-alpha.0

package/build/cjs/editor/{components → Components}/AddBlock/AddBlock.js

@@ -9,14 +9,14 @@ const utils_1 = require("../../../utils");
 const data_1 = tslib_1.__importDefault(require("../../data"));
 const b = (0, utils_1.block)('add-block');
 const sortedBlockNames = Object.keys(constructor_items_1.blockMap).sort();
-const AddBlock = ({ onAdd, className }) => {
+const AddBlock = ({ onAdd }) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [search, setSearch] = (0, react_1.useState)('');
     const ref = (0, react_1.useRef)(null);
     const blocks = (0, react_1.useMemo)(() => sortedBlockNames.filter((blockName) => data_1.default[blockName].meta.title
         .toLocaleLowerCase()
         .startsWith(search.toLocaleLowerCase())), [search]);
-    return (react_1.default.createElement("div", { className: b(null, className), ref: ref },
+    return (react_1.default.createElement("div", { className: b(), ref: ref },
         react_1.default.createElement("button", { className: b('button'), onClick: () => {
                 setIsOpened(!isOpened);
                 setSearch('');

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

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

package/build/cjs/editor/Components/EditBlock/EditBlock.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('edit-block');
+const EditBlock = ({ id, isHeader, activeBlockId, onDelete, onSelect, onCopy, onOrderChange, children, orderedBlocksCount, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const controlsActive = activeBlockId === id;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (controlsActive && ref.current) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, [controlsActive]);
+    return (react_1.default.createElement("div", { className: b(), onClick: () => {
+            onSelect(id);
+        }, ref: ref },
+        react_1.default.createElement("div", { className: b('controls', { active: controlsActive, isHeader }) }, controlsActive && (react_1.default.createElement("div", { className: b('controls-content'), onClick: (e) => e.stopPropagation() },
+            typeof id === 'number' && (react_1.default.createElement(react_1.Fragment, null,
+                id > 0 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id - 1) },
+                    react_1.default.createElement(icons_1.ChevronUp, null))),
+                id < orderedBlocksCount - 1 && (react_1.default.createElement("div", { className: b('control'), onClick: () => onOrderChange(id, id + 1) },
+                    react_1.default.createElement(icons_1.ChevronDown, null))),
+                react_1.default.createElement("div", { className: b('control'), onClick: () => onCopy(id) },
+                    react_1.default.createElement(icons_1.Copy, null)))),
+            react_1.default.createElement("div", { className: b('control'), onClick: () => onDelete(id) },
+                react_1.default.createElement(icons_1.TrashBin, null))))),
+        children));
+};
+exports.default = react_1.default.memo(EditBlock);

package/build/cjs/editor/Containers/Editor.d.ts

@@ -0,0 +1,2 @@
+import { EditorProps } from '../types';
+export declare const Editor: ({ children, ...rest }: EditorProps) => JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const AddBlock_1 = tslib_1.__importDefault(require("../Components/AddBlock/AddBlock"));
+const EditBlock_1 = tslib_1.__importDefault(require("../Components/EditBlock/EditBlock"));
+const store_1 = require("../store");
+const utils_1 = require("../utils");
+const Editor = (_a) => {
+    var { children } = _a, rest = tslib_1.__rest(_a, ["children"]);
+    const { content, onAdd, editControlsProps } = (0, store_1.useEditorState)(rest);
+    const constructorProps = (0, react_1.useMemo)(() => {
+        const editControlsDecorator = (props) => (react_1.default.createElement(EditBlock_1.default, Object.assign({}, props, editControlsProps)));
+        return {
+            content,
+            custom: (0, utils_1.addCustomDecorator)(editControlsDecorator, rest.custom),
+        };
+    }, [editControlsProps, content, rest.custom]);
+    return (react_1.default.createElement("div", null,
+        children(constructorProps),
+        react_1.default.createElement(AddBlock_1.default, { onAdd: onAdd })));
+};
+exports.Editor = Editor;

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

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

package/build/cjs/editor/index.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const tslib_1 = require("tslib");
-var Editor_1 = require("./containers/Editor/Editor");
+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

@@ -1,12 +1,15 @@
-import { Block, BlockDecorationProps, PageContent } from '../../models';
-import { EditBlockProps, EditorProps } from '../types';
+import { Block } from '../../models';
+import { EditorProps } from '../types';
 export type EditorBlockId = number | string;
 export declare function useEditorState({ content: intialContent, custom }: Omit<EditorProps, 'children'>): {
-    activeBlockIndex: number;
-    content: PageContent;
-    errorBoundaryState: number;
-    injectEditBlockProps: ({ type, index: relativeIndex, children, }: BlockDecorationProps) => EditBlockProps;
+    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;
-    onSelect: (index: number) => void;
-    onContentUpdate: (newContent: PageContent) => void;
 };

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

@@ -4,75 +4,29 @@ exports.useEditorState = void 0;
 const react_1 = require("react");
 const models_1 = require("../../models");
 const utils_1 = require("../../utils");
-const EditBlock_1 = require("../components/EditBlock/EditBlock");
 const reducer_1 = require("./reducer");
 const utils_2 = require("./utils");
 function useEditorState({ content: intialContent, custom }) {
-    const [{ activeBlockIndex, content, errorBoundaryState }, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, {
-        activeBlockIndex: 0,
-        errorBoundaryState: 0,
+    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)(() => {
-        const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)];
-        const contentHasHeader = Boolean((0, utils_1.getHeaderBlock)(content.blocks, headerBlockTypes));
-        const checkIsHeader = (type) => headerBlockTypes.includes(type);
-        const onAdd = (block) => {
-            const isHeader = checkIsHeader(block.type);
-            if (contentHasHeader && isHeader) {
-                //TODO: add warning that it should be only one header block
-                return;
-            }
-            // eslint-disable-next-line no-nested-ternary
-            const index = isHeader
-                ? 0
-                : activeBlockIndex === -1
-                    ? content.blocks.length
-                    : activeBlockIndex + 1;
-            dispatch({ type: reducer_1.ADD_BLOCK, payload: { block, index } });
-        };
-        const onSelect = (index) => dispatch({ type: reducer_1.SELECT_BLOCK, payload: index });
-        const onContentUpdate = (newContent) => dispatch({ type: reducer_1.UPDATE_CONTENT, payload: newContent });
-        const injectEditBlockProps = ({ type, index: relativeIndex = 0, children, }) => {
-            const orderedBlocksStartIndex = contentHasHeader ? 1 : 0;
-            const isHeader = checkIsHeader(type);
-            const index = isHeader ? 0 : relativeIndex + orderedBlocksStartIndex;
-            const isActive = activeBlockIndex === index;
-            const actions = {
-                [EditBlock_1.EditBlockControls.Delete]: () => dispatch({ type: reducer_1.DELETE_BLOCK, payload: index }),
-            };
-            if (!isHeader) {
-                actions[EditBlock_1.EditBlockControls.Copy] = () => dispatch({ type: reducer_1.COPY_BLOCK, payload: index });
-                if (index > orderedBlocksStartIndex) {
-                    actions[EditBlock_1.EditBlockControls.Up] = () => dispatch({
-                        type: reducer_1.ORDER_BLOCK,
-                        payload: { oldIndex: index, newIndex: index - 1 },
-                    });
-                }
-                if (index < content.blocks.length - 1) {
-                    actions[EditBlock_1.EditBlockControls.Down] = () => dispatch({
-                        type: reducer_1.ORDER_BLOCK,
-                        payload: { oldIndex: index, newIndex: index + 1 },
-                    });
-                }
-            }
-            return {
-                children,
-                isHeader,
-                isActive,
-                actions,
-                onSelect: () => onSelect(index),
-            };
-        };
         return {
-            activeBlockIndex,
             content,
-            errorBoundaryState,
-            injectEditBlockProps,
-            onAdd,
-            onSelect,
-            onContentUpdate,
+            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, activeBlockIndex, errorBoundaryState, custom]);
+    }, [content, activeBlockId, orderedBlocksCount]);
 }
 exports.useEditorState = useEditorState;

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

@@ -1,32 +1,28 @@
-import { Block, PageContent } from '../../models';
+import { Block, CustomConfig, PageContent } from '../../models';
 export type EditorBlockId = number | string;
 interface EditorState {
     content: PageContent;
-    activeBlockIndex: number;
-    errorBoundaryState: number;
+    activeBlockId: EditorBlockId;
+    orderedBlocksCount: number;
+    custom?: CustomConfig;
 }
 interface OrderBlockParams {
     oldIndex: number;
     newIndex: number;
 }
-interface AddBlockParams {
-    block: Block;
-    index: 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";
-export declare const UPDATE_CONTENT = "UPDATE_CONTENT";
 interface SelectBlock {
     type: typeof SELECT_BLOCK;
-    payload: number;
+    payload: EditorBlockId;
 }
 interface DeleteBlock {
     type: typeof DELETE_BLOCK;
-    payload: number;
+    payload: EditorBlockId;
 }
 interface CopyBlock {
     type: typeof COPY_BLOCK;
@@ -34,16 +30,12 @@ interface CopyBlock {
 }
 interface AddBlock {
     type: typeof ADD_BLOCK;
-    payload: AddBlockParams;
+    payload: Block;
 }
 interface OrderBlock {
     type: typeof ORDER_BLOCK;
     payload: OrderBlockParams;
 }
-interface UpdateContent {
-    type: typeof UPDATE_CONTENT;
-    payload: PageContent;
-}
-export type EditorAction = SelectBlock | DeleteBlock | CopyBlock | AddBlock | OrderBlock | UpdateContent;
-export declare const reducer: (state: EditorState, action: EditorAction) => EditorState;
+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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducer = exports.UPDATE_CONTENT = 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");
+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';
@@ -9,34 +10,50 @@ exports.COPY_BLOCK = 'COPY_BLOCK';
 exports.ADD_BLOCK = 'ADD_BLOCK';
 exports.SET_REGION = 'SET_REGION';
 exports.ORDER_BLOCK = 'ORDER_BLOCK';
-exports.UPDATE_CONTENT = 'UPDATE_CONTENT';
 // reducer
-const reducer = (state, action) => {
+const getReducer = (headerBlockTypes) => (state, action) => {
     const { content } = state;
-    const getNewState = (blocks, activeBlockIndex) => (Object.assign(Object.assign({}, state), { content: Object.assign(Object.assign({}, content), { blocks }), activeBlockIndex }));
+    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.UPDATE_CONTENT:
-            return Object.assign(Object.assign({}, state), { content: action.payload, errorBoundaryState: (0, utils_1.getErrorBoundaryState)(state.errorBoundaryState) });
         case exports.SELECT_BLOCK:
-            return Object.assign(Object.assign({}, state), { activeBlockIndex: action.payload });
+            return getNewState(content.blocks, action.payload);
         case exports.DELETE_BLOCK: {
             const blockId = action.payload;
-            return getNewState(content.blocks.filter((_block, index) => index !== blockId), -1);
+            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((0, utils_1.duplicateBlock)(content.blocks, index), index + 1);
+            return getNewState(withHeader((0, utils_2.duplicateBlock)(orderedBlocks, index)), index + 1);
         }
         case exports.ADD_BLOCK: {
-            const { block, index } = action.payload;
-            return getNewState((0, utils_1.addBlock)(content.blocks, block, index), index);
+            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((0, utils_1.changeBlocksOrder)(content.blocks, oldIndex, newIndex), newIndex);
+            return getNewState(withHeader((0, utils_2.changeBlocksOrder)(orderedBlocks, oldIndex, newIndex)), newIndex);
         }
         default:
             return state;
     }
 };
-exports.reducer = reducer;
+exports.getReducer = getReducer;

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

@@ -10,4 +10,3 @@ export declare const addEditorProps: (content: PageContent) => {
     menu?: import("../../models").Menu | undefined;
     background?: import("../../models").ThemedMediaProps | undefined;
 };
-export declare const getErrorBoundaryState: (prevState: number) => number;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getErrorBoundaryState = exports.addEditorProps = exports.addBlock = exports.getNewBlockIndex = exports.duplicateBlock = exports.changeBlocksOrder = void 0;
+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];
@@ -32,5 +32,3 @@ const addEditorProps = (content) => {
     return Object.assign(Object.assign({}, content), { animated: false });
 };
 exports.addEditorProps = addEditorProps;
-const getErrorBoundaryState = (prevState) => prevState === Number.MAX_SAFE_INTEGER ? 0 : prevState + 1;
-exports.getErrorBoundaryState = getErrorBoundaryState;

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

@@ -1,19 +1,17 @@
 /// <reference types="react" />
 import { PageConstructorProps } from '../../containers/PageConstructor';
-import { BlockDecorationProps, PageContent } from '../../models';
-import { SchemaCustomConfig } from '../../schema';
-import { EditBlockActions } from '../components/EditBlock/EditBlock';
+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: PageContent) => void;
-    customSchema?: SchemaCustomConfig;
+    onChange?: (data: PageData) => void;
 }
 export interface EditBlockEditorProps {
-    isActive?: boolean;
-    onSelect: () => void;
-    actions: EditBlockActions;
-}
-export interface EditBlockProps extends EditBlockEditorProps, BlockDecorationProps {
-    isHeader?: boolean;
+    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/utils/index.d.ts

@@ -1,12 +1,11 @@
-import { BlockDecorationProps, BlockDecorator, CustomConfig } from '../../models';
+import { BlockDecorator, CustomConfig } from '../../models';
 export declare const formatBlockName: (name: string) => string;
-export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?: CustomConfig) => {
+export declare const addCustomDecorator: (decorator: BlockDecorator, custom?: CustomConfig) => {
     decorators: {
-        block: ((props: BlockDecorationProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>)[];
+        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;
 };
-export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;

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

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockId = exports.addCustomDecorator = exports.formatBlockName = void 0;
+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 = (decorators, custom = {}) => {
-    const customDecorators = custom.decorators || {};
-    return Object.assign(Object.assign({}, custom), { decorators: Object.assign(Object.assign({}, customDecorators), { block: [...(customDecorators.block || []), ...decorators] }) });
+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;
-const getBlockId = ({ index, type }) => `${type}${index === undefined ? '' : `-${index}`}`;
-exports.getBlockId = getBlockId;

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" | "visible" | "reset" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & 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/models/constructor-items/blocks.d.ts

@@ -30,7 +30,6 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
-    type: BlockType;
     index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
@@ -245,18 +244,14 @@ export interface IconsBlockProps {
         src: string;
     }[];
 }
-interface ContentLayoutBlockParams {
-    size?: ContentSize;
-    background?: BackgroundImageProps;
-    centered?: boolean;
-    theme?: ContentTheme;
-    textWidth?: ContentTextSize;
-}
-export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
-    /**
-     * @deprecated Use params on top level instead
-     */
-    properties?: ContentLayoutBlockParams;
+export interface ContentLayoutBlockProps {
+    properties?: {
+        size?: ContentSize;
+        background?: BackgroundImageProps;
+        centered?: boolean;
+        theme?: ContentTheme;
+        textWidth?: ContentTextSize;
+    };
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }

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

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

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

@@ -1,4 +1,9 @@
 import { PropsWithChildren } from 'react';
-import { BlockBaseProps } from './constructor-items';
-export type BlockDecorationProps = Pick<BlockBaseProps, 'index' | 'type'> & PropsWithChildren;
-export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;
+export interface BlockDecorationProps extends PropsWithChildren {
+    id: string | number;
+}
+export interface BlockDecoratorProps extends PropsWithChildren {
+    id: string | number;
+    isHeader?: boolean;
+}
+export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;

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

@@ -63,7 +63,6 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
-    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;

package/build/cjs/navigation/components/Header/Header.css

@@ -9,8 +9,6 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
-}
-.pc-header_with-border {
   box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
 .pc-header__wrapper {

package/build/cjs/navigation/components/Header/Header.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const Control_1 = tslib_1.__importDefault(require("../../../components/Control/Control"));
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
 const grid_1 = require("../../../grid");
@@ -31,10 +30,9 @@ const iconSizeKey = 'iconSize';
 const isButtonItem = (item) => item.type === models_1.NavigationItemType.Button;
 const isDropdownItem = (item) => item.type === models_1.NavigationItemType.Dropdown;
 const Header = ({ data, logo }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
+    const { leftItems, rightItems, iconSize = 20 } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
-    const [activeItemId, setActiveItemId] = (0, react_1.useState)(undefined);
-    const [showBorder, setShowBorder] = (0, react_1.useState)(withBorder);
+    const [activeItemId, setactiveItemId] = (0, react_1.useState)(undefined);
     const getNavigationItemWithIconSize = (0, react_1.useCallback)((item) => {
         const newItem = Object.assign({}, item);
         if ('items' in newItem && isDropdownItem(newItem)) {
@@ -48,7 +46,7 @@ const Header = ({ data, logo }) => {
     const leftItemsWithIconSize = (0, react_1.useMemo)(() => leftItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, leftItems]);
     const rightItemsWithIconSize = (0, react_1.useMemo)(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItemWithIconSize), [getNavigationItemWithIconSize, rightItems]);
     const onActiveItemChange = (0, react_1.useCallback)((id) => {
-        setActiveItemId(id);
+        setactiveItemId(id);
     }, []);
     const hidePopup = (0, react_1.useCallback)(() => {
         onActiveItemChange();
@@ -59,16 +57,7 @@ const Header = ({ data, logo }) => {
     const hideSidebar = (0, react_1.useCallback)(() => {
         setIsSidebarOpened(false);
     }, []);
-    (0, react_1.useEffect)(() => {
-        const showBorderOnScroll = () => {
-            if (!showBorder) {
-                setShowBorder(window.scrollY > 0);
-            }
-        };
-        window.addEventListener('scroll', lodash_1.default.debounce(showBorderOnScroll, 20), { passive: true });
-        return () => window.removeEventListener('scroll', lodash_1.default.debounce(showBorderOnScroll, 20));
-    });
-    return (react_1.default.createElement(grid_1.Grid, { className: b({ 'with-border': showBorder }) },
+    return (react_1.default.createElement(grid_1.Grid, { className: b() },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement("header", { className: b('wrapper') },

package/build/cjs/navigation/schema.d.ts

@@ -14,7 +14,6 @@ export declare const LogoProps: {
             } | {
                 type: string;
                 pattern: string;
-                optionName: string;
             })[];
         };
         text: {