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

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

@@ -1,7 +1,7 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
-import { AnalyticsEventsBase, ClassNameProps, PixelEvent, PixelEventType, QAProps } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -95,7 +95,7 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageInfoProps {
+export interface ImageInfoProps extends Pick<HTMLProps<HTMLImageElement>, 'aria-describedby'> {
     alt?: string;
     disableCompress?: boolean;
 }
@@ -138,6 +138,7 @@ export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     target?: string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
+    extraProps?: HTMLProps<HTMLAnchorElement>;
 }
 export interface FileLinkProps extends ClassNameProps, Tabbable {
     href: string;
@@ -147,11 +148,13 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
     theme?: ContentTheme;
     urlTitle?: string;
     onClick?: () => void;
+    extraProps?: HTMLProps<HTMLAnchorElement>;
 }
 export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
 export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {
     text: string;
     url: string;
+    urlTitle?: string;
     primary?: boolean;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
@@ -337,20 +340,4 @@ export interface TitleProps {
     title?: TitleItemProps | string;
     subtitle?: string;
 }
-export interface YandexFormProps extends AnalyticsEventsBase {
-    id: number | string;
-    containerId?: string;
-    theme?: string;
-    className?: string;
-    headerHeight?: number;
-    customFormOrigin?: string;
-    customFormSection?: string;
-    params?: {
-        [key: string]: string;
-    };
-    onSubmit?: () => void;
-    onLoad?: () => void;
-    metrikaGoals?: string | string[];
-    pixelEvents?: string | string[] | PixelEvent | PixelEvent[];
-}
 export {};

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

@@ -1,6 +1,4 @@
-import { Block, ConstructorItem, FormBlockData, FormBlockHubspotData, FormBlockYandexData } from './';
+import { Block, ConstructorItem } from './';
 import { MetrikaGoal, NewMetrikaGoal } from './index';
 export declare function isBlock(block: ConstructorItem): block is Block;
 export declare function isNewMetrikaFormat(metrika: MetrikaGoal): metrika is NewMetrikaGoal[];
-export declare function isYandexDataForm(data: FormBlockData): data is FormBlockYandexData;
-export declare function isHubspotDataForm(data: FormBlockData): data is FormBlockHubspotData;

package/build/cjs/models/guards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isHubspotDataForm = exports.isYandexDataForm = exports.isNewMetrikaFormat = exports.isBlock = void 0;
+exports.isNewMetrikaFormat = exports.isBlock = void 0;
 const _1 = require("./");
 function isBlock(block) {
     return block.type in _1.BlockTypes;
@@ -10,11 +10,3 @@ function isNewMetrikaFormat(metrika) {
     return Boolean(Array.isArray(metrika) && metrika.length && typeof metrika[0] === 'object');
 }
 exports.isNewMetrikaFormat = isNewMetrikaFormat;
-function isYandexDataForm(data) {
-    return Boolean(data.yandex);
-}
-exports.isYandexDataForm = isYandexDataForm;
-function isHubspotDataForm(data) {
-    return Boolean(data.hubspot);
-}
-exports.isHubspotDataForm = isHubspotDataForm;

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

@@ -62,6 +62,7 @@ export interface NavigationLogoData {
     icon: ImageProps;
     text?: string;
     url?: string;
+    urlTitle?: string;
 }
 export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<NavigationLogoData>;
 export interface HeaderData {

package/build/cjs/navigation/components/Logo/Logo.css

@@ -7,6 +7,7 @@ unpredictable css rules order in build */
 .pc-logo {
   display: flex;
   align-items: center;
+  text-decoration: none;
 }
 .pc-logo__icon {
   display: flex;

package/build/cjs/navigation/components/Logo/Logo.js

@@ -1,21 +1,26 @@
 "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 components_1 = require("../../../components");
 const utils_1 = require("../../../components/Media/Image/utils");
 const RouterLink_1 = tslib_1.__importDefault(require("../../../components/RouterLink/RouterLink"));
+const locationContext_1 = require("../../../context/locationContext");
 const theme_1 = require("../../../context/theme");
 const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('logo');
 const Logo = (props) => {
+    const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const theme = (0, theme_1.useTheme)();
     const themedLogoProps = (0, utils_2.getThemedValue)(props, theme) || props;
     const imageData = (0, utils_1.getMediaImage)(themedLogoProps.icon || props.icon);
     const textData = themedLogoProps.text || props.text;
-    return (react_1.default.createElement(RouterLink_1.default, { href: themedLogoProps.url || props.url || '/', passHref: true },
-        react_1.default.createElement("div", { className: b(null, props.className) },
-            imageData && react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, imageData)),
-            react_1.default.createElement("span", { className: b('text') }, textData))));
+    const url = themedLogoProps.url || props.url || '/';
+    const urlTitle = themedLogoProps.urlTitle || props.urlTitle || textData;
+    const linkExtraProps = (0, utils_2.getLinkProps)(url, hostname);
+    const content = (react_1.default.createElement(react_1.Fragment, null,
+        imageData && react_1.default.createElement(components_1.Image, Object.assign({ className: b('icon') }, imageData)),
+        react_1.default.createElement("span", { className: b('text') }, textData)));
+    return (react_1.default.createElement(RouterLink_1.default, { href: url, passHref: true }, Link ? (react_1.default.createElement("span", { className: b(null, props.className) }, content)) : (react_1.default.createElement("a", Object.assign({ className: b(null, props.className), href: url, title: urlTitle }, linkExtraProps), content))));
 };
 exports.default = Logo;

package/build/cjs/schema/constants.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.constructorCardSchemaNames = exports.constructorBlockSchemaNames = exports.cardSchemas = exports.blockSchemas = void 0;
 const blocks_1 = require("./validators/blocks");
 const sub_blocks_1 = require("./validators/sub-blocks");
-exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock), blocks_1.FormBlock);
+exports.blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.Divider), blocks_1.ExtendedFeaturesBlock), blocks_1.PromoFeaturesBlock), blocks_1.SliderBlock), blocks_1.QuestionsBlock), blocks_1.HeaderBlock), blocks_1.BannerBlock), blocks_1.CompaniesBlock), blocks_1.MediaBlock), blocks_1.MapBlock), blocks_1.InfoBlock), blocks_1.TableBlock), blocks_1.TabsBlock), blocks_1.HeaderSliderBlock), blocks_1.IconsBlock), blocks_1.CardLayoutBlock), blocks_1.ContentLayoutBlock), blocks_1.ShareBlock), blocks_1.FilterBlock);
 exports.cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, sub_blocks_1.MediaCardBlock), blocks_1.BannerCard), sub_blocks_1.PriceDetailedBlock), sub_blocks_1.BackgroundCard), sub_blocks_1.Quote), sub_blocks_1.BasicCard);
 exports.constructorBlockSchemaNames = [
     'divider',
@@ -30,7 +30,6 @@ exports.constructorBlockSchemaNames = [
     'content-layout-block',
     'share-block',
     'filter-block',
-    'form-block',
 ];
 exports.constructorCardSchemaNames = [
     'media-card',

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

@@ -16,4 +16,3 @@ export * from '../../blocks/CardLayout/schema';
 export * from '../../blocks/ContentLayout/schema';
 export * from '../../blocks/Share/schema';
 export * from '../../blocks/FilterBlock/schema';
-export * from '../../blocks/Form/schema';

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

@@ -19,4 +19,3 @@ tslib_1.__exportStar(require("../../blocks/CardLayout/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/ContentLayout/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/Share/schema"), exports);
 tslib_1.__exportStar(require("../../blocks/FilterBlock/schema"), exports);
-tslib_1.__exportStar(require("../../blocks/Form/schema"), exports);

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const __1 = require("../");
 const CardBase_1 = tslib_1.__importDefault(require("../../components/CardBase/CardBase"));
 const Image_1 = tslib_1.__importDefault(require("../../components/Image/Image"));
@@ -12,10 +13,12 @@ const b = (0, utils_2.block)('basic-card');
 const BasicCard = (props) => {
     const { title, text, icon, additionalInfo, links, buttons, iconPosition = sub_blocks_1.IconPosition.Top } = props, cardParams = tslib_1.__rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons", "iconPosition"]);
     const iconProps = icon && (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement(CardBase_1.default, Object.assign({ className: b() }, cardParams),
+    const titleId = (0, uikit_1.useUniqId)();
+    const descriptionId = (0, uikit_1.useUniqId)();
+    return (react_1.default.createElement(CardBase_1.default, Object.assign({ className: b() }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
         react_1.default.createElement(CardBase_1.default.Content, null,
             react_1.default.createElement("div", { className: b('content', { ['icon-position']: iconPosition }) },
                 iconProps && (react_1.default.createElement(Image_1.default, Object.assign({}, iconProps, { className: b('icon', { ['icon-position']: iconPosition }) }))),
-                react_1.default.createElement(__1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s", className: b({ ['content-layout']: iconPosition }) })))));
+                react_1.default.createElement(__1.Content, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s", className: b({ ['content-layout']: iconPosition }) })))));
 };
 exports.default = BasicCard;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const Link_1 = tslib_1.__importDefault(require("../../components/Link/Link"));
 const grid_1 = require("../../grid");
@@ -37,16 +38,18 @@ function getButtonSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
+    const { title, titleId: titleIdFromProps, text, textId, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
     const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['links', 'link', 'buttons', 'button', 'list']);
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title;
     const hasTitle = Boolean(title);
+    const defaultTitleId = (0, uikit_1.useUniqId)();
+    const titleId = titleIdFromProps || defaultTitleId;
     return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
-        title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 } }),
+        title && (react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })),
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
-            react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
+            react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId }))),
         (list === null || list === void 0 ? void 0 : list.length) ? react_1.default.createElement(ContentList_1.default, { list: list, size: size, qa: qaAttributes.list }) : null,
         additionalInfo && (react_1.default.createElement("div", { className: b('notice') },
             react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
@@ -54,7 +57,11 @@ const Content = (props) => {
                     'constructor-notice': true,
                     [`constructor-size-${size}`]: true,
                 } }))),
-        links && (react_1.default.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: qaAttributes.link })))))),
-        buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: qaAttributes.button }))))))));
+        links && (react_1.default.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: qaAttributes.link, extraProps: {
+                'aria-describedby': link.urlTitle ? undefined : titleId,
+            } })))))),
+        buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: qaAttributes.button, extraProps: {
+                'aria-describedby': item.urlTitle ? undefined : titleId,
+            } }))))))));
 };
 exports.default = Content;

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

@@ -239,16 +239,6 @@ unpredictable css rules order in build */
   font-weight: var(--g-text-body-font-weight);
   margin: 20px 0;
 }
-.pc-hubspot-form .hs-richtext a:focus {
-  box-shadow: 0 0 0 2px var(--g-color-line-focus);
-}
-.pc-hubspot-form .hs-richtext a:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-.pc-hubspot-form .hs-richtext a:focus {
-  outline: 0;
-  border-radius: var(--g-focus-border-radius);
-}
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
   font-size: var(--g-text-body-1-font-size);
@@ -390,6 +380,16 @@ unpredictable css rules order in build */
 .pc-hubspot-form_mobile .hs-button.primary {
   width: 80%;
 }
+.pc-hubspot-form a:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-focus);
+}
+.pc-hubspot-form a:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.pc-hubspot-form a:focus {
+  outline: 0;
+  border-radius: var(--g-focus-border-radius);
+}
 .pc-hubspot-form_theme_dark {
   --g-color-line-focus: var(--pc-color-line-focus-dark);
 }

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

@@ -10,6 +10,7 @@ export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['lin
     target?: string | undefined;
     metrikaGoals?: import("../../models").MetrikaGoal | undefined;
     pixelEvents?: import("../../models").ButtonPixel | undefined;
+    extraProps?: import("react").HTMLProps<HTMLAnchorElement> | undefined;
     analyticsEvents?: {
         name: string;
         type?: string | undefined;

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

@@ -62,7 +62,6 @@ unpredictable css rules order in build */
 }
 .pc-quote__content_quote-type_chevron::before {
   position: absolute;
-  top: -1px;
   left: -10px;
   content: "«";
 }
@@ -71,7 +70,6 @@ unpredictable css rules order in build */
 }
 .pc-quote__content_quote-type_english-double::before {
   position: absolute;
-  top: -1px;
   left: -8px;
   content: "“";
 }

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

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useUniqId } from '@gravity-ui/uikit';
 import { Button, HTML, Media, RouterLink } from '../../components';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
 import { getMediaImage } from '../../components/Media/Image/utils';
@@ -32,6 +33,7 @@ export const HeaderBlock = (props) => {
     const imageThemed = image && getThemedValue(image, theme);
     const videoThemed = video && 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 = useUniqId();
     return (React.createElement("header", { className: b({
             ['has-media']: hasRightSideImage,
             ['full-width']: fullWidth,
@@ -54,7 +56,7 @@ export const HeaderBlock = (props) => {
                             React.createElement(Col, { sizes: titleSizes, className: b('content-inner') },
                                 overtitle && (React.createElement("div", { className: b('overtitle') },
                                     React.createElement(HTML, null, overtitle))),
-                                React.createElement("h1", { className: b('title') },
+                                React.createElement("h1", { className: b('title'), id: titleId },
                                     status,
                                     renderTitle ? renderTitle(title) : React.createElement(HTML, null, title)),
                                 description && (React.createElement("div", { className: b('description') },
@@ -63,7 +65,9 @@ export const HeaderBlock = (props) => {
                                             constructorTheme: textTheme,
                                         } }))),
                                 buttons && (React.createElement("div", { className: b('buttons'), "data-qa": "header-buttons" }, buttons.map((button, index) => (React.createElement(RouterLink, { href: button.url, key: index },
-                                    React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
+                                    React.createElement(Button, Object.assign({ key: index, className: b('button'), size: "xl", extraProps: {
+                                            'aria-describedby': titleId,
+                                        } }, button))))))),
                                 children))),
                     hasRightSideImage && (React.createElement(Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
 };

package/build/esm/blocks/Tabs/Tabs.js

@@ -1,4 +1,5 @@
 import React, { Fragment, useRef, useState } from 'react';
+import { useUniqId } from '@gravity-ui/uikit';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
 import FullscreenImage from '../../components/FullscreenImage/FullscreenImage';
@@ -23,10 +24,16 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     const ref = 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 && getHeight(mediaWidth);
+    const captionId = useUniqId();
     let imageProps;
     if (activeTabData) {
         const themedImage = getThemedValue(activeTabData.image, theme);
         imageProps = themedImage && 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);
@@ -45,7 +52,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
-        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && React.createElement("p", { className: b('caption') }, activeTabData.caption)));
+        (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.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/esm/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/esm/blocks/index.js

@@ -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/esm/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/esm/components/BackLink/BackLink.js

@@ -6,7 +6,7 @@ import { ArrowSidebar } from '../../icons';
 import { DefaultEventNames } from '../../models';
 export default function BackLink(props) {
     const { history } = useContext(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 = useAnalytics(DefaultEventNames.ShareButton, url);
     const backActionHandler = useCallback(async () => {
         handleAnalytics();
@@ -23,7 +23,7 @@ export default function BackLink(props) {
             history.push({ pathname: url });
         }
     }, [handleAnalytics, history, onClick, url]);
-    return (React.createElement(Button, { className: className, view: theme === 'special' ? 'flat-contrast' : 'flat-secondary', size: size, href: shouldHandleBackAction ? undefined : url, onClick: shouldHandleBackAction ? backActionHandler : undefined, tabIndex: tabIndex },
+    return (React.createElement(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.createElement(Icon, { data: ArrowSidebar, size: 24 }),
         React.createElement("span", null, title)));
 }

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

@@ -4,7 +4,6 @@ import './Button.css';
 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/esm/components/DefaultVideo/DefaultVideo.css

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MediaVideoProps } from '../../models';
+import './DefaultVideo.css';
+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/esm/components/DefaultVideo/DefaultVideo.js

@@ -0,0 +1,57 @@
+import React, { Fragment, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { CustomControlsType, MediaVideoControlsType } from '../../models';
+import { block } from '../../utils';
+import { getVideoTypesWithPriority } from '../Media/Video/utils';
+import CustomBarControls from '../ReactPlayer/CustomBarControls';
+import './DefaultVideo.css';
+const b = block('default-video');
+export const DefaultVideo = React.forwardRef((props, ref) => {
+    const { video, qa, customBarControlsClassName } = props;
+    const { controls, customControlsOptions, muted: initiallyMuted } = video;
+    const { muteButtonShown, positioning, type: customControlsType, } = customControlsOptions || {};
+    const [isPaused, setIsPaused] = useState(false);
+    const [isMuted, setIsMuted] = useState(initiallyMuted);
+    const videoRef = 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
+    useImperativeHandle(ref, () => {
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current)) {
+            return undefined;
+        }
+        return videoRef.current;
+    }, [videoRef]);
+    const onPlayToggle = 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 = useCallback(() => {
+        setIsMuted((value) => !value);
+    }, []);
+    const onClick = useCallback(() => {
+        if (customControlsType === CustomControlsType.WithPlayPauseButton) {
+            onPlayToggle();
+        }
+    }, [onPlayToggle, customControlsType]);
+    return (React.createElement(Fragment, null,
+        React.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 }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type, "data-qa": qa })))),
+        controls === MediaVideoControlsType.Custom && (React.createElement(CustomBarControls, { className: customBarControlsClassName, type: customControlsType, isPaused: isPaused, onPlayClick: onPlayToggle, muteButtonShown: muteButtonShown, shown: true, positioning: positioning, mute: {
+                isMuted: Boolean(isMuted),
+                changeMute: onMuteToggle,
+            } }))));
+});
+DefaultVideo.displayName = 'DefaultVideo';

package/build/esm/components/FileLink/FileLink.js

@@ -37,13 +37,13 @@ const LabelSizeMap = {
 };
 const FileLink = (props) => {
     const { hostname } = useContext(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.createElement("div", { className: b({ ext: fileExt, type, size: textSize, theme }, className) },
         React.createElement(Label, { className: b('file-label'), size: labelSize, theme: labelTheme }, fileExt),
         React.createElement("div", { className: b('link') },
-            React.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, getLinkProps(href, hostname)), text))));
+            React.createElement("a", Object.assign({ href: href, onClick: onClick, tabIndex: tabIndex, title: urlTitle }, getLinkProps(href, hostname), extraProps), text))));
 };
 export default FileLink;

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

@@ -1,10 +1,11 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, HTMLProps } from 'react';
 import { ImageProps } from '../Image/Image';
 import './FullscreenImage.css';
 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/esm/components/FullscreenImage/FullscreenImage.js

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

package/build/esm/components/Image/Image.js

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import React, { Fragment, useContext, useState } from 'react';
 import { BREAKPOINTS } from '../../constants';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
@@ -12,7 +13,7 @@ const DeviceSpecificFragment = ({ disableWebp, src, breakpoint, qa, }) => (React
     React.createElement("source", { srcSet: src, media: `(max-width: ${breakpoint}px)`, "data-qa": qa })));
 const Image = (props) => {
     const projectSettings = useContext(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 = __rest(props, ["src", "alt", "disableCompress", "tablet", "desktop", "mobile", "style", "className", "onClick", "containerClassName", "qa"]);
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -27,6 +28,6 @@ const Image = (props) => {
         mobile && (React.createElement(DeviceSpecificFragment, { src: mobile, disableWebp: disableWebp, breakpoint: BREAKPOINTS.sm, qa: qaAttributes.mobileSource })),
         tablet && (React.createElement(DeviceSpecificFragment, { src: tablet, disableWebp: disableWebp, breakpoint: BREAKPOINTS.md, qa: qaAttributes.tabletSource })),
         src && !disableWebp && (React.createElement("source", { srcSet: checkWebP(src), type: "image/webp", "data-qa": qaAttributes.desktopSourceCompressed })),
-        React.createElement(ImageBase, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) })));
+        React.createElement(ImageBase, Object.assign({ className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true) }, rest))));
 };
 export default Image;

package/build/esm/components/Link/Link.js

@@ -26,7 +26,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 = getQaAttrubutes(qa, ['normal']);
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.Link, url);
@@ -41,14 +41,14 @@ const LinkBlock = (props) => {
     const getLinkByType = () => {
         switch (theme) {
             case 'back':
-                return (React.createElement(BackLink, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex }));
+                return (React.createElement(BackLink, { title: children || text, url: href, onClick: onClick, tabIndex: tabIndex, extraProps: extraProps }));
             case 'file-link':
             case 'underline':
-                return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex }));
+                return (React.createElement(FileLink, { text: children || text, href: href, type: "horizontal", textSize: textSize, onClick: onClick, tabIndex: tabIndex, extraProps: extraProps }));
             case 'normal': {
                 const linkProps = getLinkProps(url, hostname, target);
                 const content = children || text;
-                return (React.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.createElement(Fragment, null,
+                return (React.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.createElement(Fragment, null,
                     React.createElement("span", { className: b('content') }, content),
                     WORD_JOINER_SYM,
                     React.createElement(Icon, { className: b('arrow'), data: Chevron, size: getArrowSize(textSize) }))) : (content)));

package/build/esm/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;