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

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;
@@ -244,11 +232,6 @@ function sendEvents(events: MyEventType []) {
 An event object has only one required field - `name`. It also has predefined fields, which serve to help manage complex logic. For example, `counter.include` can help to send event in a particular counter if several analytics systems are used in a project.
 
 ```ts
-type AnalyticsCounters = {
-  include?: string[];
-  exclude?: string[];
-};
-
 type AnalyticsEvent<T = {}> = T & {
   name: string;
   type?: string;
@@ -261,7 +244,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 +254,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
 };
 ```
 
@@ -283,21 +266,6 @@ Pass `context` value to define place in a project where an event is fired.
 Use selector below or create logic that serves project needs.
 
 ```ts
-// utils.ts
-const isCounterAllowed = (counter: Counter, counters?: AnalyticsCounters) => {
-  if (!counters) {
-    return true;
-  }
-
-  if (counters.exclude?.includes(counter)) {
-    return false;
-  } else if (counters.include?.includes(counter)) {
-    return true;
-  }
-
-  return false;
-};
-
 // analyticsHandler.ts
 if (isCounterAllowed(counterName, counters)) {
   analyticsCounter.reachGoal(counterName, name, parameters);

package/build/cjs/blocks/Share/Share.js

@@ -6,7 +6,6 @@ const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const models_1 = require("../../models");
 const locationContext_1 = require("../../context/locationContext");
-const blockPositionContext_1 = require("../../context/blockPositionContext");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const hooks_1 = require("../../hooks");
 const Facebook_1 = require("../../icons/Facebook");
@@ -24,12 +23,7 @@ const icons = {
 const b = (0, utils_1.block)('share-block');
 const Share = ({ items, title }) => {
     const { pathname, hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
-    const defaultEvent = (0, react_1.useMemo)(() => ({
-        name: 'share-button-click',
-        type: models_1.PredefinedEventTypes.Default,
-        context,
-    }), [context]);
+    const defaultEvent = (0, hooks_1.useAnalyticsEvent)(models_1.DefaultEventNames.ShareButton);
     const handleAnalytics = (0, hooks_1.useAnalytics)(defaultEvent);
     const handleButtonClick = (0, react_1.useCallback)(() => handleAnalytics(), [handleAnalytics]);
     return (react_1.default.createElement("div", { className: b() },

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

@@ -5,20 +5,13 @@ const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const icons_1 = require("../../icons");
 const locationContext_1 = require("../../context/locationContext");
-const blockPositionContext_1 = require("../../context/blockPositionContext");
 const hooks_1 = require("../../hooks");
 const models_1 = require("../../models");
-const COMPONENT_NAME = 'backlink';
 function BackLink(props) {
     const { history } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { url, title, theme = 'default', size = 'l', className, shouldHandleBackAction = false, onClick, } = props;
-    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
-    const handleAnalytics = (0, hooks_1.useAnalytics)({
-        name: 'back-link-click',
-        type: models_1.PredefinedEventTypes.Default,
-        context: context || COMPONENT_NAME,
-        target: url,
-    });
+    const defaultEvent = (0, hooks_1.useAnalyticsEvent)(models_1.DefaultEventNames.ShareButton, url);
+    const handleAnalytics = (0, hooks_1.useAnalytics)(defaultEvent);
     const backActionHandler = (0, react_1.useCallback)(async () => {
         handleAnalytics();
         if (!history) {

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

@@ -3,7 +3,6 @@ export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
     onClick?: () => void;
-    context?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/build/cjs/components/Button/Button.js

@@ -7,24 +7,16 @@ const utils_1 = require("../../utils");
 const models_1 = require("../../models");
 const utils_2 = require("./utils");
 const localeContext_1 = require("../../context/localeContext/localeContext");
-const blockPositionContext_1 = require("../../context/blockPositionContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
 const icons_1 = require("../../icons");
-const COMPONENT_NAME = 'button';
 const b = (0, utils_1.block)('button-block');
 const Button = (props) => {
     const handleMetrika = (0, useMetrika_1.useMetrika)();
     const { lang, tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = tslib_1.__rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
-    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
     const defaultImgPosition = 'left';
-    const defaultEvent = (0, react_1.useMemo)(() => ({
-        name: 'button-click',
-        type: models_1.PredefinedEventTypes.Default,
-        context: context || COMPONENT_NAME,
-        target: url,
-    }), [context, url]);
+    const defaultEvent = (0, hooks_1.useAnalyticsEvent)(models_1.DefaultEventNames.Button, url);
     const handleAnalytics = (0, hooks_1.useAnalytics)(defaultEvent);
     const onClick = (0, react_1.useCallback)(() => {
         handleMetrika({ metrikaGoals, pixelEvents });

package/build/cjs/components/CardBase/CardBase.js

@@ -4,7 +4,6 @@ exports.Layout = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
-const blockPositionContext_1 = require("../../context/blockPositionContext");
 const BackgroundImage_1 = tslib_1.__importDefault(require("../BackgroundImage/BackgroundImage"));
 const RouterLink_1 = tslib_1.__importDefault(require("../RouterLink/RouterLink"));
 const useMetrika_1 = require("../../hooks/useMetrika");
@@ -17,13 +16,7 @@ const Footer = () => null;
 const Layout = (props) => {
     const { className, bodyClassName, metrikaGoals, pixelEvents, analyticsEvents, contentClassName, children, url, target, border = 'shadow', } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
-    const defaultEvent = (0, react_1.useMemo)(() => ({
-        name: 'card-base-click',
-        type: common_1.PredefinedEventTypes.Default,
-        context,
-        target: url,
-    }), [context, url]);
+    const defaultEvent = (0, hooks_1.useAnalyticsEvent)(common_1.DefaultEventNames.CardBase, url);
     const handleAnalytics = (0, hooks_1.useAnalytics)(defaultEvent);
     let header, content, footer, image, headerClass, footerClass;
     function handleChild(child) {

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/Link/Link.js

@@ -10,7 +10,6 @@ const FileLink_1 = tslib_1.__importDefault(require("../FileLink/FileLink"));
 const BackLink_1 = tslib_1.__importDefault(require("../BackLink/BackLink"));
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const locationContext_1 = require("../../context/locationContext/locationContext");
-const blockPositionContext_1 = require("../../context/blockPositionContext");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const hooks_1 = require("../../hooks");
 const b = (0, utils_1.block)('link-block');
@@ -30,13 +29,7 @@ function getArrowSize(size) {
 const LinkBlock = (props) => {
     const { text, url, arrow, metrikaGoals, pixelEvents, analyticsEvents, theme = 'file-link', colorTheme = 'light', textSize = 'm', className, target, children, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
-    const context = (0, react_1.useContext)(blockPositionContext_1.BlockPositionContext);
-    const defaultEvent = (0, react_1.useMemo)(() => ({
-        name: 'link-click',
-        type: models_1.PredefinedEventTypes.Default,
-        context,
-        target: url,
-    }), [context, url]);
+    const defaultEvent = (0, hooks_1.useAnalyticsEvent)(models_1.DefaultEventNames.Link, url);
     const handleAnalytics = (0, hooks_1.useAnalytics)(defaultEvent);
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const { tld } = (0, react_1.useContext)(localeContext_1.LocaleContext);

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;