@gravity-ui/page-constructor 4.37.1 → 4.37.3

package/build/cjs/blocks/Tabs/Tabs.css

@@ -1,16 +1,12 @@
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
-  margin: 0;
-}
-
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-tabs-block__block-title {
+.pc-tabs-block__title {
   margin-bottom: 24px;
 }
-.pc-tabs-block__block-title_centered {
+.pc-tabs-block__title_centered {
   text-align: center;
 }
-.pc-tabs-block__block-title_centered > * {
+.pc-tabs-block__title_centered > * {
   margin: 0 auto;
 }
 .pc-tabs-block__tabs {
@@ -44,9 +40,6 @@ unpredictable css rules order in build */
 .pc-tabs-block__row_reverse {
   flex-direction: row-reverse;
 }
-.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
-  margin: 24px 32px 0 0;
-}
 .pc-tabs-block__image {
   width: 100%;
   height: auto;
@@ -64,40 +57,13 @@ unpredictable css rules order in build */
   margin: 12px 0 0;
   color: var(--g-color-text-secondary);
 }
-.pc-tabs-block__content {
-  display: flex;
-  flex-direction: column;
-}
-.pc-tabs-block__content_centered {
-  margin: 0 auto;
-}
 .pc-tabs-block__col_centered {
   margin: 0 auto;
 }
-.pc-tabs-block__content-wrapper_margin {
-  margin: 24px 0 0 32px;
-}
-.pc-tabs-block__content-title {
-  margin: 0 auto 12px;
-}
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
-  font-size: var(--g-text-header-1-font-size);
-  line-height: var(--g-text-header-1-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--g-text-accent-font-weight);
-}
-
 @media (max-width: 769px) {
-  .pc-tabs-block__content-wrapper_margin {
-    margin: 0 0 32px 0;
-  }
   .pc-tabs-block__row_reverse {
     flex-direction: column-reverse;
   }
-  .pc-tabs-block__row_reverse .pc-tabs-block__content > * {
-    margin-top: 32px;
-    padding-bottom: 0;
-  }
 }
 @media (min-width: 769px) {
   .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {

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

@@ -13,11 +13,11 @@ const Title_1 = tslib_1.__importDefault(require("../../components/Title/Title"))
 const VideoBlock_1 = require("../../components/VideoBlock/VideoBlock");
 const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
-const sub_blocks_1 = require("../../sub-blocks");
 const utils_2 = require("../../utils");
+const TabsTextContent_1 = tslib_1.__importDefault(require("./TabsTextContent/TabsTextContent"));
 const b = (0, utils_2.block)('tabs-block');
 const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
-    var _a;
+    var _a, _b;
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
     const [play, setPlay] = (0, react_1.useState)(false);
     const theme = (0, theme_1.useTheme)();
@@ -26,11 +26,24 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     const isReverse = direction === 'content-media';
     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)();
+    const themedMedia = (0, utils_2.getThemedValue)(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media, theme);
+    const hasNoImage = !(themedMedia === null || themedMedia === void 0 ? void 0 : themedMedia.image) || !(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image);
+    const mediaVideoHeight = hasNoImage && mediaWidth && (0, VideoBlock_1.getHeight)(mediaWidth);
+    const [minImageHeight, setMinImageHeight] = (0, react_1.useState)((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.offsetHeight);
+    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
     let imageProps;
+    const handleImageHeight = (0, react_1.useCallback)(() => {
+        var _a;
+        setMinImageHeight((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
+    }, []);
+    const onSelectTab = (id, e) => {
+        setActiveTab(id);
+        handleImageHeight();
+        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
+    };
     if (activeTabData) {
-        const themedImage = (0, utils_2.getThemedValue)(activeTabData.image, theme);
+        const themedImage = (0, utils_2.getThemedValue)(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image, theme);
         imageProps = themedImage && (0, utils_1.getMediaImage)(themedImage);
         if (activeTabData.caption && imageProps) {
             Object.assign(imageProps, {
@@ -40,28 +53,18 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     }
     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);
-    const textContent = activeTabData && showText && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
-        react_1.default.createElement("div", { className: b('content-wrapper', {
-                margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
-            }) },
-            react_1.default.createElement(sub_blocks_1.Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: contentSize, links: [
-                    ...(activeTabData.link ? [activeTabData.link] : []),
-                    ...(activeTabData.links || []),
-                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
+    const textContent = activeTabData && showText && (react_1.default.createElement(TabsTextContent_1.default, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
             all: grid_1.GridColumnOrderClasses.Last,
             md: grid_1.GridColumnOrderClasses.First,
         }, className: b('col', { centered: 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 })))),
+        react_1.default.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement("div", { ref: ref },
+            react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         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'), id: captionId }, activeTabData.caption))));
-    const onSelectTab = (id, e) => {
-        setActiveTab(id);
-        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
-    };
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        react_1.default.createElement(Title_1.default, { title: title, subtitle: description, className: b('block-title', { centered: centered }) }),
+        react_1.default.createElement(Title_1.default, { title: title, subtitle: description, className: b('title', { centered: centered }) }),
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: tabsColSizes },
                 react_1.default.createElement(ButtonTabs_1.default, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),

package/build/cjs/blocks/Tabs/TabsTextContent/TabsTextContent.css

@@ -0,0 +1,27 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-tabs-block-text-content {
+  display: flex;
+  flex-direction: column;
+}
+.pc-tabs-block-text-content_centered {
+  margin: 0 auto;
+}
+.pc-tabs-block-text-content__wrapper {
+  margin: 24px 0 0 32px;
+}
+.pc-tabs-block-text-content__wrapper_reverse {
+  margin: 24px 32px 0 0;
+}
+.pc-tabs-block-text-content__wrapper_no-image {
+  margin: 0;
+}
+@media (max-width: 769px) {
+  .pc-tabs-block-text-content__wrapper {
+    margin: 0 0 32px 0;
+  }
+  .pc-tabs-block-text-content__wrapper_reverse {
+    margin-top: 32px;
+    padding-bottom: 0;
+  }
+}

package/build/cjs/blocks/Tabs/TabsTextContent/TabsTextContent.d.ts

@@ -0,0 +1,10 @@
+import { ImageDeviceProps, ImageObjectProps, TabsBlockItem, TabsBlockProps } from '../../../models';
+interface TextContentProps extends Pick<TabsBlockProps, 'centered' | 'contentSize'> {
+    showMedia: boolean;
+    isReverse: boolean;
+    data: TabsBlockItem;
+    centered?: boolean;
+    imageProps?: ImageObjectProps | ImageDeviceProps;
+}
+export declare const TabsTextContent: ({ centered, contentSize, showMedia, data, imageProps, isReverse, }: TextContentProps) => JSX.Element;
+export default TabsTextContent;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsTextContent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const grid_1 = require("../../../grid");
+const sub_blocks_1 = require("../../../sub-blocks");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('tabs-block-text-content');
+const TabsTextContent = ({ centered, contentSize = 's', showMedia, data, imageProps, isReverse, }) => {
+    const isImage = (data === null || data === void 0 ? void 0 : data.media) || imageProps;
+    return (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
+        react_1.default.createElement("div", { className: b('wrapper', {
+                reverse: isReverse,
+                'no-image': !isImage,
+            }) },
+            react_1.default.createElement(sub_blocks_1.Content, { title: data.title, text: data.text, additionalInfo: data.additionalInfo, size: contentSize, links: [...(data.link ? [data.link] : []), ...(data.links || [])], buttons: data.buttons, colSizes: { all: 12 } }))));
+};
+exports.TabsTextContent = TabsTextContent;
+exports.default = exports.TabsTextContent;

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

@@ -1,9 +1,10 @@
-import { CSSProperties, MouseEventHandler } from 'react';
+import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
 import { ImageDeviceProps, ImageObjectProps, QAProps } from '../../models';
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
+    onLoad?: ReactEventHandler<HTMLDivElement>;
     containerClassName?: string;
 }
 export interface DeviceSpecificFragmentProps extends QAProps {

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, onLoad, containerClassName, qa, } = props;
     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, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
 };
 exports.default = Image;

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

@@ -1,9 +1,10 @@
-import { CSSProperties, MouseEventHandler } from 'react';
+import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
 import { ImageObjectProps } from '../../models';
 export interface ImageBaseProps extends Partial<ImageObjectProps> {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
+    onLoad?: ReactEventHandler<HTMLDivElement>;
     onError?: () => void;
 }
 export declare const ImageBase: (props: ImageBaseProps) => JSX.Element;

package/build/cjs/components/Media/Image/Image.d.ts

@@ -3,6 +3,7 @@ export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
     fullscreen?: boolean;
+    onLoad?: () => void;
 }
 interface InnerImageProps {
     hasVideoFallback: boolean;

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

@@ -15,7 +15,7 @@ const utils_2 = require("./utils");
 const b = (0, utils_1.block)('media-component-image');
 exports.defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, qa, } = props;
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, qa, onLoad, } = props;
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'fullscreen-image', 'animate', 'background-image', 'image-view', 'slider-block');
     const [scrollY, setScrollY] = (0, react_1.useState)(0);
     const [{ springScrollY }, springSetScrollY] = (0, web_1.useSpring)(() => ({
@@ -49,7 +49,7 @@ const Image = (props) => {
     };
     const imageOnly = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return (react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView })));
+        return (react_1.default.createElement(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad })));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;

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

@@ -5,6 +5,7 @@ export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAddi
     className?: string;
     youtubeClassName?: string;
     autoplay?: boolean;
+    onImageLoad?: () => void;
 }
 export declare const Media: (props: MediaAllProps) => JSX.Element;
 export default Media;

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

@@ -11,13 +11,13 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
         if (image) {
-            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image }));
+            result.push(react_1.default.createElement(Image_1.default, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
         }
         if (video) {
             const videoProps = {
@@ -43,7 +43,7 @@ const Media = (props) => {
             }
         }
         if (youtube) {
-            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay }));
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullscreen, analyticsEvents: analyticsEvents, autoplay: autoplay, onImageLoad: onImageLoad }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
@@ -62,6 +62,7 @@ const Media = (props) => {
         fullscreen,
         qaAttributes.image,
         qaAttributes.video,
+        onImageLoad,
         videoClassName,
         metrika,
         analyticsEvents,

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

@@ -16,6 +16,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     height?: number;
     fullscreen?: boolean;
     autoplay?: boolean;
+    onImageLoad?: () => void;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -41,7 +41,7 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
     const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
@@ -95,7 +95,7 @@ const VideoBlock = (props) => {
         return null;
     }
     return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
-        react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
+        react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
         playButton || (react_1.default.createElement("button", { title: "Play", className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));
 };

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

@@ -27,14 +27,11 @@ unpredictable css rules order in build */
   color: var(--g-color-text-primary);
 }
 
-.pc-content__button.pc-content__button {
-  margin-top: 0;
-  margin-right: 12px;
-}
-.pc-content__button.pc-content__button:last-child {
-  margin-right: 0;
+.pc-content__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 12px;
 }
-
 .pc-content__links {
   display: flex;
   flex-direction: column;
@@ -48,6 +45,9 @@ unpredictable css rules order in build */
   text-align: center;
 }
 
+.pc-content_centered .pc-content__buttons {
+  justify-content: center;
+}
 .pc-content_centered .pc-content__links {
   align-items: center;
 }

package/build/esm/blocks/Tabs/Tabs.css

@@ -1,16 +1,12 @@
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
-  margin: 0;
-}
-
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-tabs-block__block-title {
+.pc-tabs-block__title {
   margin-bottom: 24px;
 }
-.pc-tabs-block__block-title_centered {
+.pc-tabs-block__title_centered {
   text-align: center;
 }
-.pc-tabs-block__block-title_centered > * {
+.pc-tabs-block__title_centered > * {
   margin: 0 auto;
 }
 .pc-tabs-block__tabs {
@@ -44,9 +40,6 @@ unpredictable css rules order in build */
 .pc-tabs-block__row_reverse {
   flex-direction: row-reverse;
 }
-.pc-tabs-block__row_reverse .pc-tabs-block__content-wrapper {
-  margin: 24px 32px 0 0;
-}
 .pc-tabs-block__image {
   width: 100%;
   height: auto;
@@ -64,40 +57,13 @@ unpredictable css rules order in build */
   margin: 12px 0 0;
   color: var(--g-color-text-secondary);
 }
-.pc-tabs-block__content {
-  display: flex;
-  flex-direction: column;
-}
-.pc-tabs-block__content_centered {
-  margin: 0 auto;
-}
 .pc-tabs-block__col_centered {
   margin: 0 auto;
 }
-.pc-tabs-block__content-wrapper_margin {
-  margin: 24px 0 0 32px;
-}
-.pc-tabs-block__content-title {
-  margin: 0 auto 12px;
-}
-.pc-tabs-block__content-title.pc-tabs-block__content-title > * {
-  font-size: var(--g-text-header-1-font-size);
-  line-height: var(--g-text-header-1-line-height);
-  color: var(--pc-text-header-color);
-  font-weight: var(--g-text-accent-font-weight);
-}
-
 @media (max-width: 769px) {
-  .pc-tabs-block__content-wrapper_margin {
-    margin: 0 0 32px 0;
-  }
   .pc-tabs-block__row_reverse {
     flex-direction: column-reverse;
   }
-  .pc-tabs-block__row_reverse .pc-tabs-block__content > * {
-    margin-top: 32px;
-    padding-bottom: 0;
-  }
 }
 @media (min-width: 769px) {
   .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useRef, useState } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
@@ -9,12 +9,12 @@ import Title from '../../components/Title/Title';
 import { getHeight } from '../../components/VideoBlock/VideoBlock';
 import { useTheme } from '../../context/theme';
 import { Col, GridColumnOrderClasses, Row } from '../../grid';
-import { Content } from '../../sub-blocks';
 import { block, getThemedValue } from '../../utils';
+import TabsTextContent from './TabsTextContent/TabsTextContent';
 import './Tabs.css';
 const b = block('tabs-block');
 export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
-    var _a;
+    var _a, _b;
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
     const theme = useTheme();
@@ -23,11 +23,24 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     const isReverse = direction === 'content-media';
     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();
+    const themedMedia = getThemedValue(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media, theme);
+    const hasNoImage = !(themedMedia === null || themedMedia === void 0 ? void 0 : themedMedia.image) || !(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image);
+    const mediaVideoHeight = hasNoImage && mediaWidth && getHeight(mediaWidth);
+    const [minImageHeight, setMinImageHeight] = useState((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.offsetHeight);
+    // TODO remove property support activeTabData?.image. Use only activeTabData?.media?.image
     let imageProps;
+    const handleImageHeight = useCallback(() => {
+        var _a;
+        setMinImageHeight((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight);
+    }, []);
+    const onSelectTab = (id, e) => {
+        setActiveTab(id);
+        handleImageHeight();
+        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
+    };
     if (activeTabData) {
-        const themedImage = getThemedValue(activeTabData.image, theme);
+        const themedImage = getThemedValue(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.image, theme);
         imageProps = themedImage && getMediaImage(themedImage);
         if (activeTabData.caption && imageProps) {
             Object.assign(imageProps, {
@@ -37,28 +50,18 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     }
     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);
-    const textContent = activeTabData && showText && (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b('content', { centered: centered }) },
-        React.createElement("div", { className: b('content-wrapper', {
-                margin: Boolean(((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps) && !isReverse),
-            }) },
-            React.createElement(Content, { title: activeTabData.title, text: activeTabData.text, additionalInfo: activeTabData.additionalInfo, size: contentSize, links: [
-                    ...(activeTabData.link ? [activeTabData.link] : []),
-                    ...(activeTabData.links || []),
-                ], buttons: activeTabData.buttons, colSizes: { all: 12 } }))));
+    const textContent = activeTabData && showText && (React.createElement(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
-        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 })))),
+        React.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { ref: ref },
+            React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         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'), id: captionId }, activeTabData.caption))));
-    const onSelectTab = (id, e) => {
-        setActiveTab(id);
-        e.currentTarget.scrollIntoView({ inline: 'center', behavior: 'smooth', block: 'nearest' });
-    };
     return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },
-        React.createElement(Title, { title: title, subtitle: description, className: b('block-title', { centered: centered }) }),
+        React.createElement(Title, { title: title, subtitle: description, className: b('title', { centered: centered }) }),
         React.createElement(Row, null,
             React.createElement(Col, { sizes: tabsColSizes },
                 React.createElement(ButtonTabs, { items: tabs, onSelectTab: onSelectTab, activeTab: activeTab, className: b('tabs', { centered: centered }) }))),

package/build/esm/blocks/Tabs/TabsTextContent/TabsTextContent.css

@@ -0,0 +1,27 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-tabs-block-text-content {
+  display: flex;
+  flex-direction: column;
+}
+.pc-tabs-block-text-content_centered {
+  margin: 0 auto;
+}
+.pc-tabs-block-text-content__wrapper {
+  margin: 24px 0 0 32px;
+}
+.pc-tabs-block-text-content__wrapper_reverse {
+  margin: 24px 32px 0 0;
+}
+.pc-tabs-block-text-content__wrapper_no-image {
+  margin: 0;
+}
+@media (max-width: 769px) {
+  .pc-tabs-block-text-content__wrapper {
+    margin: 0 0 32px 0;
+  }
+  .pc-tabs-block-text-content__wrapper_reverse {
+    margin-top: 32px;
+    padding-bottom: 0;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { ImageDeviceProps, ImageObjectProps, TabsBlockItem, TabsBlockProps } from '../../../models';
+import './TabsTextContent.css';
+interface TextContentProps extends Pick<TabsBlockProps, 'centered' | 'contentSize'> {
+    showMedia: boolean;
+    isReverse: boolean;
+    data: TabsBlockItem;
+    centered?: boolean;
+    imageProps?: ImageObjectProps | ImageDeviceProps;
+}
+export declare const TabsTextContent: ({ centered, contentSize, showMedia, data, imageProps, isReverse, }: TextContentProps) => JSX.Element;
+export default TabsTextContent;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Col } from '../../../grid';
+import { Content } from '../../../sub-blocks';
+import { block } from '../../../utils';
+import './TabsTextContent.css';
+const b = block('tabs-block-text-content');
+export const TabsTextContent = ({ centered, contentSize = 's', showMedia, data, imageProps, isReverse, }) => {
+    const isImage = (data === null || data === void 0 ? void 0 : data.media) || imageProps;
+    return (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
+        React.createElement("div", { className: b('wrapper', {
+                reverse: isReverse,
+                'no-image': !isImage,
+            }) },
+            React.createElement(Content, { title: data.title, text: data.text, additionalInfo: data.additionalInfo, size: contentSize, links: [...(data.link ? [data.link] : []), ...(data.links || [])], buttons: data.buttons, colSizes: { all: 12 } }))));
+};
+export default TabsTextContent;

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

@@ -1,9 +1,10 @@
-import { CSSProperties, MouseEventHandler } from 'react';
+import { CSSProperties, MouseEventHandler, ReactEventHandler } from 'react';
 import { ImageDeviceProps, ImageObjectProps, QAProps } from '../../models';
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
     className?: string;
     onClick?: MouseEventHandler;
+    onLoad?: ReactEventHandler<HTMLDivElement>;
     containerClassName?: string;
 }
 export interface DeviceSpecificFragmentProps extends QAProps {

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext, useState } from 'react';
+import React, { Fragment, useContext, useState, } from 'react';
 import { BREAKPOINTS } from '../../constants';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { getQaAttrubutes } from '../../utils';
@@ -12,7 +12,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, onLoad, containerClassName, qa, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -27,6 +27,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, { className: className, alt: alt, src: src, style: style, onClick: onClick, onError: () => setImgLoadingError(true), onLoad: onLoad })));
 };
 export default Image;