@gravity-ui/page-constructor 4.3.0 → 4.3.12-alpha.3

package/build/esm/components/ReactPlayer/CustomBarControls.css

@@ -4,32 +4,64 @@ unpredictable css rules order in build */
   position: absolute;
   bottom: 0;
 }
+.pc-CustomBarControls__wrapper_type_with-play-pause-button {
+  width: 100%;
+  padding: 20px;
+  display: flex;
+  gap: 20px;
+}
 .pc-CustomBarControls__button {
-  margin: 12px;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button {
+  opacity: 0.9;
+  background-color: transparent;
+  transition: opacity 300ms ease 3s;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:hover, .pc-CustomBarControls__button_type_with-play-pause-button:focus {
+  opacity: 1;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus {
+  outline: 1px solid var(--g-color-line-light);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.pc-CustomBarControls__button_type_with-play-pause-button:focus:not(:focus-visible) {
+  outline: none;
+}
+.pc-CustomBarControls__button_type_with-mute-button {
   border-radius: 50%;
   display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   position: relative;
   width: 64px;
   height: 64px;
   background: var(--g-color-base-background);
   transition: background-color 300ms;
+  margin: 12px;
 }
-.pc-CustomBarControls__button:hover {
+.pc-CustomBarControls__button_type_with-mute-button:hover, .pc-CustomBarControls__button_type_with-mute-button:focus {
   background: #eff2f8;
 }
-.pc-CustomBarControls__icon {
-  margin: auto;
+.pc-CustomBarControls__button_type_with-mute-button:focus {
+  outline: 2px solid var(--g-color-line-misc);
 }
-.pc-CustomBarControls__mute-button {
-  width: inherit;
+.pc-CustomBarControls__button_type_with-mute-button:focus:not(:focus-visible) {
+  outline: none;
+}
+.pc-CustomBarControls__play-icon {
+  height: 24px;
+  width: 24px;
+}
+.pc-CustomBarControls__mute-icon_type_with-mute-button {
   height: 22px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  margin: auto;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMjAgN2E1LjY1NyA1LjY1NyAwIDAgMSAwIDhtMy0xMWMzLjg2NiAzLjg2NiAzLjg2NiAxMC4xMzQgMCAxNCIgc3Ryb2tlPSIjMjYyNjI2IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA3IDctN2gydjIyaC0ybC03LTdIMFY3aDd6IiBmaWxsPSIjMjYyNjI2Ii8+Cjwvc3ZnPgo=");
-}
-.pc-CustomBarControls__mute-button_muted {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibTcgNyA3LTdoMnYyMmgtMmwtNy03SDBWN2g3eiIgZmlsbD0iIzI2MjYyNiIvPgogICAgPHBhdGggZD0ibTIwIDcgNCA0bTAgMC00IDRtNC00IDQtNG0tNCA0IDQgNCIgc3Ryb2tlPSIjMjYyNjI2IiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==");
+  width: 32px;
+}
+.pc-CustomBarControls__mute-icon_type_with-play-pause-button {
+  height: 24px;
+  width: 24px;
 }

package/build/esm/components/ReactPlayer/CustomBarControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClassNameProps } from '../../models';
+import { ClassNameProps, CustomControlsType } from '../../models';
 import './CustomBarControls.css';
 interface MuteConfigProps {
     isMuted: boolean;
@@ -8,6 +8,9 @@ interface MuteConfigProps {
 export interface CustomBarControlsProps extends ClassNameProps {
     mute?: MuteConfigProps;
     elapsedTimePercent?: number;
+    type?: CustomControlsType;
+    isPaused?: boolean;
+    onPlayClick?: () => void;
 }
 declare const CustomBarControls: (props: CustomBarControlsProps) => JSX.Element;
 export default CustomBarControls;

package/build/esm/components/ReactPlayer/CustomBarControls.js

@@ -1,19 +1,43 @@
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { Mute } from '../../icons/Mute';
+import { MuteSmall } from '../../icons/MuteSmall';
+import { Unmute } from '../../icons/Unmute';
+import { UnmuteSmall } from '../../icons/UnmuteSmall';
+import { VideoControlPause } from '../../icons/VideoControlPause';
+import { VideoControlPlay } from '../../icons/VideoControlPlay';
+import { CustomControlsType } from '../../models';
 import { block } from '../../utils';
 import CircleProgress from './CircleProgress';
+import i18n from './i18n';
 import './CustomBarControls.css';
 const b = block('CustomBarControls');
 const CustomBarControls = (props) => {
-    const { mute, elapsedTimePercent = 0, className } = props;
-    const renderMute = useCallback((elapsedTime, muteConfig) => {
-        if (!muteConfig) {
+    const { mute, elapsedTimePercent = 0, className, type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, } = props;
+    const muteIcon = useMemo(() => {
+        return type === CustomControlsType.WithMuteButton ? Mute : MuteSmall;
+    }, [type]);
+    const unmuteIcon = useMemo(() => {
+        return type === CustomControlsType.WithMuteButton ? Unmute : UnmuteSmall;
+    }, [type]);
+    const muteButton = useMemo(() => {
+        if (!mute) {
             return null;
         }
-        const { isMuted, changeMute } = muteConfig;
-        return (React.createElement("div", { className: b('button'), onClick: changeMute },
-            React.createElement("div", { className: b('mute-button', { muted: isMuted }) }),
-            !isMuted && React.createElement(CircleProgress, { elapsedTime: elapsedTime, strokeWidth: 5 })));
-    }, []);
-    return React.createElement("div", { className: b('wrapper', className) }, renderMute(elapsedTimePercent, mute));
+        const { isMuted, changeMute } = mute;
+        return (React.createElement("button", { className: b('button', { type }), onClick: changeMute, "aria-label": i18n(isMuted ? 'unmute' : 'mute') },
+            React.createElement(Icon, { data: isMuted ? unmuteIcon : muteIcon, className: b('mute-icon', { type }) }),
+            type === CustomControlsType.WithMuteButton && !isMuted && (React.createElement(CircleProgress, { elapsedTime: elapsedTimePercent, strokeWidth: 5 }))));
+    }, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]);
+    const playPauseButton = useMemo(() => {
+        if (type !== CustomControlsType.WithPlayPauseButton) {
+            return null;
+        }
+        return (React.createElement("button", { onClick: onPlayClick, className: b('button', { type }), "aria-label": i18n(isPaused ? 'play' : 'pause') },
+            React.createElement(Icon, { data: isPaused ? VideoControlPlay : VideoControlPause, className: b('play-icon') })));
+    }, [isPaused, onPlayClick, type]);
+    return (React.createElement("div", { className: b('wrapper', { type }, className) },
+        playPauseButton,
+        muteButton));
 };
 export default CustomBarControls;

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -50,6 +50,18 @@ unpredictable css rules order in build */
   opacity: 1;
   transition: opacity 300ms ease 0s;
 }
+.pc-ReactPlayer_started.pc-ReactPlayer_controls_custom.pc-ReactPlayer_hovered::before {
+  opacity: 1;
+}
+.pc-ReactPlayer_started.pc-ReactPlayer_controls_custom::before {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 65.36%, rgba(0, 0, 0, 0.2) 100%);
+  opacity: 0;
+  transition: opacity 300ms;
+}
 .pc-ReactPlayer__custom-bar-controls {
   opacity: 0;
   transition: opacity 300ms ease 3s;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -1,13 +1,13 @@
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import ReactPlayer from 'react-player';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { VideoContext } from '../../context/videoContext';
-import { useAnalytics } from '../../hooks';
+import { useAnalytics, useMount } from '../../hooks';
 import { PlayVideo } from '../../icons';
-import { DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
+import { CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
 import { block } from '../../utils';
 import CustomBarControls from './CustomBarControls';
 import i18n from './i18n';
@@ -19,8 +19,9 @@ const FPS = 60;
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
     const { metrika } = useContext(MetrikaContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
+    const { type: customControlsType = CustomControlsType.WithMuteButton } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = useContext(VideoContext);
@@ -32,8 +33,10 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const [width, setWidth] = useState(0);
     const [muted, setMuted] = useState(mute);
     const [started, setStarted] = useState(autoPlay);
-    const [paused, setPaused] = useState(false);
     const [ended, setEnded] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    useMount(() => setIsMounted(true));
     const videoSrc = useMemo(() => checkYoutubeVideos(src), [src]);
     const eventsArray = useMemo(() => {
         if (analyticsEvents) {
@@ -106,7 +109,9 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         return (React.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": i18n('play') }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = useCallback((isMuted) => {
-        if (isMuted && playerRef) {
+        if (isMuted &&
+            playerRef &&
+            customControlsType !== CustomControlsType.WithPlayPauseButton) {
             playerRef.seekTo(0);
             setPlayedPercent(0);
         }
@@ -124,8 +129,16 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [playerRef, metrika, videoMetrika, handleAnalytics, playEvents, stopEvents, setProps]);
-    const handleClick = useCallback(() => changeMute(muted), [changeMute, muted]);
+    }, [
+        playerRef,
+        customControlsType,
+        metrika,
+        videoMetrika,
+        playEvents,
+        stopEvents,
+        handleAnalytics,
+        setProps,
+    ]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
@@ -139,12 +152,11 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = useCallback(() => {
         // For support correct state for youtube
-        setIsPlaying(false);
-        if (controls === MediaVideoControlsType.Custom) {
-            setPaused(true);
-            setIsPlaying(true);
+        if (controls !== MediaVideoControlsType.Custom ||
+            customControlsType === CustomControlsType.WithPlayPauseButton) {
+            setIsPlaying(false);
         }
-    }, [controls, setIsPlaying, setPaused]);
+    }, [controls, customControlsType]);
     const onStart = useCallback(() => {
         if (!autoPlay && !initiallyMuted) {
             setMuted(false);
@@ -152,17 +164,17 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [autoPlay, initiallyMuted]);
     const onPlay = useCallback(() => {
         setIsPlaying(true);
-        if (controls === MediaVideoControlsType.Custom) {
+        if (controls === MediaVideoControlsType.Custom &&
+            customControlsType === CustomControlsType.WithMuteButton) {
             if (ended) {
                 changeMute(false);
             }
-            else if (paused) {
+            else if (!isPlaying) {
                 changeMute(muted);
             }
             setEnded(false);
-            setPaused(false);
         }
-    }, [changeMute, controls, ended, muted, paused]);
+    }, [changeMute, controls, customControlsType, ended, isPlaying, muted]);
     const onProgress = useCallback((progress) => {
         setPlayedPercent(progress.played);
         if (progress.played === 1) {
@@ -180,21 +192,33 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         setEnded(true);
     }, [loop, playerRef]);
-    const renderCustomBarControls = useCallback((isMuted, elapsedTimePercent) => {
-        if (controls !== MediaVideoControlsType.Custom || !isPlaying) {
-            return null;
+    const onPlayClick = useCallback(() => {
+        if (isPlaying) {
+            onPause();
+        }
+        else {
+            onPlay();
+        }
+    }, [isPlaying, onPlay, onPause]);
+    const handleClick = useCallback(() => {
+        if (customControlsType === CustomControlsType.WithMuteButton) {
+            changeMute(muted);
         }
-        return (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted: isMuted }, customBarControlsClassName), mute: {
-                isMuted,
+        else {
+            onPlayClick();
+        }
+    }, [changeMute, customControlsType, muted, onPlayClick]);
+    const onFocusIn = useCallback(() => setHovered(true), []);
+    const onFocusOut = useCallback(() => setHovered(false), []);
+    return (React.createElement("div", { className: b({ wrapper: !currentHeight, controls, started, hovered }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (React.createElement(Fragment, null,
+        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
+        controls === MediaVideoControlsType.Custom && started && (React.createElement(CustomBarControls, { className: b('custom-bar-controls', { muted }, customBarControlsClassName), mute: {
+                isMuted: muted,
                 changeMute: (event) => {
                     event.stopPropagation();
-                    changeMute(isMuted);
+                    changeMute(muted);
                 },
-            }, elapsedTimePercent: elapsedTimePercent }));
-    }, [controls, isPlaying, customBarControlsClassName, changeMute]);
-    return (React.createElement("div", { className: b({ wrapper: !currentHeight }, className), ref: ref, onClick: handleClick },
-        React.createElement(ReactPlayer, { className: b('player'), url: videoSrc, muted: muted, controls: controls === MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: setPlayerRef, onPlay: onPlay, onPause: onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel }),
-        renderCustomBarControls(muted, playedPercent)));
+            }, elapsedTimePercent: playedPercent, type: customControlsType, isPaused: !isPlaying, onPlayClick: onPlayClick })))) : null));
 });
 function getHeight(width) {
     return (width / 16) * 9;

package/build/esm/components/ReactPlayer/i18n/en.json

@@ -1,3 +1,6 @@
 {
-  "play": "Play"
+  "play": "Play",
+  "pause": "Pause",
+  "mute": "Mute",
+  "unmute": "Unmute"
 }

package/build/esm/components/ReactPlayer/i18n/ru.json

@@ -1,3 +1,6 @@
 {
-  "play": "Воспроизвести"
+  "play": "Воспроизвести",
+  "pause": "Остановить",
+  "mute": "Отключить звук",
+  "unmute": "Включить звук"
 }

package/build/esm/components/Table/Table.js

@@ -2,28 +2,34 @@ import React from 'react';
 import { HTML, YFMWrapper } from '../';
 import { block } from '../../utils';
 import './Table.css';
+function getMarkerId(index) {
+    if (isNaN(index)) {
+        return undefined;
+    }
+    return `marker-${index}`;
+}
 const b = block('table');
 export default class Table extends React.Component {
     render() {
-        const { content, legend, marker = 'disk', className } = this.props;
+        const { content, legend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
-        return (React.createElement("div", { className: b(null, className) },
+        return (React.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
             legend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
-        return (React.createElement("div", { className: b('table') }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
+        return (React.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return React.createElement("div", { className: b('marker', { type, index: String(cell) }) });
+        return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
     }
     renderLegend(legend, marker) {
         return (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { key: item, className: b('legend-item') },
             this.renderMarker(marker, String(index)),
-            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
+            React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
     }
     getDefaultJustify(content, justify) {
         return justify || new Array(content[0].length).fill('center');

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
 import { v4 as uuidv4 } from 'uuid';
 import { useAnalytics } from '../../hooks/useAnalytics';
 import { PlayVideo } from '../../icons';
@@ -54,7 +54,7 @@ const VideoBlock = (props) => {
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
     }, [handleAnalytics, analyticsEvents, src, attributes]);
     useEffect(() => {
-        const updateSize = _.debounce(() => {
+        const updateSize = debounce(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
         }, 100);
         updateSize();
@@ -67,11 +67,12 @@ const VideoBlock = (props) => {
         if (norender) {
             return;
         }
-        const fullSrc = `${src}?${getPageSearchParams(attributes || {})}`;
         if (ref.current && !iframeRef.current) {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
-            iframe.src = fullSrc;
+            if (!previewImg) {
+                iframe.src = `${src}?${getPageSearchParams(attributes || {})}`;
+            }
             iframe.width = '100%';
             iframe.height = '100%';
             iframe.title = i18n('iframe-title');
@@ -82,7 +83,7 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullscreen]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]);
     useEffect(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
@@ -91,7 +92,7 @@ const VideoBlock = (props) => {
     }
     return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
-        playButton || (React.createElement("button", { className: b('button') },
+        playButton || (React.createElement("button", { title: "Play", className: b('button') },
             React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 })))))));
 };
 export default VideoBlock;

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

@@ -1,9 +1,10 @@
 import { ClassNameProps, Modifiers } from '../../models';
-export interface YFMWrapperProps {
-    className?: string;
+import { QAProps } from '../../models/common';
+export interface YFMWrapperProps extends ClassNameProps, QAProps {
     content: string;
     modifiers?: Modifiers;
     itemProp?: string;
+    id?: string;
 }
-declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id, qa }: YFMWrapperProps) => JSX.Element;
 export default YFMWrapper;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -1,9 +1,9 @@
 /* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
 in your project via global 'yfm' class */
 import React from 'react';
-import block from 'bem-cn-lite';
 import toSnakeCase from 'snakecase-keys';
 import { HTML } from '../../components';
-const yfm = block('yfm');
-const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp }, content));
+import { cn } from '../../utils';
+const yfm = cn('yfm');
+const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
 export default YFMWrapper;

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

@@ -21,11 +21,18 @@ export declare const blockMap: {
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
-    "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
+    "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
-    content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
+    content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
 };
+export declare const navItemMap: {
+    button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
+    social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+};

package/build/esm/constructor-items.js

@@ -1,5 +1,7 @@
 import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './blocks';
-import { BlockType, SubBlockType } from './models';
+import { BlockType, NavigationItemType, SubBlockType } from './models';
+import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
+import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
 import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceDetailed, Quote, } from './sub-blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
@@ -32,3 +34,10 @@ export const subBlockMap = {
     [SubBlockType.Content]: Content,
     [SubBlockType.Quote]: Quote,
 };
+export const navItemMap = {
+    [NavigationItemType.Button]: NavigationButton,
+    [NavigationItemType.Social]: SocialIcon,
+    [NavigationItemType.Dropdown]: NavigationDropdown,
+    [NavigationItemType.Link]: NavigationLink,
+    [NavigationItemType.GithubButton]: GithubButton,
+};

package/build/esm/containers/Loadable/Loadable.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Spin } from '@gravity-ui/uikit';
-import blockCn from 'bem-cn-lite';
 import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
+import { block as blockCn } from '../../utils/cn';
 import i18n from './i18n';
 import './Loadable.css';
 const b = blockCn('loadable-block');

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -84,6 +84,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--g-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import '@doc-tools/transform/dist/js/yfm';
-import { blockMap, subBlockMap } from '../../constructor-items';
+import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { CustomConfig, CustomItems, NavigationData, PageContent, ShouldRenderBlock } from '../../models';
 import './PageConstructor.css';
 export type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
+export type NavItemMap = typeof navItemMap & CustomItems;
 export interface PageConstructorProps {
     content?: PageContent;
     shouldRenderBlock?: ShouldRenderBlock;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,17 +1,16 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
-import blockOrigin from 'bem-cn-lite';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import { UIKIT_ROOT_CLASS } from '../../components/constants';
-import { blockMap, subBlockMap } from '../../constructor-items';
+import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
 import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
-import { BlockType, BlockTypes, HeaderBlockTypes, SubBlockTypes, } from '../../models';
+import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getCustomItems, getCustomSubBlockTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
+import { cn as blockOrigin, block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorRow } from './components/ConstructorRow';
@@ -22,10 +21,15 @@ export const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = useMemo(() => ({
         context: {
-            blockTypes: [...BlockTypes, ...getCustomBlockTypes(custom)],
-            subBlockTypes: [...SubBlockTypes, ...getCustomSubBlockTypes(custom)],
-            headerBlockTypes: [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)],
-            itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(custom)),
+            blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
+            subBlockTypes: [...SubBlockTypes, ...getCustomTypes(['subBlocks'], custom)],
+            headerBlockTypes: [...HeaderBlockTypes, ...getCustomTypes(['headers'], custom)],
+            navigationBlockTypes: [
+                ...NavigationItemTypes,
+                ...getCustomTypes(['navigation'], custom),
+            ],
+            itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(['blocks', 'headers', 'subBlocks'], custom)),
+            navItemMap: Object.assign(Object.assign({}, navItemMap), getCustomItems(['navigation'], custom)),
             loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
             shouldRenderBlock,
             customization: {

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.css

@@ -0,0 +1,38 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-constructor-block.pc-constructor-block_indentTop_0 {
+  margin-top: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xs {
+  margin-top: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_s {
+  margin-top: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_m {
+  margin-top: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_l {
+  margin-top: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentTop_xl {
+  margin-top: 64px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_0 {
+  padding-bottom: 0;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xs {
+  padding-bottom: 16px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_s {
+  padding-bottom: 24px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_m {
+  padding-bottom: 32px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_l {
+  padding-bottom: 48px;
+}
+.pc-constructor-block.pc-constructor-block_indentBottom_xl {
+  padding-bottom: 64px;
+}

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BlockDecorationProps, ConstructorBlock as ConstructorBlockType, WithChildren } from '../../../../models';
+import './ConstructorBlock.css';
 interface ConstructorBlockProps extends Pick<BlockDecorationProps, 'index'> {
     data: ConstructorBlockType;
 }