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

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # Changelog
 
+## [1.16.2](https://github.com/gravity-ui/page-constructor/compare/v1.16.1...v1.16.2) (2023-02-16)
+
+
+### Bug Fixes
+
+* **HubspotForm:** required checkbox ([#154](https://github.com/gravity-ui/page-constructor/issues/154)) ([6c948d1](https://github.com/gravity-ui/page-constructor/commit/6c948d1a3511e16902e6808d83ac3f0ac14b6d9c))
+
+## [1.16.1](https://github.com/gravity-ui/page-constructor/compare/v1.16.0...v1.16.1) (2023-02-14)
+
+
+### Bug Fixes
+
+* youtube dimensions ratio for large screens ([#151](https://github.com/gravity-ui/page-constructor/issues/151)) ([5ee3c9c](https://github.com/gravity-ui/page-constructor/commit/5ee3c9cabe641bd437a02d137528424df7fd2c5a))
+
+## [1.16.0](https://github.com/gravity-ui/page-constructor/compare/v1.15.4...v1.16.0) (2023-02-14)
+
+
+### Features
+
+* **HubspotForm:** add render outside virtual dom ([#138](https://github.com/gravity-ui/page-constructor/issues/138)) ([1b8694c](https://github.com/gravity-ui/page-constructor/commit/1b8694c6893df63ffabab84779febad57362804c))
+
+## [1.15.4](https://github.com/gravity-ui/page-constructor/compare/v1.15.3...v1.15.4) (2023-02-13)
+
+
+### Bug Fixes
+
+* freeze-es-5-ext ([#146](https://github.com/gravity-ui/page-constructor/issues/146)) ([72ca5f9](https://github.com/gravity-ui/page-constructor/commit/72ca5f90dee5b3a45d895695416b3398a46973b4))
+
+## [1.15.3](https://github.com/gravity-ui/page-constructor/compare/v1.15.2...v1.15.3) (2023-02-10)
+
+
+### Bug Fixes
+
+* fullscreen icon hide ([#141](https://github.com/gravity-ui/page-constructor/issues/141)) ([dfec755](https://github.com/gravity-ui/page-constructor/commit/dfec75544102299d0f82b72dbb5f334759a63cb0))
+
+## [1.15.2](https://github.com/gravity-ui/page-constructor/compare/v1.15.1...v1.15.2) (2023-02-10)
+
+
+### Bug Fixes
+
+* add layout item to card stories ([#143](https://github.com/gravity-ui/page-constructor/issues/143)) ([078c7f2](https://github.com/gravity-ui/page-constructor/commit/078c7f24e1e6a620ad57b929f08dd703092463f5))
+
+## [1.15.1](https://github.com/gravity-ui/page-constructor/compare/v1.15.0...v1.15.1) (2023-02-10)
+
+
+### Bug Fixes
+
+* change meta info tag to h4 ([#140](https://github.com/gravity-ui/page-constructor/issues/140)) ([8cd84bd](https://github.com/gravity-ui/page-constructor/commit/8cd84bd5e313b41caf240b1ff155a9698ec9c17a))
+
+## [1.15.0](https://github.com/gravity-ui/page-constructor/compare/v1.14.4...v1.15.0) (2023-02-10)
+
+
+### Features
+
+* add handler for submit error in hubspot forms ([#135](https://github.com/gravity-ui/page-constructor/issues/135)) ([5f9b7a8](https://github.com/gravity-ui/page-constructor/commit/5f9b7a89996b0d2237d62ffccbea6d08f19a8d35))
+
+## [1.14.4](https://github.com/gravity-ui/page-constructor/compare/v1.14.3...v1.14.4) (2023-02-10)
+
+
+### Bug Fixes
+
+* changelog ([#136](https://github.com/gravity-ui/page-constructor/issues/136)) ([a07c738](https://github.com/gravity-ui/page-constructor/commit/a07c738e09898a952e63e1f0712cc9a31076cc1c))
+
+## [1.14.3](https://github.com/gravity-ui/page-constructor/compare/v1.14.2...v1.14.3) (2023-02-10)
+
+### Features
+
+* LayoutItem was added and CardWithImage was deprecated ([#132](https://github.com/gravity-ui/page-constructor/issues/132))([4abebb5](https://github.com/gravity-ui/page-constructor/commit/4abebb573e12d0976d61541e2f33c17f3d25453a))
+
+### Bug Fixes
+
+* remove unused card types ([#130](https://github.com/gravity-ui/page-constructor/issues/130)) ([22da2fa](https://github.com/gravity-ui/page-constructor/commit/22da2fadd433e12e84cf8afd238c369cff5f2c24))
+
+## [1.14.2](https://github.com/gravity-ui/page-constructor/compare/v1.14.1...v1.14.2) (2023-02-02)
+
+
+### Bug Fixes
+
+* **HubspotForm:** border-radius ([#128](https://github.com/gravity-ui/page-constructor/issues/128)) ([437344b](https://github.com/gravity-ui/page-constructor/commit/437344b510cbde11bdf6e3a3ceb914fb0818a016))
+
+## [1.14.1](https://github.com/gravity-ui/page-constructor/compare/v1.14.0...v1.14.1) (2023-02-01)
+
+
+### Bug Fixes
+
+* enable addons menu by default ([7772a55](https://github.com/gravity-ui/page-constructor/commit/7772a554950643d7cdbb86a8dedade6f916ae176))
+* **Storybook:** fix links ([#123](https://github.com/gravity-ui/page-constructor/issues/123)) ([10cfe80](https://github.com/gravity-ui/page-constructor/commit/10cfe8054178bd577014dfff83033ff0c0dd9add))
+
 ## [1.14.0](https://github.com/gravity-ui/page-constructor/compare/v1.13.2...v1.14.0) (2023-01-25)
 
 

package/README.md

@@ -82,18 +82,6 @@ interface SSR {
   isServer?: boolean;
 }
 
-type AnalyticsCounters = {
-  include?: string[];
-  exclude?: string[];
-};
-
-type AnalyticsEvent<T = {}> = T & {
-  name: string;
-  type?: string;
-  counters?: AnalyticsCounters;
-  context?: string;
-};
-
 interface NavigationData {
   logo: NavigationLogo;
   header: HeaderData;
@@ -261,7 +249,7 @@ It is possible to configure an event type needed for a project.
 
 ```ts
 type MyEventType = AnalyticsEvent<{
-  anyParameterName?: string; // only a 'string' type is supported
+  [key: string]?: string; // only a 'string' type is supported
 }>;
 ```
 
@@ -271,8 +259,8 @@ It is possible to configure an event to which an analytics system to sent.
 
 ```ts
 type AnalyticsCounters = {
-  include?: string[];
-  exclude?: string[];
+  include?: string[]; // array of analytics counter ids that will be applied
+  exclude?: string[]; // array of analytics counter ids that will not be applied
 };
 ```
 

package/build/cjs/blocks/Slider/Arrow/Arrow.js

@@ -5,8 +5,8 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
 const ToggleArrow_1 = tslib_1.__importDefault(require("../../../components/ToggleArrow/ToggleArrow"));
 const b = (0, utils_1.block)('slider-block-arrow');
-const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className), onClick: () => handleClick && handleClick(type) },
-    react_1.default.createElement("button", { className: b('button') },
+const Arrow = ({ type, handleClick, className, size = 16 }) => (react_1.default.createElement("div", { className: b({ type }, className) },
+    react_1.default.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
         react_1.default.createElement("div", { className: b('icon-wrapper') },
             react_1.default.createElement(ToggleArrow_1.default, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 exports.default = Arrow;

package/build/cjs/blocks/Slider/Slider.css

@@ -179,11 +179,7 @@ unpredictable css rules order in build */
 }
 .pc-SliderBlock_type_media-card .slick-arrow {
   display: none;
-  height: 100%;
   width: 64px;
-  top: 0;
-}
-.pc-SliderBlock_type_media-card .slick-arrow button {
   top: 50%;
   transform: translate(0, -50%);
 }

package/build/cjs/components/Foldable/Foldable.css

@@ -1,7 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-foldable-block__content-container {
+.pc-foldable-block {
   height: 0;
   overflow-y: hidden;
   transition: height 300ms, margin-bottom 300ms;
+}
+.pc-foldable-block__content-container {
+  overflow: auto;
 }

package/build/cjs/components/Foldable/Foldable.js

@@ -3,21 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
-const HeightCalculator_1 = tslib_1.__importDefault(require("../../components/HeightCalculator/HeightCalculator"));
+const useHeightCalculator_1 = tslib_1.__importDefault(require("../../hooks/useHeightCalculator"));
 const b = (0, utils_1.block)('foldable-block');
 const Foldable = ({ isOpened, children, className }) => {
+    const blockRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
-    const [contentHeight, setContentHeight] = (0, react_1.useState)();
-    const onHeightCalculation = (0, react_1.useCallback)((height) => {
-        setContentHeight(height);
-    }, []);
+    const contentHeight = (0, useHeightCalculator_1.default)(contentRef);
     (0, react_1.useEffect)(() => {
-        if (contentRef && contentRef.current) {
-            contentRef.current.style.height = isOpened ? `${contentHeight}px` : '0';
+        if (blockRef && blockRef.current) {
+            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (react_1.default.createElement("div", { className: b(null, className) },
-        react_1.default.createElement("div", { ref: contentRef, className: b('content-container', { open: isOpened }) }, children),
-        react_1.default.createElement(HeightCalculator_1.default, { onCalculate: onHeightCalculation }, children)));
+    return (react_1.default.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
+        react_1.default.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
 };
 exports.default = Foldable;

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

@@ -7,23 +7,25 @@ const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
 const icons_1 = require("../../icons");
 const b = (0, utils_1.block)('FullScreenImage');
+const FULL_SCREEN_ICON_SIZE = 18;
+const CLOSE_ICON_SIZE = 30;
 const FullScreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [isMouseEnter, setIsMouseEnter] = (0, react_1.useState)(false);
-    const openModal = (0, react_1.useCallback)(() => setIsOpened(true), []);
-    const closeModal = (0, react_1.useCallback)(() => setIsOpened(false), []);
-    const showFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(true), []);
-    const hideFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(false), []);
+    const openModal = () => setIsOpened(true);
+    const closeModal = () => setIsOpened(false);
+    const showFullScreenIcon = () => setIsMouseEnter(true);
+    const hideFullScreenIcon = () => setIsMouseEnter(false);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
             react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             react_1.default.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: 18, height: 18, className: b('icon') }))),
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },
                 react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
-                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: 30, height: 30, className: b('icon', { hover: true }) })),
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
 exports.default = FullScreenImage;

package/build/cjs/components/FullscreenMedia/FullScreenMedia.css

@@ -0,0 +1,70 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-full-screen-media__modal-media_type_youtube, .pc-full-screen-media__modal-media_type_video video, .pc-full-screen-media__modal-media_type_image {
+  display: block;
+  position: relative;
+  width: 100%;
+  max-width: 1232px;
+  max-height: 70vh;
+}
+
+.pc-full-screen-media__media {
+  cursor: pointer;
+}
+.pc-full-screen-media__media-wrapper {
+  cursor: pointer;
+  position: relative;
+}
+.pc-full-screen-media__modal-content {
+  position: relative;
+}
+.pc-full-screen-media__inline-media {
+  transform: translateZ(0);
+}
+.pc-full-screen-media__modal-media {
+  border-radius: var(--pc-border-radius);
+}
+.pc-full-screen-media__modal-media_type_youtube {
+  width: min(65vw, 1232px);
+  height: calc(min(65vw, 1232px) * 9 / 16);
+}
+.pc-full-screen-media__modal .yc-modal__content, .pc-full-screen-media__modal-image {
+  border-radius: var(--pc-border-radius);
+}
+.pc-full-screen-media__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: var(--yc-color-base-simple-hover-solid);
+  cursor: pointer;
+  z-index: 10;
+}
+.pc-full-screen-media__modal-content .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper .pc-full-screen-media__icon-wrapper {
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.pc-full-screen-media__modal-content:hover .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper:hover .pc-full-screen-media__icon-wrapper {
+  opacity: 1;
+  pointer-events: inherit;
+}
+.pc-full-screen-media__icon {
+  color: var(--yc-color-text-hint);
+}
+.pc-full-screen-media__icon_hover:hover {
+  color: var(--yc-color-text-secondary);
+}
+@media (max-width: 577px) {
+  .pc-full-screen-media__icon-wrapper {
+    display: none;
+  }
+  .pc-full-screen-media__modal {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/build/cjs/components/FullscreenMedia/FullScreenMedia.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MediaAllProps } from '../Media/Media';
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export interface FullScreenMediaProps {
+    showFullScreenIcon?: boolean;
+    children: (props?: ChildMediaRenderProps) => JSX.Element;
+}
+declare const FullScreenMedia: ({ children, showFullScreenIcon }: FullScreenMediaProps) => JSX.Element;
+export default FullScreenMedia;

package/build/cjs/components/FullscreenMedia/FullScreenMedia.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+const mobileContext_1 = require("../../context/mobileContext");
+const b = (0, utils_1.block)('full-screen-media');
+const FULL_SCREEN_ICON_SIZE = 18;
+const CLOSE_ICON_SIZE = 30;
+const getMediaClass = (type) => b('modal-media', { type });
+const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const openModal = (e) => {
+        e.stopPropagation();
+        setIsOpened(true);
+    };
+    const closeModal = () => setIsOpened(false);
+    if (isMobile) {
+        return children();
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
+            children({ className: b('inline-media') }),
+            showFullScreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
+        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
+            react_1.default.createElement("div", { className: b('modal-content') },
+                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
+                children({
+                    imageClassName: getMediaClass('image'),
+                    videoClassName: getMediaClass('video'),
+                    youtubeClassName: getMediaClass('youtube'),
+                    fullScreen: true,
+                }))))));
+};
+exports.default = FullScreenMedia;

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

@@ -2,5 +2,9 @@ import { WithChildren } from '../../models';
 export interface HeightCalculatorProps {
     onCalculate: (height: number) => void;
 }
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 declare const HeightCalculator: ({ onCalculate, children }: WithChildren<HeightCalculatorProps>) => JSX.Element | null;
 export default HeightCalculator;

package/build/cjs/components/HeightCalculator/HeightCalculator.js

@@ -5,6 +5,10 @@ const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('height-calculator');
+/**
+ * @deprecated Will be removed, use the useHeightCalculator hook instead.
+ * @returns The HeightCalculator component.
+ */
 const HeightCalculator = ({ onCalculate, children }) => {
     const [isCalculating, setIsCalculating] = (0, react_1.useState)(true);
     const container = (0, react_1.useRef)(null);

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

@@ -10,7 +10,7 @@ const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, analyticsEvents, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const content = (0, react_1.useMemo)(() => {
@@ -22,7 +22,7 @@ const Media = (props) => {
             result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
         }
         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 }));
+            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 }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
@@ -46,6 +46,7 @@ const Media = (props) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
+        fullScreen,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
 };

package/build/cjs/components/MetaInfo/MetaInfo.css

@@ -0,0 +1,13 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-meta-info {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: var(--pc-media-card-meta-info-color);
+}
+.pc-meta-info__item:not(:first-child) {
+  margin-left: 16px;
+}

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

@@ -0,0 +1,6 @@
+import { ClassNameProps } from 'src/models';
+export interface MetaInfpoProps extends ClassNameProps {
+    items: string[];
+}
+declare const MetaInfo: ({ items, className }: MetaInfpoProps) => JSX.Element;
+export default MetaInfo;

package/build/cjs/components/MetaInfo/MetaInfo.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('meta-info');
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+exports.default = MetaInfo;

package/build/cjs/components/MetaInfo/schema.d.ts

@@ -0,0 +1,8 @@
+declare const metaInfo: {
+    type: string;
+    items: {
+        type: string;
+        contentType: string;
+    };
+};
+export default metaInfo;

package/build/cjs/components/MetaInfo/schema.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const metaInfo = {
+    type: 'array',
+    items: {
+        type: 'string',
+        contentType: 'text',
+    },
+};
+exports.default = metaInfo;

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

@@ -13,6 +13,7 @@ export interface VideoBlockProps {
     previewImg?: string;
     playButton?: React.ReactNode;
     height?: number;
+    fullScreen?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

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

@@ -4,6 +4,7 @@ exports.getHeight = exports.AUTOPLAY_ATTRIBUTES = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const uuid_1 = require("uuid");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
@@ -18,7 +19,6 @@ exports.AUTOPLAY_ATTRIBUTES = {
     mute: 1,
 };
 const b = (0, utils_1.block)('VideoBlock');
-const iframeId = 'video-block';
 function getVideoSrc(stream, record) {
     if (!stream && !record) {
         return null;
@@ -38,14 +38,14 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen } = props;
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
     const [hidePreview, setHidePreview] = (0, react_1.useState)(false);
     const norender = (!stream && !record) || !src;
     const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height || undefined);
-    const fullId = `${iframeId}-${id || src}`;
+    const fullId = id || (0, uuid_1.v4)();
     const onPreviewClick = (0, react_1.useCallback)(() => {
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, exports.AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
@@ -66,12 +66,8 @@ const VideoBlock = (props) => {
         if (norender) {
             return;
         }
-        const prevPageVideo = document.getElementById(fullId);
         const fullSrc = `${src}?${(0, utils_1.getPageSearchParams)(attributes || {})}`;
-        if (prevPageVideo) {
-            prevPageVideo.src = fullSrc;
-        }
-        else if (ref.current) {
+        if (ref.current && !iframeRef.current) {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             iframe.src = fullSrc;
@@ -83,14 +79,14 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
     if (norender) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+    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') }),
         playButton || (react_1.default.createElement("button", { className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));

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

@@ -33,4 +33,6 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
+export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/cjs/components/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.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.FullScreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -74,3 +74,7 @@ var RouterLink_1 = require("./RouterLink/RouterLink");
 Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
 var HTML_1 = require("./HTML/HTML");
 Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+var MetaInfo_1 = require("./MetaInfo/MetaInfo");
+Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
+var FullScreenMedia_1 = require("./FullscreenMedia/FullScreenMedia");
+Object.defineProperty(exports, "FullScreenMedia", { enumerable: true, get: function () { return __importDefault(FullScreenMedia_1).default; } });

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

@@ -34,6 +34,10 @@ export declare const subBlockMap: {
     "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
     "news-card": (props: import("./models").NewsCardProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    /**
+     * @deprecated Use LayoutItem
+     */
     "card-with-image": ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }: import("./models").CardWithImageProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;

package/build/cjs/constructor-items.js

@@ -40,6 +40,10 @@ exports.subBlockMap = {
     [models_1.SubBlockType.MediaCard]: sub_blocks_1.MediaCard,
     [models_1.SubBlockType.BannerCard]: sub_blocks_1.BannerCard,
     [models_1.SubBlockType.NewsCard]: sub_blocks_1.NewsCard,
+    [models_1.SubBlockType.LayoutItem]: sub_blocks_1.LayoutItem,
+    /**
+     * @deprecated Use LayoutItem
+     */
     [models_1.SubBlockType.CardWithImage]: sub_blocks_1.CardWithImage,
     [models_1.SubBlockType.BackgroundCard]: sub_blocks_1.BackgroundCard,
     [models_1.SubBlockType.BasicCard]: sub_blocks_1.BasicCard,

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -18,6 +18,7 @@ unpredictable css rules order in build */
   --pc-monochrome-button-background-color-hover: #393939;
   --pc-monochrome-button-color: var(--yc-color-text-light-primary);
   --pc-text-header-color: var(--yc-color-text-primary);
+  --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
 }
 .yc-root.yc-root_theme_dark {
   --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);

package/build/cjs/hooks/useHeightCalculator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeightCalculatorOptions = {
+    recalculateOnResizeDelay: number;
+};
+declare const useHeightCalculator: (containerRef: React.RefObject<HTMLElement>, options?: HeightCalculatorOptions) => number | undefined;
+export default useHeightCalculator;

package/build/cjs/hooks/useHeightCalculator.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const DEFAULT_RECALCULATE_ON_RESIZE_DELAY = 1000;
+const DEFAULT_OPTIONS = {
+    recalculateOnResizeDelay: DEFAULT_RECALCULATE_ON_RESIZE_DELAY,
+};
+const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
+    const recalculateOnResizeDelay = options.recalculateOnResizeDelay;
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)(undefined);
+    const calculateContainerHeight = (0, react_1.useCallback)(() => {
+        if (containerRef.current && containerRef.current.offsetHeight !== containerHeight)
+            setContainerHeight(containerRef.current.offsetHeight);
+    }, [containerRef, containerHeight, setContainerHeight]);
+    (0, react_1.useEffect)(() => {
+        const handleResize = lodash_1.default.debounce(calculateContainerHeight, recalculateOnResizeDelay);
+        calculateContainerHeight();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [calculateContainerHeight, recalculateOnResizeDelay]);
+    return containerHeight;
+};
+exports.default = useHeightCalculator;