@gravity-ui/page-constructor 4.43.0 → 4.43.2-alpha.0

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

@@ -260,11 +260,21 @@ export declare const Media: {
                     type: string;
                 };
                 height: {
-                    type: string;
+                    oneOf: ({
+                        type: string;
+                        enum?: undefined;
+                    } | {
+                        type: string;
+                        enum: string[];
+                    })[];
                 };
                 width: {
                     type: string;
                 };
+                justifyContent: {
+                    type: string;
+                    enum: string[];
+                };
             };
         };
         margins: {
@@ -931,11 +941,21 @@ export declare const MediaBlock: {
                                     type: string;
                                 };
                                 height: {
-                                    type: string;
+                                    oneOf: ({
+                                        type: string;
+                                        enum?: undefined;
+                                    } | {
+                                        type: string;
+                                        enum: string[];
+                                    })[];
                                 };
                                 width: {
                                     type: string;
                                 };
+                                justifyContent: {
+                                    type: string;
+                                    enum: string[];
+                                };
                             };
                         };
                         margins: {

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

@@ -276,11 +276,21 @@ export declare const PromoFeaturesItem: {
                             type: string;
                         };
                         height: {
-                            type: string;
+                            oneOf: ({
+                                type: string;
+                                enum?: undefined;
+                            } | {
+                                type: string;
+                                enum: string[];
+                            })[];
                         };
                         width: {
                             type: string;
                         };
+                        justifyContent: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                 };
                 margins: {

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

@@ -271,11 +271,21 @@ export declare const tabsItem: {
                                 type: string;
                             };
                             height: {
-                                type: string;
+                                oneOf: ({
+                                    type: string;
+                                    enum?: undefined;
+                                } | {
+                                    type: string;
+                                    enum: string[];
+                                })[];
                             };
                             width: {
                                 type: string;
                             };
+                            justifyContent: {
+                                type: string;
+                                enum: string[];
+                            };
                         };
                     };
                     margins: {

package/build/esm/components/BlockBase/BlockBase.css

@@ -11,6 +11,43 @@ unpredictable css rules order in build */
   margin-top: var(--pc-first-block-indent, 96px);
 }
 
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_0 {
+  margin-top: 0;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_xs {
+  margin-top: 16px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_s {
+  margin-top: 24px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_m {
+  margin-top: 32px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_l {
+  margin-top: 48px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentTop_xl {
+  margin-top: 64px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentBottom_0 {
+  padding-bottom: 0;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentBottom_xs {
+  padding-bottom: 16px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentBottom_s {
+  padding-bottom: 24px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentBottom_m {
+  padding-bottom: 32px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentBottom_l {
+  padding-bottom: 48px;
+}
+.pc-block-base.pc-block-base.pc-block-base.pc-block-base_indentBottom_xl {
+  padding-bottom: 64px;
+}
+
 @media only screen and (max-width: 577px) {
   .pc-block-base.pc-block-base {
     margin-top: 32px;

package/build/esm/components/BlockBase/BlockBase.js

@@ -5,8 +5,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;
-    return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, qa: qa },
+    const { anchor, indent, visible, children, className, resetPaddings, qa } = props;
+    const { top, bottom } = indent || (resetPaddings ? { top: '0', bottom: '0' } : { top: 'l', bottom: 'l' });
+    return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, className), visible: visible, reset: true, qa: qa },
         anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
         children));
 };

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

@@ -11,8 +11,4 @@ unpredictable css rules order in build */
 }
 .pc-media-component-iframe .pc-media-component-iframe__iframe {
   border-radius: 0;
-}
-.pc-media-component-iframe__item {
-  width: 100%;
-  height: 100%;
 }

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

@@ -1,12 +1,72 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { block } from '../../../utils';
 import i18n from './i18n';
 import './Iframe.css';
 const b = block('media-component-iframe');
 const Iframe = (props) => {
     const { iframe, margins = true } = props;
-    const { height = 400, src, width, name, title } = iframe;
-    return iframe ? (React.createElement("div", { className: b({ margins }), style: { height } },
-        React.createElement("iframe", { className: b('item'), loading: "lazy", title: title || i18n('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
+    const { height = 400, src, width = '100%', name, title, justifyContent = 'center' } = iframe;
+    const formContainerRef = useRef(null);
+    const iframeRef = useRef();
+    const [iframeId] = useState(uuidv4());
+    const updateFormIframe = useCallback((container) => {
+        if (iframeRef.current) {
+            iframeRef.current.src = src;
+        }
+        else {
+            const iframeWidth = typeof width === 'number' ? `${width}px` : width;
+            let iframeHeight = typeof height === 'number' ? `${height}px` : height;
+            if (height === 'auto') {
+                iframeHeight = undefined;
+            }
+            iframeRef.current = document.createElement('iframe');
+            iframeRef.current.src = src;
+            iframeRef.current.id = iframeId;
+            iframeRef.current.name = name || iframeId;
+            iframeRef.current.setAttribute('loading', 'lazy');
+            iframeRef.current.setAttribute('title', title || i18n('iframe-title'));
+            iframeRef.current.frameBorder = '0';
+            iframeRef.current.scrolling = 'no';
+            iframeRef.current.width = iframeWidth;
+            iframeRef.current.style.width = iframeWidth;
+            if (iframeHeight) {
+                iframeRef.current.style.height = iframeHeight;
+            }
+            container.appendChild(iframeRef.current);
+        }
+    }, [src, width, iframeId, name, title, height]);
+    const handleMessage = useCallback(({ data }) => {
+        if (height !== 'auto' && typeof height === 'number' && iframeRef.current) {
+            iframeRef.current.height = `${height}px`;
+            return;
+        }
+        try {
+            const parsed = JSON.parse(data);
+            const iframeHeight = parsed['iframe-height'];
+            const { message, name: iframeName } = parsed;
+            if (iframeName !== name && iframeName !== iframeId) {
+                return;
+            }
+            if (iframeRef.current && iframeHeight && !message) {
+                iframeRef.current.height = `${iframeHeight}px`;
+            }
+        }
+        catch (error) {
+            return;
+        }
+    }, [height, iframeId, name]);
+    const addIframe = useCallback(() => {
+        const container = formContainerRef.current;
+        if (container) {
+            updateFormIframe(container);
+            window.addEventListener('message', handleMessage, { passive: true });
+        }
+    }, [updateFormIframe, handleMessage]);
+    useEffect(() => {
+        addIframe();
+        return () => window.removeEventListener('message', handleMessage);
+    }, [addIframe, handleMessage]);
+    return iframe ? (React.createElement("div", { className: b({ margins }), ref: formContainerRef, style: { height, textAlign: justifyContent } })) : null;
 };
 export default Iframe;

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

@@ -6,9 +6,8 @@ import { block } from '../../../../utils';
 import './ConstructorBlock.css';
 const b = block('constructor-block');
 export const ConstructorBlock = ({ index = 0, data, children, }) => {
-    const { type, indent } = data;
-    const blockBaseProps = useMemo(() => pick(data, ['anchor', 'visible', 'resetPaddings']), [data]);
-    const { top, bottom } = indent || { top: 'l', bottom: 'l' };
+    const { type } = data;
+    const blockBaseProps = useMemo(() => pick(data, ['anchor', 'visible', 'resetPaddings', 'indent']), [data]);
     return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        React.createElement(BlockBase, Object.assign({ className: b({ type, indentTop: top, indentBottom: bottom }) }, blockBaseProps), children)));
+        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
 };

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

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

package/build/esm/grid/types.d.ts

@@ -48,3 +48,4 @@ export interface GridColumnClassParams {
     justifyContent?: GridJustifyContent;
     reset?: boolean;
 }
+export type IndentValue = '0' | 'xs' | 's' | 'm' | 'l' | 'xl';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
-import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
+import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
 import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
@@ -36,6 +36,10 @@ export interface BlockBaseProps {
     visible?: GridColumnSize;
     /** @deprecated */
     resetPaddings?: boolean;
+    indent?: {
+        top?: IndentValue;
+        bottom?: IndentValue;
+    };
     qa?: string;
 }
 export interface LoadableProps {

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

@@ -257,12 +257,14 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
+export type JustifyValues = 'left' | 'right' | 'center';
 export interface IframeProps {
     src: string;
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     title?: string;
     name?: string;
+    justifyContent?: JustifyValues;
 }
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {

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

@@ -6,12 +6,7 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
-    indent?: {
-        top?: string;
-        bottom?: string;
-    };
-};
+export type ConstructorBlock = ConstructorItem | CustomBlock;
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;

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

@@ -1530,11 +1530,21 @@ export declare const cardSchemas: {
                         type: string;
                     };
                     height: {
-                        type: string;
+                        oneOf: ({
+                            type: string;
+                            enum?: undefined;
+                        } | {
+                            type: string;
+                            enum: string[];
+                        })[];
                     };
                     width: {
                         type: string;
                     };
+                    justifyContent: {
+                        type: string;
+                        enum: string[];
+                    };
                 };
             };
             margins: {

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

@@ -1388,11 +1388,21 @@ export declare const MediaProps: {
                 type: string;
             };
             height: {
-                type: string;
+                oneOf: ({
+                    type: string;
+                    enum?: undefined;
+                } | {
+                    type: string;
+                    enum: string[];
+                })[];
             };
             width: {
                 type: string;
             };
+            justifyContent: {
+                type: string;
+                enum: string[];
+            };
         };
     };
     margins: {

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

@@ -522,11 +522,15 @@ const IframeProps = {
             type: 'string',
         },
         height: {
-            type: 'number',
+            oneOf: [{ type: 'number' }, { type: 'string', enum: ['auto'] }],
         },
         width: {
             type: 'number',
         },
+        justifyContent: {
+            type: 'string',
+            enum: ['left', 'right', 'center'],
+        },
     },
 };
 export const MediaProps = {

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

@@ -261,11 +261,21 @@ export declare const LayoutItem: {
                         type: string;
                     };
                     height: {
-                        type: string;
+                        oneOf: ({
+                            type: string;
+                            enum?: undefined;
+                        } | {
+                            type: string;
+                            enum: string[];
+                        })[];
                     };
                     width: {
                         type: string;
                     };
+                    justifyContent: {
+                        type: string;
+                        enum: string[];
+                    };
                 };
             };
             margins: {

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

@@ -266,11 +266,21 @@ export declare const MediaCardBlock: {
                         type: string;
                     };
                     height: {
-                        type: string;
+                        oneOf: ({
+                            type: string;
+                            enum?: undefined;
+                        } | {
+                            type: string;
+                            enum: string[];
+                        })[];
                     };
                     width: {
                         type: string;
                     };
+                    justifyContent: {
+                        type: string;
+                        enum: string[];
+                    };
                 };
             };
             margins: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.43.0",
+  "version": "4.43.2-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/grid/types.d.ts

@@ -48,3 +48,4 @@ export interface GridColumnClassParams {
     justifyContent?: GridJustifyContent;
     reset?: boolean;
 }
+export type IndentValue = '0' | 'xs' | 's' | 'm' | 'l' | 'xl';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
-import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
+import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
 import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
@@ -36,6 +36,10 @@ export interface BlockBaseProps {
     visible?: GridColumnSize;
     /** @deprecated */
     resetPaddings?: boolean;
+    indent?: {
+        top?: IndentValue;
+        bottom?: IndentValue;
+    };
     qa?: string;
 }
 export interface LoadableProps {

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

@@ -257,12 +257,14 @@ export interface DataLensObjectProps {
     id: string;
     theme: 'dark' | 'light';
 }
+export type JustifyValues = 'left' | 'right' | 'center';
 export interface IframeProps {
     src: string;
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     title?: string;
     name?: string;
+    justifyContent?: JustifyValues;
 }
 export type DataLensProps = string | DataLensObjectProps;
 export interface AuthorItem {

package/server/models/constructor.d.ts

@@ -6,12 +6,7 @@ export interface PageData {
 export interface Menu {
     title: string;
 }
-export type ConstructorBlock = (ConstructorItem | CustomBlock) & {
-    indent?: {
-        top?: string;
-        bottom?: string;
-    };
-};
+export type ConstructorBlock = ConstructorItem | CustomBlock;
 export interface PageContent extends Animatable {
     blocks: ConstructorBlock[];
     menu?: Menu;