@gravity-ui/page-constructor 3.1.0 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.1.1](https://github.com/gravity-ui/page-constructor/compare/v3.1.0...v3.1.1) (2023-06-07)
+
+
+### Bug Fixes
+
+* constructor items inner data structure ([#386](https://github.com/gravity-ui/page-constructor/issues/386)) ([f73ccde](https://github.com/gravity-ui/page-constructor/commit/f73ccde7369f38ec887ded7534f6907e4da8b4ac))
+
 ## [3.1.0](https://github.com/gravity-ui/page-constructor/compare/v3.0.0...v3.1.0) (2023-06-05)
 
 

package/build/cjs/components/BlockBase/BlockBase.js

@@ -8,9 +8,9 @@ const utils_1 = require("../../utils");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings, qa } = props;
+    const { anchor, visible, children, className, resetPaddings, qa, index = 0 } = props;
     return (react_1.default.createElement(grid_1.Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        react_1.default.createElement(BlockDecoration_1.BlockDecoration, null,
+        react_1.default.createElement(BlockDecoration_1.BlockDecoration, { id: index },
             anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
             children)));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Block, WithChildren } from '../../../../models';
-interface ConstructorBlockProps {
+import { Block, BlockBaseProps, WithChildren } from '../../../../models';
+interface ConstructorBlockProps extends Pick<BlockBaseProps, 'index'> {
     data: Block;
 }
 export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;

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

@@ -6,8 +6,8 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const BlockBase_1 = tslib_1.__importDefault(require("../../../../components/BlockBase/BlockBase"));
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-block');
-const ConstructorBlock = ({ data, children, }) => {
+const ConstructorBlock = ({ index = 0, data, children, }) => {
     const { anchor, visible, type } = data;
-    return (react_1.default.createElement(BlockBase_1.default, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
+    return (react_1.default.createElement(BlockBase_1.default, { index: index, className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
 };
 exports.ConstructorBlock = ConstructorBlock;

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

@@ -4,7 +4,6 @@ exports.ConstructorBlocks = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
-const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
 const utils_1 = require("../../../../utils");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
@@ -35,9 +34,12 @@ const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, blockKey: blockId }, children));
+            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item }, itemElement)) : (itemElement)));
+        return blockTypes.includes(item.type) ? (
+        //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
+        // components relying on constructor inner structure like Slider or blog-constructor will be refactored
+        react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId, index: index }, itemElement)) : (itemElement);
     };
     return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
 };

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

@@ -3,5 +3,5 @@ export interface ConstructorItemProps {
     data: ConstructorItemType;
     blockKey: string;
 }
-export declare const ConstructorItem: ({ data, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

@@ -3,13 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConstructorHeader = exports.ConstructorItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
 const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
-const ConstructorItem = ({ data, children }) => {
+const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { type } = data, rest = tslib_1.__rest(data, ["type"]);
     const Component = itemMap[type];
-    return react_1.default.createElement(Component, Object.assign({}, rest), children);
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey },
+        react_1.default.createElement(Component, Object.assign({}, rest), children)));
 };
 exports.ConstructorItem = ConstructorItem;
 const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(BlockDecoration_1.BlockDecoration, { id: data.type },

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

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

package/build/cjs/customization/BlockDecoration.js

@@ -3,20 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockDecoration = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const blockIdContext_1 = require("../context/blockIdContext");
 const innerContext_1 = require("../context/innerContext");
-const utils_1 = require("../utils");
-const BlockDecoration = (props) => {
+const BlockDecoration = ({ id, children: blockChildren, }) => {
     var _a, _b;
-    const blockContenxtId = (0, utils_1.getBlockIndexFromId)((0, react_1.useContext)(blockIdContext_1.BlockIdContext));
     const { headerBlockTypes } = (0, react_1.useContext)(innerContext_1.InnerContext);
-    const blockId = props.id || blockContenxtId;
-    const isHeader = Boolean(props.id && headerBlockTypes.includes(props.id));
-    const block = react_1.default.createElement(react_1.Fragment, null, props.children);
+    const isHeader = Boolean(typeof id === 'string' && headerBlockTypes.includes(id));
+    const block = react_1.default.createElement(react_1.Fragment, null, blockChildren);
     const blockDecorators = (_b = (_a = (0, react_1.useContext)(innerContext_1.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_1.default.createElement(react_1.Fragment, null, decorator({ children, id: blockId, isHeader }))), block);
+    return blockDecorators.reduce((children, decorator) => react_1.default.createElement(react_1.Fragment, null, decorator({ children, id, isHeader })), block);
 };
 exports.BlockDecoration = BlockDecoration;

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

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+    id: string | number;
 }
 export interface BlockDecoratorProps extends PropsWithChildren {
     id: string | number;

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

@@ -11,4 +11,3 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 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.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+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) {
@@ -83,5 +83,3 @@ 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/BlockBase/BlockBase.js

@@ -6,9 +6,9 @@ import Anchor from '../Anchor/Anchor';
 import './BlockBase.css';
 const b = block('block-base');
 const BlockBase = (props) => {
-    const { anchor, visible, children, className, resetPaddings, qa } = props;
+    const { anchor, visible, children, className, resetPaddings, qa, index = 0 } = props;
     return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        React.createElement(BlockDecoration, null,
+        React.createElement(BlockDecoration, { id: index },
             anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
             children)));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Block, WithChildren } from '../../../../models';
-interface ConstructorBlockProps {
+import { Block, BlockBaseProps, WithChildren } from '../../../../models';
+interface ConstructorBlockProps extends Pick<BlockBaseProps, 'index'> {
     data: Block;
 }
 export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;

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

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

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

@@ -1,6 +1,5 @@
 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';
@@ -31,9 +30,12 @@ export const ConstructorBlocks = ({ items }) => {
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
-            itemElement = (React.createElement(ConstructorItem, { data: item, blockKey: blockId }, children));
+            itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return (React.createElement(BlockIdContext.Provider, { value: blockId, key: blockId }, blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item }, itemElement)) : (itemElement)));
+        return blockTypes.includes(item.type) ? (
+        //TODO: replace ConstructorBlock (and delete it) with BlockBase when all
+        // components relying on constructor inner structure like Slider or blog-constructor will be refactored
+        React.createElement(ConstructorBlock, { data: item, key: blockId, index: index }, 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, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

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

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

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

package/build/esm/customization/BlockDecoration.js

@@ -1,17 +1,13 @@
 import React, { Fragment, useContext } from 'react';
-import { BlockIdContext } from '../context/blockIdContext';
 import { InnerContext } from '../context/innerContext';
-import { getBlockIndexFromId } from '../utils';
-export const BlockDecoration = (props) => {
+export const BlockDecoration = ({ id, children: blockChildren, }) => {
     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 isHeader = Boolean(typeof id === 'string' && headerBlockTypes.includes(id));
+    const block = React.createElement(Fragment, null, blockChildren);
     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);
+    return blockDecorators.reduce((children, decorator) => React.createElement(Fragment, null, decorator({ children, id, isHeader })), block);
 };

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

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;

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

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+    id: string | number;
 }
 export interface BlockDecoratorProps extends PropsWithChildren {
     id: string | number;

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

@@ -11,4 +11,3 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 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/esm/utils/blocks.js

@@ -71,4 +71,3 @@ export const getShareLink = (url, type, title, text) => {
             return undefined;
     }
 };
-export 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()); };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/blocks.d.ts

@@ -30,6 +30,7 @@ export interface Childable {
     children?: SubBlock[];
 }
 export interface BlockBaseProps {
+    index?: number;
     anchor?: AnchorProps;
     visible?: GridColumnSize;
     resetPaddings?: boolean;

package/server/models/customization.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+    id: string | number;
 }
 export interface BlockDecoratorProps extends PropsWithChildren {
     id: string | number;

package/server/utils/blocks.d.ts

@@ -11,4 +11,3 @@ export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => stri
 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/server/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockIndexFromId = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+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) {
@@ -83,5 +83,3 @@ 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;