@gravity-ui/page-constructor 1.15.0-alpha.21 → 1.15.0-alpha.23

package/build/cjs/sub-blocks/HubspotForm/HubspotFormContainer.js

@@ -1,19 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const loadHubspotScript_1 = tslib_1.__importDefault(require("./loadHubspotScript"));
 const hooks_1 = require("../../hooks");
 const HubspotFormContainer = (props) => {
-    const { className, formId, formInstanceId, portalId, region, formClassName, } = props;
+    const { className, formId, formInstanceId, portalId, region, formClassName, createDOMElement, } = props;
+    const containerRef = (0, react_1.useRef)(null);
+    const hsContainerRef = (0, react_1.useRef)();
     const containerId = formInstanceId
         ? `hubspot-form-${formId}-${formInstanceId}`
         : `hubspot-form-${formId}`;
-    (0, hooks_1.useMount)(() => {
-        (async () => {
-            if (!window.hbspt) {
-                await (0, loadHubspotScript_1.default)();
-            }
+    const createForm = () => {
+        if (containerRef.current && !hsContainerRef.current && createDOMElement) {
+            hsContainerRef.current = document.createElement('div');
+            containerRef.current.id = '';
+            hsContainerRef.current.id = containerId;
+            containerRef.current.appendChild(hsContainerRef.current);
+        }
+        if (!createDOMElement || hsContainerRef.current) {
             if (window.hbspt) {
                 window.hbspt.forms.create({
                     region,
@@ -24,8 +29,21 @@ const HubspotFormContainer = (props) => {
                     formInstanceId,
                 });
             }
+        }
+    };
+    (0, hooks_1.useMount)(() => {
+        (async () => {
+            if (!window.hbspt) {
+                await (0, loadHubspotScript_1.default)();
+            }
+            createForm();
         })();
+        return () => {
+            if (createDOMElement && containerRef.current && containerRef.current.lastChild) {
+                containerRef.current.removeChild(containerRef.current.lastChild);
+            }
+        };
     });
-    return react_1.default.createElement("div", { className: className, id: containerId });
+    return react_1.default.createElement("div", { className: className, id: containerId, ref: containerRef });
 };
 exports.default = HubspotFormContainer;

package/build/cjs/sub-blocks/HubspotForm/index.js

@@ -5,16 +5,16 @@ const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const mobileContext_1 = require("../../context/mobileContext");
+const blockPositionContext_1 = require("../../context/blockPositionContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const models_1 = require("../../models");
 const hooks_1 = require("../../hooks");
 const HubspotFormContainer_1 = tslib_1.__importDefault(require("./HubspotFormContainer"));
-const blockPositionContext_1 = require("../../context/blockPositionContext");
 const b = (0, utils_1.block)('hubspot-form');
 const HubspotForm = (props) => {
     const { className, theme: themeProp, isMobile: isMobileProp, formId, formInstanceId, portalId, region, formClassName, pixelEvents, 
     // hubspotEvents, // TODO: decide how to handle them
-    analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, } = props;
+    analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
     const defaultEvent = (0, react_1.useMemo)(() => ({
@@ -31,6 +31,7 @@ const HubspotForm = (props) => {
         onBeforeLoad,
         onBeforeSubmit,
         onLoad,
+        onSubmitError,
         onSubmit: (e) => {
             handleMetrika === null || handleMetrika === void 0 ? void 0 : handleMetrika({ pixelEvents });
             handleAnalytics(analyticsEvents);
@@ -45,8 +46,9 @@ const HubspotForm = (props) => {
         handleAnalytics,
         analyticsEvents,
         onSubmit,
+        onSubmitError,
     ]);
     (0, hooks_1.useHandleHubspotEvents)(handlers, formId);
-    return (react_1.default.createElement(HubspotFormContainer_1.default, { key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
+    return (react_1.default.createElement(HubspotFormContainer_1.default, { createDOMElement: createDOMElement, key: [formClassName, formId, formInstanceId, portalId, region].join(), className: b({ theme, mobile }, className), formClassName: formClassName, formId: formId, portalId: portalId, formInstanceId: formInstanceId, region: region }));
 };
 exports.default = HubspotForm;

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.css

@@ -0,0 +1,16 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-layout-item__media {
+  width: 100%;
+  display: block;
+  border-radius: var(--pc-border-radius);
+}
+.pc-layout-item__media_border {
+  border: 1px solid var(--yc-color-line-generic);
+}
+.pc-layout-item__meta-info {
+  margin: 16px 0 -8px 0;
+}
+.pc-layout-item__content {
+  margin: 16px 16px 0 0;
+}

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

@@ -0,0 +1,3 @@
+import { LayoutItemProps } from '../../models';
+declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: LayoutItemProps) => JSX.Element;
+export default LayoutItem;

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js

@@ -0,0 +1,21 @@
+"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 components_1 = require("../../components");
+const utils_2 = require("./utils");
+const __1 = require("..");
+const b = (0, utils_1.block)('layout-item');
+const LayoutItem = (_a) => {
+    var _b = _a.content, { links } = _b, content = tslib_1.__rest(_b, ["links"]), { metaInfo, media, border, fullScreen, className } = _a;
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        fullScreen && (0, utils_2.hasFullScreen)(media) ? (react_1.default.createElement(components_1.FullScreenMedia, { showFullScreenIcon: (0, utils_2.showFullScreenIcon)(media) }, (_a = {}) => {
+            var { className: mediaClassName } = _a, fullScreenMediaProps = tslib_1.__rest(_a, ["className"]);
+            return (react_1.default.createElement(components_1.Media, Object.assign({}, media, fullScreenMediaProps, { className: b('media', { border }, mediaClassName) })));
+        })) : (react_1.default.createElement(components_1.Media, Object.assign({}, media, { className: b('media', { border }) }))),
+        metaInfo && react_1.default.createElement(components_1.MetaInfo, { items: metaInfo, className: b('meta-info') }),
+        react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement(__1.Content, Object.assign({}, content, { links: (0, utils_2.getLayoutItemLinks)(links), size: "s", colSizes: { all: 12, md: 12 } })))));
+};
+exports.default = LayoutItem;

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

@@ -0,0 +1,218 @@
+export declare const LayoutItem: {
+    type: string;
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        media: {
+            color: {
+                type: string;
+            };
+            image: {
+                anyOf: ({
+                    oneOf: ({
+                        type: string;
+                        properties: {
+                            when: {
+                                type: string;
+                            };
+                        };
+                    } | {
+                        type: string;
+                        pattern: string;
+                    })[];
+                } | {
+                    type: string;
+                    items: {
+                        oneOf: ({
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                            pattern: string;
+                        })[];
+                    };
+                })[];
+            };
+            video: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    src: {
+                        type: string;
+                        items: {
+                            type: string;
+                        };
+                    };
+                    loop: {
+                        anyOf: ({
+                            type: string;
+                            additionalProperties: boolean;
+                            required: string[];
+                            properties: {
+                                start: {
+                                    type: string;
+                                };
+                                end: {
+                                    type: string;
+                                };
+                            };
+                        } | {
+                            type: string;
+                        })[];
+                    };
+                    type: {
+                        type: string;
+                        enum: string[];
+                    };
+                    muted: {
+                        type: string;
+                    };
+                    playing: {
+                        type: string;
+                    };
+                    elapsedTime: {
+                        type: string;
+                    };
+                    playIcon: {
+                        type: string;
+                        additionalProperties: boolean;
+                        properties: {
+                            type: {
+                                type: string;
+                                enum: string[];
+                            };
+                            theme: {
+                                type: string;
+                                enum: string[];
+                            };
+                            text: {
+                                type: string;
+                                contentType: string;
+                            };
+                        };
+                    };
+                    controls: {
+                        type: string;
+                        enum: string[];
+                    };
+                };
+            };
+            youtube: {
+                type: string;
+            };
+            parallax: {
+                type: string;
+            };
+            height: {
+                type: string;
+            };
+            previewImg: {
+                type: string;
+            };
+            dataLens: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        id: {
+                            type: string;
+                        };
+                        theme: {
+                            type: string;
+                            enum: string[];
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
+            };
+        };
+        content: Partial<{
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    contentType: string;
+                })[];
+            };
+            text: {
+                type: string;
+                contentType: string;
+            };
+            additionalInfo: {
+                type: string;
+                contentType: string;
+            };
+            size: {
+                type: string;
+                enum: string[];
+            };
+            links: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            buttons: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            theme: {
+                type: string;
+                enum: string[];
+            };
+        }>;
+        metaInfo: {
+            type: string;
+            items: {
+                type: string;
+                contentType: string;
+            };
+        };
+        border: {
+            type: string;
+        };
+        fullScreen: {
+            type: string;
+        };
+        type: {};
+        when: {};
+    };
+};

package/build/cjs/sub-blocks/LayoutItem/schema.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutItem = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../../sub-blocks/Content/schema");
+const schema_2 = tslib_1.__importDefault(require("../../components/MetaInfo/schema"));
+exports.LayoutItem = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['content', 'media'],
+    properties: Object.assign(Object.assign({}, common_1.BaseProps), { media: common_1.MediaProps, content: (0, lodash_1.omit)(schema_1.ContentBase, ['colSize', 'size', 'centered']), metaInfo: schema_2.default, border: {
+            type: 'boolean',
+        }, fullScreen: {
+            type: 'boolean',
+        } }),
+};

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

@@ -0,0 +1,29 @@
+import { LayoutItemProps, LinkTheme, MediaProps } from '../../models';
+export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['links']) => {
+    url: string;
+    text?: string | undefined;
+    textSize?: import("../../models").TextSize | undefined;
+    theme: LinkTheme;
+    colorTheme?: import("../../models").TextTheme | undefined;
+    arrow?: boolean | undefined;
+    target?: string | undefined;
+    metrikaGoals?: import("../../models").MetrikaGoal | undefined;
+    pixelEvents?: import("../../models").ButtonPixel | undefined;
+    context?: string | undefined;
+    analyticsEvents?: {
+        name: string;
+        type?: string | undefined;
+        counters?: import("../../models").AnalyticsCounters | undefined;
+        context?: string | undefined;
+        target?: string | undefined;
+    } | {
+        name: string;
+        type?: string | undefined;
+        counters?: import("../../models").AnalyticsCounters | undefined;
+        context?: string | undefined;
+        target?: string | undefined;
+    }[] | undefined;
+    className?: string | undefined;
+}[] | undefined;
+export declare const hasFullScreen: ({ dataLens, image }: MediaProps) => boolean;
+export declare const showFullScreenIcon: ({ youtube }: MediaProps) => boolean;

package/build/cjs/sub-blocks/LayoutItem/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showFullScreenIcon = exports.hasFullScreen = exports.getLayoutItemLinks = void 0;
+const getLayoutItemLinks = (links) => links === null || links === void 0 ? void 0 : links.map((link) => (Object.assign({ theme: 'normal' }, link)));
+exports.getLayoutItemLinks = getLayoutItemLinks;
+const hasFullScreen = ({ dataLens, image }) => {
+    // datalens and slider media card don't support fullScreen mode
+    return !(dataLens || Array.isArray(image));
+};
+exports.hasFullScreen = hasFullScreen;
+const showFullScreenIcon = ({ youtube }) => !youtube;
+exports.showFullScreenIcon = showFullScreenIcon;

package/build/cjs/sub-blocks/Quote/Quote.js

@@ -7,16 +7,16 @@ const utils_1 = require("../../utils");
 const models_1 = require("../../models");
 const components_1 = require("../../components");
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const blockPositionContext_1 = require("../../context/blockPositionContext");
 const utils_2 = require("../../components/Media/Image/utils");
 const hooks_1 = require("../../hooks");
-const blockPositionContext_1 = require("../../context/blockPositionContext");
 const b = (0, utils_1.block)('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
     const imageThemed = (0, utils_1.getThemedValue)(image, theme);
     const imageData = (0, utils_2.getMediaImage)(imageThemed);
-    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
     const defaultEvent = (0, react_1.useMemo)(() => ({
         name: 'quote-button-click',
         type: models_1.PredefinedEventTypes.Default,

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

@@ -64,9 +64,6 @@ export declare const Quote: {
                     };
                 };
             };
-            context: {
-                type: string;
-            };
             type: {};
             when: {};
         };

package/build/cjs/sub-blocks/Quote/schema.js

@@ -18,8 +18,6 @@ exports.Quote = {
             }, url: {
                 type: 'string',
                 pattern: schema_1.urlPattern,
-            }, theme: common_1.ThemeProps, author: common_1.authorItem, context: {
-                type: 'string',
-            } }),
+            }, theme: common_1.ThemeProps, author: common_1.authorItem }),
     },
 };

package/build/cjs/sub-blocks/index.d.ts

@@ -7,6 +7,7 @@ export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as BannerCard } from './BannerCard/BannerCard';
 export { default as TutorialCard } from './TutorialCard/TutorialCard';
 export { default as CardWithImage } from './CardWithImage/CardWithImage';
+export { default as LayoutItem } from './LayoutItem/LayoutItem';
 export { default as BackgroundCard } from './BackgroundCard/BackgroundCard';
 export { default as BasicCard } from './BasicCard/BasicCard';
 export { default as Content } from './Content/Content';

package/build/cjs/sub-blocks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HubspotForm = exports.Content = exports.BasicCard = exports.BackgroundCard = exports.CardWithImage = exports.TutorialCard = exports.BannerCard = exports.MediaCard = exports.PriceDetailed = exports.Partner = exports.NewsCard = exports.Quote = exports.Divider = void 0;
+exports.HubspotForm = exports.Content = exports.BasicCard = exports.BackgroundCard = exports.LayoutItem = exports.CardWithImage = exports.TutorialCard = exports.BannerCard = exports.MediaCard = exports.PriceDetailed = exports.Partner = exports.NewsCard = exports.Quote = exports.Divider = void 0;
 var Divider_1 = require("./Divider/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
 var Quote_1 = require("./Quote/Quote");
@@ -22,6 +22,8 @@ var TutorialCard_1 = require("./TutorialCard/TutorialCard");
 Object.defineProperty(exports, "TutorialCard", { enumerable: true, get: function () { return __importDefault(TutorialCard_1).default; } });
 var CardWithImage_1 = require("./CardWithImage/CardWithImage");
 Object.defineProperty(exports, "CardWithImage", { enumerable: true, get: function () { return __importDefault(CardWithImage_1).default; } });
+var LayoutItem_1 = require("./LayoutItem/LayoutItem");
+Object.defineProperty(exports, "LayoutItem", { enumerable: true, get: function () { return __importDefault(LayoutItem_1).default; } });
 var BackgroundCard_1 = require("./BackgroundCard/BackgroundCard");
 Object.defineProperty(exports, "BackgroundCard", { enumerable: true, get: function () { return __importDefault(BackgroundCard_1).default; } });
 var BasicCard_1 = require("./BasicCard/BasicCard");

package/build/cjs/text-transform/blocks.js

@@ -144,6 +144,23 @@ const config = {
             transformer: typografTransformer,
         },
     ],
+    [models_1.SubBlockType.LayoutItem]: [
+        {
+            fields: ['content'],
+            parser: parseContentLayout,
+            transformer: yfmTransformer,
+        },
+        {
+            fields: ['content'],
+            parser: parseContentLayoutTitle,
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['metaInfo'],
+            parser: (0, exports.createItemsParser)([]),
+            transformer: typografTransformer,
+        },
+    ],
     [models_1.SubBlockType.Quote]: {
         fields: ['text'],
         transformer: typografTransformer,

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

@@ -1,4 +1,4 @@
-export type HubspotEventName = 'onBeforeFormInit' | 'onFormReady' | 'onFormSubmit' | 'onFormSubmitted' | `_${string}`;
+export type HubspotEventName = 'onBeforeFormInit' | 'onFormReady' | 'onFormSubmit' | 'onFormSubmitted' | 'onFormError' | `_${string}`;
 export interface HubspotEventData {
     type: HubspotEventName | string;
     eventName: HubspotEventName;
@@ -11,6 +11,7 @@ export interface HubspotEventHandlers {
     onBeforeSubmit?: (arg: HubspotEventData) => void;
     onSubmit?: (arg: HubspotEventData) => void;
     onLoad?: (arg: HubspotEventData) => void;
+    onSubmitError?: (arg: HubspotEventData) => void;
 }
 export declare function loopBackHabspotEvents(formId: string): ({ data, source, origin }: MessageEvent) => void;
 export declare function handleHubspotEvents(handlers: HubspotEventHandlers, formId: string): ({ data }: MessageEvent) => void;

package/build/cjs/utils/hubspot.js

@@ -25,7 +25,7 @@ function loopBackHabspotEvents(formId) {
 exports.loopBackHabspotEvents = loopBackHabspotEvents;
 function handleHubspotEvents(handlers, formId) {
     return ({ data }) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!isHubspotEventData(data)) {
             return;
         }
@@ -49,6 +49,10 @@ function handleHubspotEvents(handlers, formId) {
                 (_d = handlers.onSubmit) === null || _d === void 0 ? void 0 : _d.call(handlers, data);
                 break;
             }
+            case 'onFormError': {
+                (_e = handlers.onSubmitError) === null || _e === void 0 ? void 0 : _e.call(handlers, data);
+                break;
+            }
             default:
                 break;
         }

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

@@ -270,9 +270,6 @@ export declare const BannerCardProps: {
                 required: string[];
             };
         };
-        context: {
-            type: string;
-        };
         animated: {
             type: string;
         };
@@ -553,9 +550,6 @@ export declare const BannerBlock: {
                     required: string[];
                 };
             };
-            context: {
-                type: string;
-            };
             animated: {
                 type: string;
             };
@@ -837,9 +831,6 @@ export declare const BannerCard: {
                     required: string[];
                 };
             };
-            context: {
-                type: string;
-            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/Banner/schema.js

@@ -17,9 +17,7 @@ export const BannerCardProps = {
         }), theme: ThemeProps, width: {
             type: 'string',
             enum: ['s', 'm', 'l'],
-        }, button: ButtonBlock, context: {
-            type: 'string',
-        } }),
+        }, button: ButtonBlock }),
 };
 export const BannerBlock = {
     'banner-block': BannerCardProps,