@gravity-ui/page-constructor 4.31.1-alpha.0 → 4.33.0

package/build/cjs/blocks/Header/Header.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const HeaderBreadcrumbs_1 = tslib_1.__importDefault(require("../../components/HeaderBreadcrumbs/HeaderBreadcrumbs"));
 const utils_1 = require("../../components/Media/Image/utils");
@@ -35,6 +36,7 @@ const HeaderBlock = (props) => {
     const imageThemed = image && (0, utils_2.getThemedValue)(image, theme);
     const videoThemed = video && (0, utils_2.getThemedValue)(video, theme);
     const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
+    const titleId = (0, uikit_1.useUniqId)();
     return (react_1.default.createElement("header", { className: b({
             ['has-media']: hasRightSideImage,
             ['full-width']: fullWidth,
@@ -57,7 +59,7 @@ const HeaderBlock = (props) => {
                             react_1.default.createElement(grid_1.Col, { sizes: titleSizes, className: b('content-inner') },
                                 overtitle && (react_1.default.createElement("div", { className: b('overtitle') },
                                     react_1.default.createElement(components_1.HTML, null, overtitle))),
-                                react_1.default.createElement("h1", { className: b('title') },
+                                react_1.default.createElement("h1", { className: b('title'), id: titleId },
                                     status,
                                     renderTitle ? renderTitle(title) : react_1.default.createElement(components_1.HTML, null, title)),
                                 description && (react_1.default.createElement("div", { className: b('description') },
@@ -66,7 +68,9 @@ const HeaderBlock = (props) => {
                                             constructorTheme: textTheme,
                                         } }))),
                                 buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },
-                                    react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
+                                    react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl", extraProps: {
+                                            'aria-describedby': titleId,
+                                        } }, button))))))),
                                 children))),
                     hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
 };

package/build/cjs/blocks/Tabs/Tabs.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
 const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs"));
 const FullscreenImage_1 = tslib_1.__importDefault(require("../../components/FullscreenImage/FullscreenImage"));
@@ -26,10 +27,16 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     const ref = (0, react_1.useRef)(null);
     const mediaWidth = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
     const mediaHeight = mediaWidth && (0, VideoBlock_1.getHeight)(mediaWidth);
+    const captionId = (0, uikit_1.useUniqId)();
     let imageProps;
     if (activeTabData) {
         const themedImage = (0, utils_2.getThemedValue)(activeTabData.image, theme);
         imageProps = themedImage && (0, utils_1.getMediaImage)(themedImage);
+        if (activeTabData.caption && imageProps) {
+            Object.assign(imageProps, {
+                'aria-describedby': captionId,
+            });
+        }
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
@@ -48,7 +55,7 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
         react_1.default.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })))),
-        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)));
+        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption'), id: captionId }, activeTabData.caption))));
     const onSelectTab = (id, e) => {
         setActiveTab(id);
         e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });

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

@@ -16,4 +16,3 @@ export { default as CardLayoutBlock } from './CardLayout/CardLayout';
 export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
 export { default as ShareBlock } from './Share/Share';
 export { default as FilterBlock } from './FilterBlock/FilterBlock';
-export { default as FormBlock } from './Form/Form';

package/build/cjs/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.FormBlock = exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
+exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
 var Banner_1 = require("./Banner/Banner");
 Object.defineProperty(exports, "BannerBlock", { enumerable: true, get: function () { return __importDefault(Banner_1).default; } });
 var Companies_1 = require("./Companies/Companies");
@@ -40,5 +40,3 @@ var Share_1 = require("./Share/Share");
 Object.defineProperty(exports, "ShareBlock", { enumerable: true, get: function () { return __importDefault(Share_1).default; } });
 var FilterBlock_1 = require("./FilterBlock/FilterBlock");
 Object.defineProperty(exports, "FilterBlock", { enumerable: true, get: function () { return __importDefault(FilterBlock_1).default; } });
-var Form_1 = require("./Form/Form");
-Object.defineProperty(exports, "FormBlock", { enumerable: true, get: function () { return __importDefault(Form_1).default; } });

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

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import { ButtonSize } from '@gravity-ui/uikit';
 import { Tabbable } from '../../models';
 export type Theme = 'default' | 'special';
-export interface BackLinkProps extends Tabbable {
+export interface BackLinkProps<T = HTMLElement> extends Tabbable {
     url: string;
     title: ReactNode;
     theme?: Theme;
@@ -10,5 +10,6 @@ export interface BackLinkProps extends Tabbable {
     className?: string;
     shouldHandleBackAction?: boolean;
     onClick?: () => void;
+    extraProps?: HTMLProps<T>;
 }
 export default function BackLink(props: BackLinkProps): JSX.Element;

package/build/cjs/components/BackLink/BackLink.js

@@ -9,7 +9,7 @@ const icons_1 = require("../../icons");
 const models_1 = require("../../models");
 function BackLink(props) {
     const { history } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, tabIndex, } = props;
+    const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, tabIndex, extraProps, } = props;
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.ShareButton, url);
     const backActionHandler = (0, react_1.useCallback)(async () => {
         handleAnalytics();
@@ -26,7 +26,7 @@ function BackLink(props) {
             history.push({ pathname: url });
         }
     }, [handleAnalytics, history, onClick, url]);
-    return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex },
+    return (react_1.default.createElement(uikit_1.Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex, extraProps: extraProps },
         react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowSidebar, size: 24 }),
         react_1.default.createElement("span", null, title)));
 }

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

@@ -3,7 +3,6 @@ import { ButtonProps as ButtonParams, QAProps } from '../../models';
 export interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {
     className?: string;
     url?: string;
-    urlTitle?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;

package/build/cjs/components/DefaultVideo/DefaultVideo.css

@@ -0,0 +1,5 @@
+.pc-default-video {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MediaVideoProps } from '../../models';
+type DefaultVideoRefType = HTMLVideoElement | undefined;
+interface DefaultVideoProps {
+    video: MediaVideoProps;
+    qa?: string;
+    customBarControlsClassName?: string;
+    className?: string;
+}
+export declare const DefaultVideo: React.ForwardRefExoticComponent<DefaultVideoProps & React.RefAttributes<DefaultVideoRefType>>;
+export {};

package/build/cjs/components/DefaultVideo/DefaultVideo.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultVideo = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const utils_2 = require("../Media/Video/utils");
+const CustomBarControls_1 = tslib_1.__importDefault(require("../ReactPlayer/CustomBarControls"));
+const b = (0, utils_1.block)('default-video');
+exports.DefaultVideo = react_1.default.forwardRef((props, ref) => {
+    const { video, qa, customBarControlsClassName } = props;
+    const { controls, customControlsOptions, muted: initiallyMuted } = video;
+    const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
+    const [isPaused, setIsPaused] = (0, react_1.useState)(false);
+    const [isMuted, setIsMuted] = (0, react_1.useState)(initiallyMuted);
+    const videoRef = (0, react_1.useRef)(null);
+    // one may not use this hook and work with `ref` variable only, but
+    // in this case one should support both function type and object type,
+    // according to ForwardedRef type.
+    // Currently used way with extra ref and useImperativeHandle is more
+    // convenient and allows us to work with object typed ref only,
+    // avoiding typeof ref === 'function' statements
+    (0, react_1.useImperativeHandle)(ref, () => {
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current)) {
+            return undefined;
+        }
+        return videoRef.current;
+    }, [videoRef]);
+    const onPlayToggle = (0, react_1.useCallback)(() => {
+        setIsPaused((value) => {
+            var _a, _b;
+            if (value) {
+                (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            }
+            else {
+                (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+            }
+            return !value;
+        });
+    }, [videoRef]);
+    const onMuteToggle = (0, react_1.useCallback)(() => {
+        setIsMuted((value) => !value);
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (customControlsType === models_1.CustomControlsType.WithPlayPauseButton) {
+            onPlayToggle();
+        }
+    }, [onPlayToggle, customControlsType]);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
+            // @ts-ignore
+            // eslint-disable-next-line react/no-unknown-property
+            pip: "false", className: b(), ref: videoRef, preload: "metadata", muted: isMuted, "aria-label": video.ariaLabel, onClick: onClick }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
+        controls === models_1.MediaVideoControlsType.Custom && (react_1.default.createElement(CustomBarControls_1.default, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
+                isMuted: Boolean(isMuted),
+                changeMute: onMuteToggle,
+            } }))));
+});
+exports.DefaultVideo.displayName = 'DefaultVideo';

package/build/cjs/components/FileLink/FileLink.js

@@ -41,13 +41,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, urlTitle, } = props;
+    const { href, text, type = 'vertical', textSize = 'm', className, theme = 'default', onClick, tabIndex, urlTitle, extraProps, } = props;
     const fileExt = getFileExt(href);
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown');
     const labelSize = LabelSizeMap[textSize];
     return (react_1.default.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         react_1.default.createElement(uikit_1.Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         react_1.default.createElement("div", { className: b('link') },
-            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, (0, utils_1.getLinkProps)(href, hostname)), text))));
+            react_1.default.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, (0, utils_1.getLinkProps)(href, hostname), extraProps), text))));
 };
 exports.default = FileLink;

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

@@ -1,9 +1,10 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, HTMLProps } from 'react';
 import { ImageProps } from '../Image/Image';
 export interface FullscreenImageProps extends ImageProps {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: CSSProperties;
+    extraProps?: HTMLProps<HTMLDivElement>;
 }
 declare const FullscreenImage: (props: FullscreenImageProps) => JSX.Element;
 export default FullscreenImage;

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

@@ -11,11 +11,11 @@ const b = (0, utils_1.block)('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const FullscreenImage = (props) => {
-    const { imageClassName, modalImageClass, imageStyle, alt = (0, i18n_1.default)('img-alt') } = props;
+    const { imageClassName, modalImageClass, imageStyle, alt = (0, i18n_1.default)('img-alt'), extraProps } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    return (react_1.default.createElement("div", { className: b() },
+    return (react_1.default.createElement("div", Object.assign({ className: b() }, extraProps),
         react_1.default.createElement("div", { className: b('image-wrapper') },
             react_1.default.createElement(Image_1.default, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             react_1.default.createElement("button", { className: b('icon-wrapper'), onClick: openModal },

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

@@ -15,7 +15,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (react
     react_1.default.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
 const Image = (props) => {
     const projectSettings = (0, react_1.useContext)(projectSettingsContext_1.ProjectSettingsContext);
-    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
+    const { src: imageSrc, alt, disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa } = props, rest = tslib_1.__rest(props, ["src", "alt", "disableCompress", "tablet", "desktop", "mobile", "style", "className", "onClick", "containerClassName", "qa"]);
     const [imgLoadingError, setImgLoadingError] = (0, react_1.useState)(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -30,6 +30,6 @@ const Image = (props) => {
         mobile && (react_1.default.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
         tablet && (react_1.default.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: constants_1.BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
         src && !disableWebp && (react_1.default.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
-        react_1.default.createElement(ImageBase_1.default, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+        react_1.default.createElement(ImageBase_1.default, Object.assign({ className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) }, rest))));
 };
 exports.default = Image;

package/build/cjs/components/Link/Link.js

@@ -28,7 +28,7 @@ function getArrowSize(size) {
     }
 }
 const LinkBlock = (props) => {
-    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, } = props;
+    const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, tabIndex, qa, urlTitle, extraProps, } = props;
     const qaAttributes = (0, index_1.getQaAttrubutes)(qa, ['normal']);
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.Link, url);
@@ -43,14 +43,14 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return (react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex }));
+                return (react_1.default.createElement(BackLink_1.default, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex, extraProps: extraProps }));
             case 'file-link':
             case 'underline':
-                return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex }));
+                return (react_1.default.createElement(FileLink_1.default, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex, extraProps: extraProps }));
             case 'normal': {
                 const linkProps = (0, utils_1.getLinkProps)(url, hostname, target);
                 const content = children || text;
-                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, linkProps, { "data-qa": qaAttributes.normal }), arrow ? (react_1.default.createElement(react_1.Fragment, null,
+                return (react_1.default.createElement("a", Object.assign({ className: b('link', { theme: colorTheme, 'has-arrow': arrow }), href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, linkProps, { "data-qa": qaAttributes.normal }, extraProps), arrow ? (react_1.default.createElement(react_1.Fragment, null,
                     react_1.default.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     react_1.default.createElement(uikit_1.Icon, { className: b('arrow'), data: icons_1.Chevron, size: getArrowSize(textSize) }))) : (content)));

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

@@ -4,11 +4,6 @@ unpredictable css rules order in build */
   position: relative;
   overflow: hidden;
 }
-.pc-media-component-video__item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
 .pc-media-component-video__react-player {
   display: flex;
   position: relative;

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

@@ -4,8 +4,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
+const DefaultVideo_1 = require("../../DefaultVideo/DefaultVideo");
 const ReactPlayer_1 = tslib_1.__importDefault(require("../../ReactPlayer/ReactPlayer"));
-const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-video');
 const Video = (props) => {
     const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
@@ -47,13 +47,9 @@ const Video = (props) => {
     ]);
     const defaultVideoBlock = (0, react_1.useMemo)(() => {
         return video.src.length && !hasVideoFallback ? (react_1.default.createElement("div", { className: b('wrap', videoClassName), style: { height }, "data-qa": qaAttributes.default },
-            react_1.default.createElement("video", { disablePictureInPicture: true, playsInline: true, 
-                // @ts-ignore
-                // eslint-disable-next-line react/no-unknown-property
-                pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true, "aria-label": video.ariaLabel }, (0, utils_2.getVideoTypesWithPriority)(video.src).map(({ src, type }, index) => (react_1.default.createElement("source", { key: index, src: src, type: type, "data-qa": qaAttributes.source })))))) : null;
+            react_1.default.createElement(DefaultVideo_1.DefaultVideo, { ref: ref, video: video, qa: qaAttributes.source }))) : null;
     }, [
-        video.src,
-        video.ariaLabel,
+        video,
         hasVideoFallback,
         videoClassName,
         height,

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

@@ -2,6 +2,7 @@ import { GridColumnSizesType } from '../../grid';
 import { ClassNameProps, TitleProps as TitleParams } from '../../models';
 export interface TitleProps extends TitleParams {
     colSizes?: GridColumnSizesType;
+    id?: string;
 }
-declare const Title: ({ title, subtitle, className, colSizes, }: TitleProps & ClassNameProps) => JSX.Element | null;
+declare const Title: ({ title, subtitle, className, colSizes, id, }: TitleProps & ClassNameProps) => JSX.Element | null;
 export default Title;

package/build/cjs/components/Title/Title.js

@@ -7,12 +7,12 @@ const utils_1 = require("../../utils");
 const YFMWrapper_1 = tslib_1.__importDefault(require("../YFMWrapper/YFMWrapper"));
 const TitleItem_1 = tslib_1.__importDefault(require("./TitleItem"));
 const b = (0, utils_1.block)('title');
-const Title = ({ title, subtitle, className, colSizes = { all: 12, sm: 8 }, }) => {
+const Title = ({ title, subtitle, className, colSizes = { all: 12, sm: 8 }, id, }) => {
     if (!title && !subtitle) {
         return null;
     }
     const _a = !title || typeof title === 'string' ? { text: title } : title, { text } = _a, titleProps = tslib_1.__rest(_a, ["text"]);
-    return (react_1.default.createElement("div", { className: b(null, className) },
+    return (react_1.default.createElement("div", { className: b(null, className), id: id },
         text && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },
             react_1.default.createElement(TitleItem_1.default, Object.assign({ text: text }, titleProps)))),
         subtitle && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },

package/build/cjs/components/Title/TitleItem.css

@@ -50,13 +50,13 @@ unpredictable css rules order in build */
   }
 }
 .pc-title-item__arrow {
-  margin-top: 10px;
+  margin-top: 9px;
 }
 .pc-title-item__arrow_size_xs {
-  margin-top: 7px;
+  margin-top: 6px;
 }
 .pc-title-item__arrow_size_s {
-  margin-top: 5px;
+  margin-top: 4px;
 }
 .pc-title-item__link {
   color: inherit;

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

@@ -1,5 +1,20 @@
-import { YandexFormProps } from '../../models';
+import { PixelEvent } from '../../models';
+import { AnalyticsEventsBase } from '../../models/common';
 export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
-export declare const YANDEX_FORM_SECTION = "surveys";
+export interface YandexFormProps extends AnalyticsEventsBase {
+    id: number | string;
+    containerId?: string;
+    theme?: string;
+    className?: string;
+    headerHeight?: number;
+    customFormOrigin?: string;
+    params?: {
+        [key: string]: string;
+    };
+    onSubmit?: () => void;
+    onLoad?: () => void;
+    metrikaGoals?: string | string[];
+    pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
+}
 declare const YandexForm: (props: YandexFormProps) => JSX.Element;
 export default YandexForm;

package/build/cjs/components/YandexForm/YandexForm.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YANDEX_FORM_SECTION = exports.YANDEX_FORM_ORIGIN = void 0;
+exports.YANDEX_FORM_ORIGIN = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const localeContext_1 = require("../../context/localeContext");
@@ -11,15 +11,13 @@ const common_1 = require("../../models/common");
 const utils_1 = require("../../utils");
 const constants_1 = require("../constants");
 exports.YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
-exports.YANDEX_FORM_SECTION = 'surveys';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = (0, utils_1.block)('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, customFormSection, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = constants_1.HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, } = props;
     const formContainerRef = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
     const yaFormOrigin = customFormOrigin || exports.YANDEX_FORM_ORIGIN;
-    const yaFormSection = customFormSection || exports.YANDEX_FORM_SECTION;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(common_1.DefaultEventNames.YandexFormSubmit);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
@@ -41,7 +39,7 @@ const YandexForm = (props) => {
                 queryParams.set(param, params[param]);
             });
         }
-        const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;
+        const src = `${yaFormOrigin}/surveys/${id}/?${queryParams}`;
         if (iframeRef.current) {
             iframeRef.current.src = src;
         }
@@ -56,7 +54,7 @@ const YandexForm = (props) => {
             iframeRef.current.width = '100%';
             container.appendChild(iframeRef.current);
         }
-    }, [locale.lang, theme, isMobile, yaFormOrigin, yaFormSection, id, containerId, params]);
+    }, [locale.lang, theme, isMobile, yaFormOrigin, id, containerId, params]);
     const handleSubmit = (0, react_1.useCallback)(() => {
         if (formContainerRef && formContainerRef.current) {
             const { top } = formContainerRef.current.getBoundingClientRect();

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

@@ -17,7 +17,6 @@ export declare const blockMap: {
     "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
     "map-block": ({ map, ...props }: import("./models").MapBlockProps) => JSX.Element;
     "filter-block": import("react").FC<import("./models").FilterBlockProps>;
-    "form-block": import("react").FC<import("./models").FormBlockProps>;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/cjs/constructor-items.js

@@ -26,7 +26,6 @@ exports.blockMap = {
     [models_1.BlockType.ShareBlock]: blocks_1.ShareBlock,
     [models_1.BlockType.MapBlock]: blocks_1.MapBlock,
     [models_1.BlockType.FilterBlock]: blocks_1.FilterBlock,
-    [models_1.BlockType.FormBlock]: blocks_1.FormBlock,
 };
 exports.subBlockMap = {
     [models_1.SubBlockType.Divider]: sub_blocks_1.Divider,

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

@@ -3,8 +3,8 @@ import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType } 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, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
-import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps } from './common';
+import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
@@ -23,8 +23,7 @@ export declare enum BlockType {
     ContentLayoutBlock = "content-layout-block",
     ShareBlock = "share-block",
     MapBlock = "map-block",
-    FilterBlock = "filter-block",
-    FormBlock = "form-block"
+    FilterBlock = "filter-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -275,7 +274,9 @@ export interface ContentItemProps {
 }
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
+    titleId?: string;
     text?: string;
+    textId?: string;
     additionalInfo?: string;
     links?: LinkProps[];
     buttons?: ButtonProps[];
@@ -296,29 +297,6 @@ export interface ShareBlockProps {
     items: PCShareSocialNetwork[];
     title?: string;
 }
-export declare enum FormBlockDataTypes {
-    YANDEX = "yandex",
-    HUBSPOT_INLINE = "hubspot-inline"
-}
-export declare enum FormBlockDirection {
-    FormContent = "form-content",
-    ContentForm = "content-form",
-    Center = "center"
-}
-export interface FormBlockYandexData {
-    yandex: YandexFormProps;
-}
-export interface FormBlockHubspotData {
-    hubspot: HubspotFormProps;
-}
-export type FormBlockData = FormBlockYandexData | FormBlockHubspotData;
-export interface FormBlockProps {
-    formData: FormBlockData;
-    title?: string;
-    textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
-    direction?: FormBlockDirection;
-    background?: BackgroundImageProps;
-}
 export type HeaderBlockModel = {
     type: BlockType.HeaderBlock;
 } & HeaderBlockProps;
@@ -373,9 +351,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-export type FormBlockModel = {
-    type: BlockType.FormBlock;
-} & FormBlockProps;
-type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel | FormBlockModel;
+type BlockModels = SliderBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | TableBlockModel | TabsBlockModel | HeaderBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormBlockDirection = exports.FormBlockDataTypes = exports.PCShareSocialNetwork = exports.SliderType = exports.SliderBreakpointNames = exports.HeaderBlockTypes = exports.BlockTypes = exports.BlockType = void 0;
+exports.PCShareSocialNetwork = exports.SliderType = exports.SliderBreakpointNames = exports.HeaderBlockTypes = exports.BlockTypes = exports.BlockType = void 0;
 var BlockType;
 (function (BlockType) {
     BlockType["PromoFeaturesBlock"] = "promo-features-block";
@@ -21,7 +21,6 @@ var BlockType;
     BlockType["ShareBlock"] = "share-block";
     BlockType["MapBlock"] = "map-block";
     BlockType["FilterBlock"] = "filter-block";
-    BlockType["FormBlock"] = "form-block";
 })(BlockType = exports.BlockType || (exports.BlockType = {}));
 exports.BlockTypes = Object.values(BlockType);
 exports.HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];
@@ -45,14 +44,3 @@ var PCShareSocialNetwork;
     PCShareSocialNetwork["Facebook"] = "facebook";
     PCShareSocialNetwork["LinkedIn"] = "linkedin";
 })(PCShareSocialNetwork = exports.PCShareSocialNetwork || (exports.PCShareSocialNetwork = {}));
-var FormBlockDataTypes;
-(function (FormBlockDataTypes) {
-    FormBlockDataTypes["YANDEX"] = "yandex";
-    FormBlockDataTypes["HUBSPOT_INLINE"] = "hubspot-inline";
-})(FormBlockDataTypes = exports.FormBlockDataTypes || (exports.FormBlockDataTypes = {}));
-var FormBlockDirection;
-(function (FormBlockDirection) {
-    FormBlockDirection["FormContent"] = "form-content";
-    FormBlockDirection["ContentForm"] = "content-form";
-    FormBlockDirection["Center"] = "center";
-})(FormBlockDirection = exports.FormBlockDirection || (exports.FormBlockDirection = {}));