@gravity-ui/page-constructor 4.38.1 → 4.39.1

package/README.md

@@ -184,7 +184,7 @@ Sub-blocks are components that can be used in the block `children` property. In
 
 1. In the `src/blocks` or `src/sub-blocks` directory, create a folder with the block or sub-block code.
 
-2. Add the block or sub-block name to enum `BlockType` or`SubBlockType` and describe its properties in the `src/models/blocks.ts` or `src/models/sub-blocks.ts` file in a similar way to the existing ones.
+2. Add the block or sub-block name to enum `BlockType` or`SubBlockType` and describe its properties in the `src/models/constructor-items/blocks.ts` or `src/models/constructor-items/sub-blocks.ts` file in a similar way to the existing ones.
 
 3. Add export for the block in the `src/blocks/index.ts` file and for the sub-block in the `src/sub-blocks/index.ts` file.
 

package/build/cjs/blocks/Header/schema.d.ts

@@ -251,6 +251,26 @@ export declare const HeaderBackgroundProps: {
         ratio: {
             type: string;
         };
+        iframe: {
+            src: {
+                type: string;
+            };
+            name: {
+                type: string;
+            };
+            title: {
+                type: string;
+            };
+            height: {
+                type: string;
+            };
+            width: {
+                type: string;
+            };
+        };
+        margins: {
+            type: string;
+        };
     };
 };
 export declare const HeaderProperties: {
@@ -686,6 +706,26 @@ export declare const HeaderProperties: {
                 ratio: {
                     type: string;
                 };
+                iframe: {
+                    src: {
+                        type: string;
+                    };
+                    name: {
+                        type: string;
+                    };
+                    title: {
+                        type: string;
+                    };
+                    height: {
+                        type: string;
+                    };
+                    width: {
+                        type: string;
+                    };
+                };
+                margins: {
+                    type: string;
+                };
             };
         } & {
             optionName: string;
@@ -1170,6 +1210,26 @@ export declare const HeaderBlock: {
                         ratio: {
                             type: string;
                         };
+                        iframe: {
+                            src: {
+                                type: string;
+                            };
+                            name: {
+                                type: string;
+                            };
+                            title: {
+                                type: string;
+                            };
+                            height: {
+                                type: string;
+                            };
+                            width: {
+                                type: string;
+                            };
+                        };
+                        margins: {
+                            type: string;
+                        };
                     };
                 } & {
                     optionName: string;

package/build/cjs/blocks/HeaderSlider/schema.d.ts

@@ -442,6 +442,26 @@ export declare const HeaderSliderBlock: {
                                     ratio: {
                                         type: string;
                                     };
+                                    iframe: {
+                                        src: {
+                                            type: string;
+                                        };
+                                        name: {
+                                            type: string;
+                                        };
+                                        title: {
+                                            type: string;
+                                        };
+                                        height: {
+                                            type: string;
+                                        };
+                                        width: {
+                                            type: string;
+                                        };
+                                    };
+                                    margins: {
+                                        type: string;
+                                    };
                                 };
                             } & {
                                 optionName: string;

package/build/cjs/blocks/Media/schema.d.ts

@@ -245,6 +245,26 @@ export declare const Media: {
         ratio: {
             type: string;
         };
+        iframe: {
+            src: {
+                type: string;
+            };
+            name: {
+                type: string;
+            };
+            title: {
+                type: string;
+            };
+            height: {
+                type: string;
+            };
+            width: {
+                type: string;
+            };
+        };
+        margins: {
+            type: string;
+        };
     };
 };
 export declare const MediaBlockBaseProps: {
@@ -870,6 +890,26 @@ export declare const MediaBlock: {
                         ratio: {
                             type: string;
                         };
+                        iframe: {
+                            src: {
+                                type: string;
+                            };
+                            name: {
+                                type: string;
+                            };
+                            title: {
+                                type: string;
+                            };
+                            height: {
+                                type: string;
+                            };
+                            width: {
+                                type: string;
+                            };
+                        };
+                        margins: {
+                            type: string;
+                        };
                     };
                 } & {
                     optionName: string;

package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts

@@ -261,6 +261,26 @@ export declare const PromoFeaturesItem: {
                 ratio: {
                     type: string;
                 };
+                iframe: {
+                    src: {
+                        type: string;
+                    };
+                    name: {
+                        type: string;
+                    };
+                    title: {
+                        type: string;
+                    };
+                    height: {
+                        type: string;
+                    };
+                    width: {
+                        type: string;
+                    };
+                };
+                margins: {
+                    type: string;
+                };
             };
         };
     };

package/build/cjs/blocks/Tabs/schema.d.ts

@@ -256,6 +256,26 @@ export declare const tabsItem: {
                     ratio: {
                         type: string;
                     };
+                    iframe: {
+                        src: {
+                            type: string;
+                        };
+                        name: {
+                            type: string;
+                        };
+                        title: {
+                            type: string;
+                        };
+                        height: {
+                            type: string;
+                        };
+                        width: {
+                            type: string;
+                        };
+                    };
+                    margins: {
+                        type: string;
+                    };
                 };
             } & {
                 optionName: string;

package/build/cjs/components/Media/Iframe/Iframe.css

@@ -0,0 +1,18 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-media-component-iframe {
+  overflow: hidden;
+}
+.pc-media-component-iframe_margins {
+  margin: 24px;
+}
+.pc-media-component-iframe_margins .pc-media-component-iframe__item {
+  border-radius: 0;
+}
+.pc-media-component-iframe .pc-media-component-iframe__iframe {
+  border-radius: 0;
+}
+.pc-media-component-iframe__item {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,3 @@
+import { MediaComponentIframeProps } from '../../../models';
+declare const Iframe: (props: MediaComponentIframeProps) => JSX.Element | null;
+export default Iframe;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../../utils");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const b = (0, utils_1.block)('media-component-iframe');
+const Iframe = (props) => {
+    const { iframe, margins = true } = props;
+    const { height = 400, src, width, name, title } = iframe;
+    return iframe ? (react_1.default.createElement("div", { className: b({ margins }), style: { height } },
+        react_1.default.createElement("iframe", { className: b('item'), loading: "lazy", title: title || (0, i18n_1.default)('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
+};
+exports.default = Iframe;

package/build/cjs/components/Media/Iframe/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Datalens frame"
+}

package/build/cjs/components/Media/Iframe/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/Media/Iframe/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'Iframe';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/Media/Iframe/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}

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

@@ -53,7 +53,7 @@ const Image = (props) => {
     };
     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, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
+        return (react_1.default.createElement(Slider_1.default, { slidesToShow: 1, type: models_1.SliderType.MediaCard, animated: parallax }, imageArray.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

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

@@ -7,11 +7,12 @@ 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 Iframe_1 = tslib_1.__importDefault(require("./Iframe/Iframe"));
 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, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
@@ -48,12 +49,16 @@ const Media = (props) => {
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
         }
+        if (iframe) {
+            result = react_1.default.createElement(Iframe_1.default, { iframe: iframe, margins: margins });
+        }
         return result;
     }, [
         image,
         video,
         youtube,
         dataLens,
+        iframe,
         parallax,
         height,
         imageClassName,
@@ -73,6 +78,7 @@ const Media = (props) => {
         ratio,
         youtubeClassName,
         autoplay,
+        margins,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
 };

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

@@ -19,7 +19,7 @@ const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
-    const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
             blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
@@ -43,7 +43,7 @@ const Constructor = (props) => {
     const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);
     const themedBackground = (0, utils_1.getThemedValue)(background, theme);
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
-        react_1.default.createElement(RootCn_1.default, null,
+        react_1.default.createElement(RootCn_1.default, { className: b() },
             react_1.default.createElement("div", { className: b('wrapper') },
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
                 react_1.default.createElement(Layout_1.default, { navigation: navigation },

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

@@ -200,7 +200,11 @@ export interface MediaComponentImageProps {
 export interface MediaComponentDataLensProps {
     dataLens: DataLensProps;
 }
-export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
+export interface MediaComponentIframeProps {
+    iframe: IframeProps;
+    margins?: boolean;
+}
+export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
@@ -253,6 +257,13 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
+export interface IframeProps {
+    src: string;
+    width?: number;
+    height?: number;
+    title?: string;
+    name?: string;
+}
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {
     firstName: string;

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

@@ -1098,6 +1098,26 @@ export declare const cardSchemas: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/cjs/schema/validators/common.d.ts

@@ -1353,6 +1353,26 @@ export declare const MediaProps: {
     ratio: {
         type: string;
     };
+    iframe: {
+        src: {
+            type: string;
+        };
+        name: {
+            type: string;
+        };
+        title: {
+            type: string;
+        };
+        height: {
+            type: string;
+        };
+        width: {
+            type: string;
+        };
+    };
+    margins: {
+        type: string;
+    };
 };
 export declare const YMapMarkerLabel: {
     type: string;

package/build/cjs/schema/validators/common.js

@@ -500,6 +500,23 @@ exports.ButtonBlock = {
         required: ['text', 'url'],
     },
 };
+const IframeProps = {
+    src: {
+        type: 'string',
+    },
+    name: {
+        type: 'string',
+    },
+    title: {
+        type: 'string',
+    },
+    height: {
+        type: 'number',
+    },
+    width: {
+        type: 'number',
+    },
+};
 exports.MediaProps = {
     color: {
         type: 'string',
@@ -533,6 +550,10 @@ exports.MediaProps = {
     ratio: {
         type: 'number',
     },
+    iframe: Object.assign({}, IframeProps),
+    margins: {
+        type: 'number',
+    },
 };
 exports.YMapMarkerLabel = {
     type: 'object',

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts

@@ -246,6 +246,26 @@ export declare const LayoutItem: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
         };
         content: Partial<{
             title: {

package/build/cjs/sub-blocks/MediaCard/schema.d.ts

@@ -251,6 +251,26 @@ export declare const MediaCardBlock: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/cjs/sub-blocks/PriceCard/schema.d.ts

@@ -635,6 +635,26 @@ export declare const PriceCardBlock: {
             ratio: {
                 type: string;
             };
+            iframe: {
+                src: {
+                    type: string;
+                };
+                name: {
+                    type: string;
+                };
+                title: {
+                    type: string;
+                };
+                height: {
+                    type: string;
+                };
+                width: {
+                    type: string;
+                };
+            };
+            margins: {
+                type: string;
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/blocks/Header/schema.d.ts

@@ -251,6 +251,26 @@ export declare const HeaderBackgroundProps: {
         ratio: {
             type: string;
         };
+        iframe: {
+            src: {
+                type: string;
+            };
+            name: {
+                type: string;
+            };
+            title: {
+                type: string;
+            };
+            height: {
+                type: string;
+            };
+            width: {
+                type: string;
+            };
+        };
+        margins: {
+            type: string;
+        };
     };
 };
 export declare const HeaderProperties: {
@@ -686,6 +706,26 @@ export declare const HeaderProperties: {
                 ratio: {
                     type: string;
                 };
+                iframe: {
+                    src: {
+                        type: string;
+                    };
+                    name: {
+                        type: string;
+                    };
+                    title: {
+                        type: string;
+                    };
+                    height: {
+                        type: string;
+                    };
+                    width: {
+                        type: string;
+                    };
+                };
+                margins: {
+                    type: string;
+                };
             };
         } & {
             optionName: string;
@@ -1170,6 +1210,26 @@ export declare const HeaderBlock: {
                         ratio: {
                             type: string;
                         };
+                        iframe: {
+                            src: {
+                                type: string;
+                            };
+                            name: {
+                                type: string;
+                            };
+                            title: {
+                                type: string;
+                            };
+                            height: {
+                                type: string;
+                            };
+                            width: {
+                                type: string;
+                            };
+                        };
+                        margins: {
+                            type: string;
+                        };
                     };
                 } & {
                     optionName: string;

package/build/esm/blocks/HeaderSlider/schema.d.ts

@@ -442,6 +442,26 @@ export declare const HeaderSliderBlock: {
                                     ratio: {
                                         type: string;
                                     };
+                                    iframe: {
+                                        src: {
+                                            type: string;
+                                        };
+                                        name: {
+                                            type: string;
+                                        };
+                                        title: {
+                                            type: string;
+                                        };
+                                        height: {
+                                            type: string;
+                                        };
+                                        width: {
+                                            type: string;
+                                        };
+                                    };
+                                    margins: {
+                                        type: string;
+                                    };
                                 };
                             } & {
                                 optionName: string;