@gravity-ui/page-constructor 5.18.1-alpha.2 → 5.18.1-alpha.4

package/build/cjs/navigation/index.js

@@ -1,8 +1,20 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navigation = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components/Navigation/Navigation"), exports);
+tslib_1.__exportStar(require("./components/DesktopNavigation/DesktopNavigation"), exports);
+tslib_1.__exportStar(require("./components/MobileNavigation/MobileNavigation"), exports);
+tslib_1.__exportStar(require("./components/MobileMenuButton/MobileMenuButton"), exports);
+tslib_1.__exportStar(require("./components/NavigationList/NavigationList"), exports);
+tslib_1.__exportStar(require("./components/NavigationListItem/NavigationListItem"), exports);
+tslib_1.__exportStar(require("./components/NavigationItem/"), exports);
+tslib_1.__exportStar(require("./components/NavigationItem/NavigationItem"), exports);
+tslib_1.__exportStar(require("./components/NavigationPopup/NavigationPopup"), exports);
+tslib_1.__exportStar(require("./components/SocialIcon/SocialIcon"), exports);
+tslib_1.__exportStar(require("./components/Logo/Logo"), exports);
+tslib_1.__exportStar(require("./hooks"), exports);
+tslib_1.__exportStar(require("./models"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
 var Standalone_1 = require("./components/Standalone");
-Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return __importDefault(Standalone_1).default; } });
+Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return tslib_1.__importDefault(Standalone_1).default; } });

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

@@ -44,6 +44,7 @@ export interface DesktopNavigationProps extends MobileMenuButtonProps, ActiveIte
     logo: ThemedNavigationLogoData;
     leftItemsWithIconSize: NavigationItemModel[];
     rightItemsWithIconSize?: NavigationItemModel[];
+    customMobileHeaderItems?: NavigationItemModel[];
 }
 export interface MobileNavigationProps extends ClassNameProps, ActiveItemProps {
     isOpened?: boolean;

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

@@ -796,6 +796,14 @@ export declare const cardSchemas: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                 } & {
                     optionName: string;
@@ -1541,11 +1549,17 @@ export declare const cardSchemas: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
                 type: string;
             };
+            videoIframe: {
+                type: string;
+            };
             parallax: {
                 type: string;
             };
@@ -1579,7 +1593,8 @@ export declare const cardSchemas: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

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

@@ -203,6 +203,9 @@ export declare const VideoProps: {
         ariaLabel: {
             type: string;
         };
+        contain: {
+            type: string;
+        };
     };
 };
 export declare const ThemeProps: {
@@ -365,6 +368,9 @@ export declare const BackgroundProps: {
                 ariaLabel: {
                     type: string;
                 };
+                contain: {
+                    type: string;
+                };
             };
         };
         height: {
@@ -1129,11 +1135,17 @@ export declare const MediaProps: {
             ariaLabel: {
                 type: string;
             };
+            contain: {
+                type: string;
+            };
         };
     };
     youtube: {
         type: string;
     };
+    videoIframe: {
+        type: string;
+    };
     parallax: {
         type: string;
     };
@@ -1245,7 +1257,8 @@ export declare const MediaProps: {
         })[];
     };
     ratio: {
-        type: string;
+        type: string[];
+        pattern: string;
     };
     iframe: {
         type: string;

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

@@ -164,6 +164,9 @@ exports.VideoProps = {
         ariaLabel: {
             type: 'string',
         },
+        contain: {
+            type: 'boolean',
+        },
     },
 };
 exports.ThemeProps = {
@@ -527,6 +530,9 @@ exports.MediaProps = {
     youtube: {
         type: 'string',
     },
+    videoIframe: {
+        type: 'string',
+    },
     parallax: {
         type: 'boolean',
     },
@@ -544,7 +550,8 @@ exports.MediaProps = {
         anyOf: [event_1.AnalyticsEventSchema, { type: 'array', items: event_1.AnalyticsEventSchema }],
     },
     ratio: {
-        type: 'number',
+        type: ['number', 'string'],
+        pattern: '^auto$',
     },
     iframe: Object.assign({}, IframeProps),
     margins: {

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

@@ -45,6 +45,14 @@ export declare const BackgroundCard: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                 } & {
                     optionName: string;

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

@@ -8,7 +8,7 @@ const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('banner-card');
 const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
+    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' } = {}, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
     const theme = (0, theme_1.useTheme)();
     const contentStyle = {};
     if (color) {
@@ -21,8 +21,8 @@ const BannerCard = (props) => {
                     react_1.default.createElement("h2", { className: b('title') },
                         react_1.default.createElement(components_1.HTML, null, title)),
                     subtitle && (react_1.default.createElement(components_1.YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                react_1.default.createElement(components_1.RouterLink, { href: url },
-                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
+                url && (react_1.default.createElement(components_1.RouterLink, { href: url },
+                    react_1.default.createElement(components_1.Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text !== null && text !== void 0 ? text : '', url: url, target: target })))),
             react_1.default.createElement(components_1.BackgroundImage, { className: b('image'), src: (0, utils_1.getThemedValue)(image, theme), disableCompress: disableCompress }))));
 };
 exports.BannerCard = BannerCard;

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

@@ -148,12 +148,12 @@ unpredictable css rules order in build */
 .pc-content_theme_light .pc-content__title a:hover {
   color: var(--g-color-text-dark-secondary);
 }
-.pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__buttons), .pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__buttons), .pc-content_control-position_bottom .pc-content__notice:has(+ .pc-content__links),
 .pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__buttons),
-.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__list:has(+ .pc-content__links),
 .pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__buttons),
-.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__link),
+.pc-content_control-position_bottom .pc-content__text:has(+ .pc-content__links),
 .pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__buttons),
-.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__link) {
+.pc-content_control-position_bottom .pc-content__title:has(+ .pc-content__links) {
   margin-bottom: auto;
 }

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

@@ -234,16 +234,18 @@ unpredictable css rules order in build */
 }
 .pc-hubspot-form .hs-richtext p {
   color: var(--g-color-text-primary);
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
-  font-weight: var(--g-text-body-font-weight);
   margin: 20px 0;
 }
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
-  font-weight: var(--g-text-body-font-weight);
   color: var(--g-color-text-danger);
 }
 .pc-hubspot-form .legal-consent-container {
@@ -274,9 +276,10 @@ unpredictable css rules order in build */
   order: 4;
 }
 .pc-hubspot-form .hs-error-msg {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);
-  font-weight: var(--g-text-body-font-weight);
   color: var(--g-color-text-danger);
   display: block;
 }
@@ -333,9 +336,10 @@ unpredictable css rules order in build */
   border: 1px solid var(--g-color-line-generic);
 }
 .pc-hubspot-form .hs_recaptcha div {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);
-  font-weight: var(--g-text-body-font-weight);
 }
 .pc-hubspot-form_mobile .hs-richtext,
 .pc-hubspot-form_mobile .hs-form-field,

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

@@ -1,4 +1,4 @@
-.pc-image-card_border_shadow {
+a.pc-image-card_border_shadow, .pc-image-card_border_shadow {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
@@ -58,4 +58,37 @@ unpredictable css rules order in build */
 }
 .pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__content {
   padding-bottom: 24px;
+}
+
+a.pc-image-card {
+  color: inherit;
+  text-decoration: none;
+  min-height: 248px;
+  height: 100%;
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--g-color-base-float);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+a.pc-image-card:hover, a.pc-image-card:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+a.pc-image-card_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
+a.pc-image-card_border_line, a.pc-image-card_border_none {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_line:hover, a.pc-image-card_border_none:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_shadow:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow:hover {
+  background-color: var(--pc-color-base-float-hover);
 }

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

@@ -24,7 +24,7 @@ const ImageCard = (props) => {
             react_1.default.createElement(components_1.Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
         hasContent && (react_1.default.createElement("div", { className: b('content') },
             react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: CONTENT_COL_SIZES, controlPosition: areControlsInFooter ? 'bottom' : 'default' })))));
-    return url ? (react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
+    return url ? (react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, style: { backgroundColor }, extraProps: {
             draggable: false,
             onDragStart: (e) => e.preventDefault(),
         } }, cardContent)) : (react_1.default.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } }, cardContent));

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

@@ -157,11 +157,17 @@ export declare const LayoutItem: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
                 type: string;
             };
+            videoIframe: {
+                type: string;
+            };
             parallax: {
                 type: string;
             };
@@ -273,7 +279,8 @@ export declare const LayoutItem: {
                 })[];
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

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

@@ -14,4 +14,4 @@ export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['lin
     tabIndex?: number | undefined;
 }[] | undefined;
 export declare const hasFullscreen: ({ dataLens, image }: MediaProps) => boolean;
-export declare const showFullscreenIcon: ({ youtube }: MediaProps) => boolean;
+export declare const showFullscreenIcon: ({ youtube, videoIframe }: MediaProps) => boolean;

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

@@ -8,5 +8,5 @@ const hasFullscreen = ({ dataLens, image }) => {
     return !(dataLens || Array.isArray(image));
 };
 exports.hasFullscreen = hasFullscreen;
-const showFullscreenIcon = ({ youtube }) => !youtube;
+const showFullscreenIcon = ({ youtube, videoIframe }) => !(youtube || videoIframe);
 exports.showFullscreenIcon = showFullscreenIcon;

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

@@ -240,11 +240,17 @@ export declare const MediaCardBlock: {
                     ariaLabel: {
                         type: string;
                     };
+                    contain: {
+                        type: string;
+                    };
                 };
             };
             youtube: {
                 type: string;
             };
+            videoIframe: {
+                type: string;
+            };
             parallax: {
                 type: string;
             };
@@ -278,7 +284,8 @@ export declare const MediaCardBlock: {
                 type: string;
             };
             ratio: {
-                type: string;
+                type: string[];
+                pattern: string;
             };
             iframe: {
                 type: string;

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

@@ -53,7 +53,7 @@ function typograf(text, lang = 'ru') {
         en: ['en-US', 'ru'],
     };
     const tp = new typograf_1.default({
-        locale: localeByLang[lang],
+        locale: localeByLang[lang] || lang,
         htmlEntity: { type: 'name' },
     });
     enableRules(tp);

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

@@ -6,8 +6,8 @@ import { block } from '../../utils';
 import './Banner.css';
 const b = block('banner-block');
 export const BannerBlock = (props) => {
-    const { animated } = props, bannerProps = __rest(props, ["animated"]);
-    return (React.createElement(AnimateBlock, { className: b(), animate: animated },
+    const { animated, className } = props, bannerProps = __rest(props, ["animated", "className"]);
+    return (React.createElement(AnimateBlock, { className: b(null, className), animate: animated },
         React.createElement(BannerCard, Object.assign({}, bannerProps))));
 };
 export default BannerBlock;

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

@@ -44,6 +44,14 @@ export declare const CardLayoutProps: {
                     disableCompress: {
                         type: string;
                     };
+                    loading: {
+                        type: string;
+                        enum: string[];
+                    };
+                    fetchPriority: {
+                        type: string;
+                        enum: string[];
+                    };
                 };
                 optionName: string;
                 type: string;
@@ -73,6 +81,14 @@ export declare const CardLayoutProps: {
                     disableCompress: {
                         type: string;
                     };
+                    loading: {
+                        type: string;
+                        enum: string[];
+                    };
+                    fetchPriority: {
+                        type: string;
+                        enum: string[];
+                    };
                 };
                 optionName: string;
                 type: string;
@@ -216,6 +232,14 @@ export declare const CardLayoutBlock: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                     optionName: string;
                     type: string;
@@ -245,6 +269,14 @@ export declare const CardLayoutBlock: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                     optionName: string;
                     type: string;

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

@@ -42,6 +42,14 @@ export declare const ContentLayoutBlock: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                 } | {
                     optionName: string;
@@ -56,9 +64,7 @@ export declare const ContentLayoutBlock: {
                         tablet: {
                             type: string;
                             pattern: string;
-                        }; /**
-                         * @deprecated Use params on top level instead
-                         */
+                        };
                         mobile: {
                             type: string;
                             pattern: string;
@@ -70,6 +76,14 @@ export declare const ContentLayoutBlock: {
                         disableCompress: {
                             type: string;
                         };
+                        loading: {
+                            type: string;
+                            enum: string[];
+                        };
+                        fetchPriority: {
+                            type: string;
+                            enum: string[];
+                        };
                     };
                 })[];
             };
@@ -234,6 +248,14 @@ export declare const ContentLayoutBlock: {
                             disableCompress: {
                                 type: string;
                             };
+                            loading: {
+                                type: string;
+                                enum: string[];
+                            };
+                            fetchPriority: {
+                                type: string;
+                                enum: string[];
+                            };
                         };
                     } | {
                         optionName: string;
@@ -248,9 +270,7 @@ export declare const ContentLayoutBlock: {
                             tablet: {
                                 type: string;
                                 pattern: string;
-                            }; /**
-                             * @deprecated Use params on top level instead
-                             */
+                            };
                             mobile: {
                                 type: string;
                                 pattern: string;
@@ -262,6 +282,14 @@ export declare const ContentLayoutBlock: {
                             disableCompress: {
                                 type: string;
                             };
+                            loading: {
+                                type: string;
+                                enum: string[];
+                            };
+                            fetchPriority: {
+                                type: string;
+                                enum: string[];
+                            };
                         };
                     })[];
                 };

package/build/esm/blocks/Header/Header.css

@@ -27,6 +27,9 @@ unpredictable css rules order in build */
 .pc-header-block__content_theme_dark .pc-header-block__overtitle {
   color: var(--g-color-text-light-primary);
 }
+.pc-header-block__content_theme_dark .pc-header-block__description .yfm {
+  color: var(--g-color-text-light-primary);
+}
 .pc-header-block__content_vertical-offset {
   margin: 16px 0;
 }

package/build/esm/blocks/Header/Header.js

@@ -38,6 +38,7 @@ export const HeaderBlock = (props) => {
             ['has-media']: hasRightSideImage,
             ['full-width']: fullWidth,
             ['media-view']: mediaView,
+            ['controls-view']: textTheme,
         }, className) },
         backgroundThemed && fullWidth && React.createElement(FullWidthBackground, { background: backgroundThemed }),
         backgroundThemed && React.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
@@ -59,7 +60,7 @@ export const HeaderBlock = (props) => {
                                 React.createElement("h1", { className: b('title'), id: titleId },
                                     status,
                                     renderTitle ? renderTitle(title) : React.createElement(HTML, null, title)),
-                                description && (React.createElement("div", { className: b('description') },
+                                description && (React.createElement("div", { className: b('description', { theme: textTheme }) },
                                     React.createElement(YFMWrapper, { content: description, modifiers: {
                                             constructor: true,
                                             constructorTheme: textTheme,