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

package/build/cjs/components/ButtonTabs/__tests__/ButtonTabs.test.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const ButtonTabs_1 = tslib_1.__importDefault(require("../ButtonTabs"));
+const qaId = 'button-tabs-component';
+const items = [
+    {
+        id: '0',
+        title: 'tab-1',
+    },
+    {
+        id: '1',
+        title: 'tab-2',
+    },
+    {
+        id: '2',
+        title: 'tab-3',
+    },
+];
+describe('ButtonTabs', () => {
+    test('render ButtonTabs by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId }));
+        const buttonTabs = react_2.screen.getByTestId(qaId);
+        expect(buttonTabs).toBeInTheDocument();
+        expect(buttonTabs).toBeVisible();
+        expect(buttonTabs).not.toBeDisabled();
+    });
+    test('has active tab', async () => {
+        const activeTabId = 1;
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, activeTab: String(activeTabId) }));
+        const buttons = react_2.screen.getAllByRole('button');
+        buttons.forEach((button, index) => {
+            if (index === activeTabId) {
+                expect(button).toHaveClass('pc-button-tabs__item_active');
+            }
+            expect(button).toHaveClass('pc-button-block_theme_normal');
+        });
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, className: className }));
+        const buttonTabs = react_2.screen.getByTestId(qaId);
+        expect(buttonTabs).toHaveClass(className);
+    });
+    test('call onSelectTab', async () => {
+        const user = user_event_1.default.setup();
+        const handleOnClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(ButtonTabs_1.default, { items: items, qa: qaId, onSelectTab: handleOnClick }));
+        const buttons = react_2.screen.getAllByRole('button');
+        buttons.forEach(async (button, i) => {
+            await user.click(button);
+            expect(handleOnClick).toHaveBeenCalledTimes(i + 1);
+        });
+    });
+});

package/build/cjs/components/FullscreenImage/FullscreenImage.d.ts

@@ -5,5 +5,5 @@ export interface FullScreenImageProps extends ImageProps {
     modalImageClass?: string;
     imageStyle?: CSSProperties;
 }
-declare const FullScreenImage: (props: FullScreenImageProps) => JSX.Element;
-export default FullScreenImage;
+declare const FullscreenImage: (props: FullScreenImageProps) => JSX.Element;
+export default FullscreenImage;

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -10,16 +10,16 @@ const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('FullScreenImage');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
-const FullScreenImage = (props) => {
+const FullscreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle, alt = (0, i18n_1.default)('img-alt') } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [isMouseEnter, setIsMouseEnter] = (0, react_1.useState)(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    const showFullScreenIcon = () => setIsMouseEnter(true);
-    const hideFullScreenIcon = () => setIsMouseEnter(false);
+    const showFullscreenIcon = () => setIsMouseEnter(true);
+    const hideFullscreenIcon = () => setIsMouseEnter(false);
     return (react_1.default.createElement("div", { className: b() },
-        react_1.default.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
+        react_1.default.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullscreenIcon, onMouseLeave: hideFullscreenIcon },
             react_1.default.createElement(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             react_1.default.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
@@ -29,4 +29,4 @@ const FullScreenImage = (props) => {
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
-exports.default = FullScreenImage;
+exports.default = FullscreenImage;

package/build/cjs/components/FullscreenMedia/FullscreenMedia.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { MediaAllProps } from '../Media/Media';
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullScreen' | 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export interface FullScreenMediaProps {
+    /**
+     * @deprecated use showFullscreenIcon
+     */
+    showFullScreenIcon?: boolean;
+    showFullscreenIcon?: boolean;
+    children: (props?: ChildMediaRenderProps) => JSX.Element;
+}
+declare const FullscreenMedia: ({ children, showFullScreenIcon, showFullscreenIcon, }: FullScreenMediaProps) => JSX.Element;
+export default FullscreenMedia;

package/build/cjs/components/FullscreenMedia/{FullScreenMedia.js → FullscreenMedia.js}

@@ -10,7 +10,7 @@ const b = (0, utils_1.block)('full-screen-media');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const getMediaClass = (type) => b('modal-media', { type });
-const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
+const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIcon = true, }) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const openModal = (e) => {
@@ -24,7 +24,7 @@ const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullScreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+            showFullScreenIcon && showFullscreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },
@@ -37,4 +37,4 @@ const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
                     fullScreen: true,
                 }))))));
 };
-exports.default = FullScreenMedia;
+exports.default = FullscreenMedia;

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

@@ -5,7 +5,6 @@ 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/cjs/components/Image/Image.js

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

package/build/cjs/components/Media/FullscreenVideo/FullscreenVideo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VideoAllProps } from '../Video/Video';
+declare const FullscreenVideo: React.FC<VideoAllProps>;
+export default FullscreenVideo;

package/build/cjs/components/Media/FullscreenVideo/FullscreenVideo.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const FullscreenMedia_1 = tslib_1.__importDefault(require("../../FullscreenMedia/FullscreenMedia"));
+const Video_1 = tslib_1.__importDefault(require("../Video/Video"));
+const FullscreenVideo = (props) => {
+    return (react_1.default.createElement(FullscreenMedia_1.default, null, (classNames) => react_1.default.createElement(Video_1.default, Object.assign({}, props, classNames))));
+};
+exports.default = FullscreenVideo;

package/build/cjs/components/Media/Image/Image.d.ts

@@ -2,6 +2,7 @@ import { MediaComponentImageProps } from '../../../models';
 export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
+    fullscreen?: boolean;
 }
 interface InnerImageProps {
     hasVideoFallback: boolean;

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

@@ -13,7 +13,7 @@ const Image_1 = tslib_1.__importDefault(require("../../Image/Image"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-image');
 const Image = (props) => {
-    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video } = props;
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, } = props;
     const [scrollY, setScrollY] = (0, react_1.useState)(0);
     const [{ springScrollY }, springSetScrollY] = (0, react_spring_1.useSpring)(() => ({
         springScrollY: 0,
@@ -34,10 +34,10 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const imageSlider = (imageArray) => (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => {
+    const fullscreenImage = (item) => {
         const itemData = (0, utils_2.getMediaImage)(item);
         return (react_1.default.createElement(FullscreenImage_1.default, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
-    })));
+    };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
         return (react_1.default.createElement(react_spring_1.animated.div, { style: { transform: parallaxInterpolate } },
@@ -47,9 +47,16 @@ const Image = (props) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
         return react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height } }));
     };
+    const imageSlider = (imageArray) => {
+        const fullscreenItem = fullscreen === undefined || fullscreen;
+        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? fullscreenImage(item) : imageOnly(item))));
+    };
     if (Array.isArray(image)) {
         return imageSlider(image);
     }
+    if (fullscreen) {
+        return fullscreenImage(image);
+    }
     return isBackground ? imageBackground(image) : imageOnly(image);
 };
 exports.default = Image;

package/build/cjs/components/Media/Media.js

@@ -6,23 +6,43 @@ const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const DataLens_1 = tslib_1.__importDefault(require("./DataLens/DataLens"));
+const FullscreenVideo_1 = tslib_1.__importDefault(require("./FullscreenVideo/FullscreenVideo"));
 const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, analyticsEvents, } = 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;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const content = (0, react_1.useMemo)(() => {
         let result = [];
         if (image) {
-            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullScreen || fullscreen }));
         }
         if (video) {
-            result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
+            const videoProps = {
+                key: 'video',
+                video,
+                videoClassName,
+                height,
+                metrika,
+                analyticsEvents,
+                playVideo,
+                previewImg,
+                playButton,
+                customBarControlsClassName,
+                hasVideoFallback,
+                setHasVideoFallback,
+            };
+            if (fullScreen || fullscreen) {
+                result.push(react_1.default.createElement(FullscreenVideo_1.default, Object.assign({}, videoProps)));
+            }
+            else {
+                result.push(react_1.default.createElement(Video_1.default, Object.assign({}, videoProps)));
+            }
         }
         if (youtube) {
-            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullScreen: fullScreen }));
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullScreen || fullscreen }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
@@ -47,6 +67,7 @@ const Media = (props) => {
         customBarControlsClassName,
         youtubeClassName,
         fullScreen,
+        fullscreen,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
 };

package/build/cjs/components/Media/Video/Video.d.ts

@@ -10,6 +10,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

package/build/cjs/components/VideoBlock/VideoBlock.d.ts

@@ -13,7 +13,11 @@ export interface VideoBlockProps {
     previewImg?: string;
     playButton?: React.ReactNode;
     height?: number;
+    /**
+     * @deprecated use fullscreen
+     */
     fullScreen?: boolean;
+    fullscreen?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -39,7 +39,7 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen, fullscreen, } = props;
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
@@ -82,14 +82,14 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen, fullscreen]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
     if (norender) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
         playButton || (react_1.default.createElement("button", { className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));

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

@@ -35,6 +35,6 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
-export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
+export { default as FullScreenMedia } from './FullscreenMedia/FullscreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/cjs/components/index.js

@@ -78,5 +78,5 @@ var HTML_1 = require("./HTML/HTML");
 Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
 var MetaInfo_1 = require("./MetaInfo/MetaInfo");
 Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
-var FullScreenMedia_1 = require("./FullscreenMedia/FullScreenMedia");
-Object.defineProperty(exports, "FullScreenMedia", { enumerable: true, get: function () { return __importDefault(FullScreenMedia_1).default; } });
+var FullscreenMedia_1 = require("./FullscreenMedia/FullscreenMedia");
+Object.defineProperty(exports, "FullScreenMedia", { enumerable: true, get: function () { return __importDefault(FullscreenMedia_1).default; } });

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

@@ -36,7 +36,7 @@ export declare const subBlockMap: {
     "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
     "news-card": (props: import("./models").NewsCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullScreen, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
     /**
      * @deprecated Use LayoutItem
      */

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

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

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

@@ -28,15 +28,13 @@ const Constructor = (props) => {
             itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.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 } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const hasFootnotes = footnotes.length > 0;
-    const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
-    const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);
+    const isHeaderBlock = (block) => context.headerBlockTypes.includes(block.type);
+    const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
+    const restBlocks = blocks === null || blocks === void 0 ? void 0 : blocks.filter((block) => !isHeaderBlock(block));
     const themedBackground = (0, utils_1.getThemedValue)(background, theme);
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
         react_1.default.createElement("div", { className: b() },

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,9 @@ 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) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId }, 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,15 +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 },
-    react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey })));
+const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));
 exports.ConstructorHeader = ConstructorHeader;

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

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

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" | "reset" | "sizes" | "offsets" | "orders" | "hidden" | "visible" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "dataQa" | "reset" | "visible" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -8,6 +8,8 @@ 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",
@@ -50,6 +52,7 @@ export interface LoadableProps {
 export interface LoadableChildren {
     loadable?: LoadableProps;
 }
+export type ServiceDemoProps = Animatable;
 export declare enum SliderBreakpointNames {
     Sm = "sm",
     Md = "md",
@@ -111,6 +114,7 @@ export interface HeaderBlockProps {
     breadcrumbs?: HeaderBreadCrumbsProps;
     status?: JSX.Element;
 }
+export type CalculatorProps = Animatable;
 export interface SimpleBlockProps extends Animatable, Childable {
     title: TitleBaseProps;
     description: string;
@@ -313,9 +317,15 @@ 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;
@@ -376,6 +386,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
+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;
 export type Block = BlockModels & BlockBaseProps;
 export {};

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

@@ -6,6 +6,8 @@ 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 { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
+import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
 import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
 export declare enum AuthorType {
@@ -99,7 +99,6 @@ export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, P
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
-    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
@@ -132,10 +131,11 @@ export interface FileLinkProps extends ClassNameProps {
     onClick?: () => void;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
-export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
+export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
+    size?: ButtonSize;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
@@ -174,7 +174,11 @@ export interface MediaComponentVideoProps extends AnalyticsEventsBase {
 export interface MediaComponentYoutubeProps {
     youtube: string;
     previewImg?: string;
+    /**
+     * @deprecated use fullscreen
+     */
     fullScreen?: boolean;
+    fullscreen?: boolean;
 }
 export interface MediaComponentImageProps {
     image: ImageProps | ImageProps[] | ImageDeviceProps;