@gravity-ui/page-constructor 5.30.0 → 5.31.0

package/README.md

@@ -36,11 +36,12 @@ const Page: React.PropsWithChildren<PageProps> = ({content}) => (
 
 ```typescript
 interface PageConstructorProps {
-  content: PageContent; //Blocks data in JSON format.
+  content: PageContent; // Blocks data in JSON format.
   shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
-  custom?: Custom; //Custom blocks (see `Customization`).
-  renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
+  custom?: Custom; // Custom blocks (see `Customization`).
+  renderMenu?: () => React.ReactNode; // A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
   navigation?: NavigationData; // Navigation data for using navigation component in JSON format
+  isBranded?: boolean; // If true, adds a footer that links to https://gravity-ui.com/. Try BrandFooter component for more customization.
 }
 
 interface PageConstructorProviderProps {

package/build/cjs/blocks/Questions/QuestionBlockItem/QuestionBlockItem.css

@@ -12,12 +12,24 @@ unpredictable css rules order in build */
   padding-top: 32px;
 }
 .pc-QuestionsBlockItem__title {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   font-size: var(--g-text-header-1-font-size);
   line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--g-text-accent-font-weight);
   position: relative;
+  display: block;
+  width: 100%;
   padding-right: 24px;
+  text-align: start;
   cursor: pointer;
   border-radius: var(--g-focus-border-radius);
 }

package/build/cjs/blocks/Questions/QuestionBlockItem/QuestionBlockItem.js

@@ -12,10 +12,7 @@ const b = (0, utils_1.block)('QuestionsBlockItem');
 const QuestionBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
     const { onKeyDown } = (0, uikit_1.useActionHandlers)(onClick);
     return (react_1.default.createElement("div", { className: b(), itemScope: true, itemProp: models_1.FaqMicrodataValues.QuestionProp, itemType: models_1.FaqMicrodataValues.QuestionType, role: 'listitem' },
-        react_1.default.createElement("h3", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, 
-            // TODO fix in https://github.com/gravity-ui/page-constructor/issues/966
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-            role: 'button', tabIndex: 0, onKeyDown: onKeyDown },
+        react_1.default.createElement("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown },
             react_1.default.createElement(components_1.HTML, { itemProp: models_1.FaqMicrodataValues.QuestionNameProp }, itemTitle),
             react_1.default.createElement(components_1.ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })),
         react_1.default.createElement(components_1.Foldable, { isOpened: isOpened },

package/build/cjs/components/BrandFooter/BrandFooter.css

@@ -0,0 +1,94 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-brand-footer {
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 72px;
+  margin-top: var(--header-height);
+  color: var(--g-color-text-secondary);
+  border-top: 1px solid var(--g-color-line-generic);
+  transition: color 0.5s ease-out, border-color 0.5s ease-out;
+}
+.pc-brand-footer::after {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  left: 0;
+  height: 1px;
+  opacity: 0;
+  transition: opacity 0.5s ease-out;
+  content: "";
+}
+.pc-brand-footer:hover {
+  color: var(--g-color-text-primary);
+  border-color: transparent;
+}
+.pc-brand-footer:hover::after {
+  opacity: 1;
+}
+.pc-brand-footer_theme_light::after {
+  background: linear-gradient(270deg, rgb(228, 106, 68) 0%, rgb(242, 159, 85) 46.62%, rgb(255, 212, 102) 100%);
+}
+.pc-brand-footer_theme_dark::after {
+  background: linear-gradient(270deg, rgba(228, 106, 68, 0.6) 0%, rgba(242, 159, 85, 0.6) 46.62%, rgba(255, 212, 102, 0.6) 100%);
+}
+.pc-brand-footer__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding-top: 1px;
+}
+.pc-brand-footer__text {
+  align-self: flex-end;
+}
+.pc-brand-footer__brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.pc-brand-footer__brand-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.pc-brand-footer__brand-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 20px;
+}
+.pc-brand-footer__brand-name > svg {
+  width: 100%;
+  height: 100%;
+}
+@media (max-width: 769px) {
+  .pc-brand-footer {
+    font-family: var(--g-text-body-font-family);
+    font-weight: var(--g-text-body-font-weight);
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
+    height: 52px;
+  }
+  .pc-brand-footer__content {
+    padding: 0;
+  }
+  .pc-brand-footer__brand-icon {
+    width: 20px;
+    height: 20px;
+  }
+  .pc-brand-footer__brand-name {
+    width: 72px;
+    height: 16px;
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,3 @@
+import type { ClassNameProps } from '../../models';
+declare const BrandFooter: ({ className }: ClassNameProps) => JSX.Element;
+export default BrandFooter;

package/build/cjs/components/BrandFooter/BrandFooter.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const theme_1 = require("../../context/theme");
+const BrandIconDark_1 = require("../../icons/BrandIconDark");
+const BrandIconLight_1 = require("../../icons/BrandIconLight");
+const BrandName_1 = require("../../icons/BrandName");
+const models_1 = require("../../models");
+const utils_1 = require("../../utils");
+const i18n_1 = require("./i18n");
+const b = (0, utils_1.block)('brand-footer');
+const BrandFooter = ({ className }) => {
+    const theme = (0, theme_1.useTheme)();
+    return (react_1.default.createElement(uikit_1.Link, { className: b({ theme }, className), href: "https://gravity-ui.com" },
+        react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement("span", { className: b('text') }, (0, i18n_1.i18n)('created-on')),
+            react_1.default.createElement("div", { className: b('brand-icon') }, theme === models_1.Theme.Light ? react_1.default.createElement(BrandIconLight_1.BrandIconLight, null) : react_1.default.createElement(BrandIconDark_1.BrandIconDark, null)),
+            react_1.default.createElement("div", { className: b('brand-name') },
+                react_1.default.createElement(BrandName_1.BrandName, null)))));
+};
+exports.default = BrandFooter;

package/build/cjs/components/BrandFooter/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Created on"
+}

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

@@ -0,0 +1 @@
+export declare const i18n: (key: "created-on", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/components/BrandFooter/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}BrandFooter`);

package/build/cjs/components/BrandFooter/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Создано на"
+}

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

@@ -7,5 +7,5 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
     onLoad?: ReactEventHandler<HTMLDivElement>;
     onError?: () => void;
 }
-export declare const ImageBase: ({ fetchPriority, ...props }: ImageBaseProps) => JSX.Element;
+export declare const ImageBase: ({ fetchPriority, alt, ...props }: ImageBaseProps) => JSX.Element;
 export default ImageBase;

package/build/cjs/components/ImageBase/ImageBase.js

@@ -5,15 +5,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const imageContext_1 = require("../../context/imageContext/imageContext");
 const ImageBase = (_a) => {
-    var { fetchPriority } = _a, props = tslib_1.__rest(_a, ["fetchPriority"]);
+    var { fetchPriority, alt } = _a, props = tslib_1.__rest(_a, ["fetchPriority", "alt"]);
     const { Image } = react_1.default.useContext(imageContext_1.ImageContext);
-    return Image ? (react_1.default.createElement(Image, Object.assign({ fetchPriority: fetchPriority }, props))) : (
+    return Image ? (react_1.default.createElement(Image, Object.assign({ fetchPriority: fetchPriority, alt: alt }, props))) : (
     // There is an issue with fetchpriority attr in img in React.
     // It is still not supported. However it's nice to have ability to manage
     // this prop is good to have to improve Core Web Vitals.
     // So, here is a workaround to assign the attr.
-    // eslint-disable-next-line jsx-a11y/alt-text
-    react_1.default.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, props)));
+    react_1.default.createElement("img", Object.assign({}, { fetchpriority: fetchPriority }, { alt: alt }, props)));
 };
 exports.ImageBase = ImageBase;
 exports.default = exports.ImageBase;

package/build/cjs/components/OutsideClick/OutsideClick.js

@@ -1,11 +1,9 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 //TODO move into cloud components?
 const react_1 = tslib_1.__importStar(require("react"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 class OutsideClick extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -26,8 +24,8 @@ class OutsideClick extends react_1.default.Component {
         document.removeEventListener('click', this.handleOutsideClick);
     }
     render() {
-        const { className, onClick, children } = this.props;
-        return (react_1.default.createElement("div", { className: className, ref: this.ref, onClick: onClick }, children));
+        const { children, className, onClick } = this.props;
+        return (react_1.default.createElement("div", { className: className, ref: this.ref, onClick: onClick, onKeyDown: noop_1.default, role: onClick ? 'button' : 'group', tabIndex: onClick ? 0 : -1 }, children));
     }
 }
 exports.default = OutsideClick;

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReactPlayerBlock = void 0;
 const tslib_1 = require("tslib");
@@ -31,6 +28,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
     const mute = initiallyMuted || autoPlay;
     const { playingVideoRef, setProps } = (0, react_1.useContext)(videoContext_1.VideoContext);
     const ref = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
     const [playerRef, setPlayerRef] = (0, react_1.useState)();
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(autoPlay);
     const [playedPercent, setPlayedPercent] = (0, react_1.useState)(0);
@@ -129,7 +127,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 playButtonContent = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 });
                 break;
         }
-        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play') }, playButtonContent));
+        return (react_1.default.createElement("button", { className: b('button', { theme, text: Boolean(text) }, buttonClassName), "aria-label": (0, i18n_1.i18n)('play'), ref: buttonRef }, playButtonContent));
     }, [type, theme, text, buttonClassName]);
     const changeMute = (0, react_1.useCallback)((isMuted) => {
         if (isMuted &&
@@ -220,6 +218,8 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
         }
     }, [isPlaying, onPlay, onPause]);
     const handleClick = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         if (controls === models_1.MediaVideoControlsType.Custom) {
             if (customControlsType === models_1.CustomControlsType.WithMuteButton) {
                 changeMute(muted);
@@ -228,7 +228,14 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
                 onPlayClick();
             }
         }
-    }, [changeMute, customControlsType, muted, onPlayClick, controls]);
+    }, [controls, customControlsType, changeMute, muted, onPlayClick]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        const key = e.key.toLowerCase();
+        if (key === 'enter') {
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, []);
     const onFocusIn = (0, react_1.useCallback)(() => setHovered(true), []);
     const onFocusOut = (0, react_1.useCallback)(() => setHovered(false), []);
     return (react_1.default.createElement("div", { className: b({
@@ -236,7 +243,7 @@ exports.ReactPlayerBlock = react_1.default.forwardRef((props, originRef) => {
             controls,
             contain,
             'auto-ratio': autoRatio,
-        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
+        }, className), ref: ref, onClick: handleClick, onMouseEnter: onFocusIn, onMouseLeave: onFocusOut, onFocus: onFocusIn, onBlur: onFocusOut, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, isMounted ? (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(react_player_1.default, { className: b('player'), url: videoSrc, muted: muted, controls: controls === models_1.MediaVideoControlsType.Default, height: currentHeight || '100%', width: width || '100%', light: previewImgUrl, playing: isPlaying, playIcon: playIcon, progressInterval: FPS, onClickPreview: handleClickPreview, onStart: onStart, onReady: onReady, onPlay: onPlay, onPause: autoPlay && customControlsType !== models_1.CustomControlsType.WithMuteButton
                 ? undefined
                 : onPause, onProgress: onProgress, onEnded: onEnded, "aria-label": ariaLabel, previewTabIndex: -1, config: {

package/build/cjs/components/Title/TitleItem.css

@@ -59,6 +59,15 @@ unpredictable css rules order in build */
   margin-top: 4px;
 }
 .pc-title-item__link {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   color: inherit;
   text-decoration: none;
   padding-right: 8px;

package/build/cjs/components/Title/TitleItem.d.ts

@@ -1,5 +1,5 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;

package/build/cjs/components/Title/TitleItem.js

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getArrowSize = void 0;
 const tslib_1 = require("tslib");
@@ -48,7 +45,7 @@ const TitleItem = (props) => {
         content = (react_1.default.createElement("a", Object.assign({ className: b('link'), href: url }, (0, utils_1.getLinkProps)(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
     }
     else if (onClick) {
-        content = (react_1.default.createElement("span", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
+        content = (react_1.default.createElement("button", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
     }
     return (react_1.default.createElement(react_1.Fragment, null,
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor, className: b('anchor') }),

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

@@ -14,6 +14,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     className?: string;
     previewImg?: string;
     playButton?: React.ReactNode;
+    playButtonId?: string;
     height?: number;
     fullscreen?: boolean;
     autoplay?: boolean;

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

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getHeight = exports.AUTOPLAY_ATTRIBUTES = void 0;
 const tslib_1 = require("tslib");
@@ -47,13 +44,14 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
+    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
     const handleAnalytics = (0, useAnalytics_1.useAnalytics)(common_1.DefaultEventNames.VideoPreview);
     const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const [hidePreview, setHidePreview] = (0, react_1.useState)(false);
     const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height || undefined);
     const fullId = (0, react_1.useMemo)(() => id || (0, uuid_1.v4)(), [id]);
+    const buttonId = (0, uikit_1.useUniqId)();
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(!previewImg);
     const iframeSrc = src && isPlaying
         ? `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, (attributes || {})), (previewImg || autoplay ? exports.AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES)))}`
@@ -63,6 +61,7 @@ const VideoBlock = (props) => {
         setIsPlaying(true);
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
     }, [handleAnalytics, analyticsEvents]);
+    const { onKeyDown: onPreviewKeyDown } = (0, uikit_1.useActionHandlers)(onPreviewClick);
     (0, react_1.useEffect)(() => {
         const updateSize = (0, debounce_1.default)(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
@@ -84,9 +83,9 @@ const VideoBlock = (props) => {
     }
     return (react_1.default.createElement("div", { className: b(null, className), style: { height: currentHeight }, ref: ref },
         iframeContent,
-        previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+        previewImg && !hidePreview && !fullscreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
             react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
-            playButton || (react_1.default.createElement("button", { title: "Play", className: b('button') },
+            playButton || (react_1.default.createElement("button", { title: "Play", id: buttonId, className: b('button') },
                 react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayFill, size: 24 })))))));
 };
 exports.default = VideoBlock;

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

@@ -1,5 +1,6 @@
 export { default as Anchor } from './Anchor/Anchor';
 export { default as AnimateBlock } from './AnimateBlock/AnimateBlock';
+export { default as Author } from './Author/Author';
 export { default as BackgroundImage } from './BackgroundImage/BackgroundImage';
 export { default as BackgroundMedia } from './BackgroundMedia/BackgroundMedia';
 export { default as BackLink } from './BackLink/BackLink';
@@ -7,20 +8,30 @@ export { default as BalancedMasonry } from './BalancedMasonry/BalancedMasonry';
 export { default as BlockBase } from './BlockBase/BlockBase';
 export { default as Button } from './Button/Button';
 export { default as Buttons } from './Buttons/Buttons';
+export { default as BrandFooter } from './BrandFooter/BrandFooter';
 export { default as CardBase } from './CardBase/CardBase';
+export { default as ContentList } from './ContentList/ContentList';
+export { default as Control } from './Control/Control';
 export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
 export { default as FileLink } from './FileLink/FileLink';
 export { default as Foldable } from './Foldable/Foldable';
 export { default as FullscreenImage } from './FullscreenImage/FullscreenImage';
+export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
 export { default as FullWidthBackground } from './FullWidthBackground/FullWidthBackground';
 export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export { default as HTML } from './HTML/HTML';
+export { default as IconWrapper } from './IconWrapper/IconWrapper';
 export { default as Image } from './Image/Image';
 export { default as ImageBase } from './ImageBase/ImageBase';
+export { default as InnerForm } from './InnerForm/InnerForm';
 export { default as Link } from './Link/Link';
 export { default as Links } from './Links/Links';
 export { default as Media } from './Media/Media';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as OutsideClick } from './OutsideClick/OutsideClick';
+export { default as OverflowScroller } from './OverflowScroller/OverflowScroller';
 export { default as ReactPlayer } from './ReactPlayer/ReactPlayer';
+export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as Table } from './Table/Table';
 export { default as Title } from './Title/Title';
 export { default as ToggleArrow } from './ToggleArrow/ToggleArrow';
@@ -28,15 +39,5 @@ export { default as UnpublishedLabel } from './UnpublishedLabel/UnpublishedLabel
 export { default as VideoBlock } from './VideoBlock/VideoBlock';
 export { default as YFMWrapper } from './YFMWrapper/YFMWrapper';
 export { default as YandexForm } from './YandexForm/YandexForm';
-export { default as Control } from './Control/Control';
-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 { default as ContentList } from './ContentList/ContentList';
-export { default as InnerForm } from './InnerForm/InnerForm';
-export { default as IconWrapper } from './IconWrapper/IconWrapper';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/cjs/components/index.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = exports.InnerForm = exports.ContentList = 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.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Buttons = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.RouterLink = exports.ReactPlayer = exports.OverflowScroller = exports.OutsideClick = exports.MetaInfo = exports.Media = exports.Links = exports.Link = exports.InnerForm = exports.ImageBase = exports.Image = exports.IconWrapper = exports.HTML = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenMedia = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.Control = exports.ContentList = exports.CardBase = exports.BrandFooter = exports.Buttons = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.Author = 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");
 Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return __importDefault(AnimateBlock_1).default; } });
+var Author_1 = require("./Author/Author");
+Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return __importDefault(Author_1).default; } });
 var BackgroundImage_1 = require("./BackgroundImage/BackgroundImage");
 Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return __importDefault(BackgroundImage_1).default; } });
 var BackgroundMedia_1 = require("./BackgroundMedia/BackgroundMedia");
@@ -22,8 +24,14 @@ var Button_1 = require("./Button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
 var Buttons_1 = require("./Buttons/Buttons");
 Object.defineProperty(exports, "Buttons", { enumerable: true, get: function () { return __importDefault(Buttons_1).default; } });
+var BrandFooter_1 = require("./BrandFooter/BrandFooter");
+Object.defineProperty(exports, "BrandFooter", { enumerable: true, get: function () { return __importDefault(BrandFooter_1).default; } });
 var CardBase_1 = require("./CardBase/CardBase");
 Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return __importDefault(CardBase_1).default; } });
+var ContentList_1 = require("./ContentList/ContentList");
+Object.defineProperty(exports, "ContentList", { enumerable: true, get: function () { return __importDefault(ContentList_1).default; } });
+var Control_1 = require("./Control/Control");
+Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return __importDefault(Control_1).default; } });
 var ErrorWrapper_1 = require("./ErrorWrapper/ErrorWrapper");
 Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return __importDefault(ErrorWrapper_1).default; } });
 var FileLink_1 = require("./FileLink/FileLink");
@@ -32,24 +40,38 @@ var Foldable_1 = require("./Foldable/Foldable");
 Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return __importDefault(Foldable_1).default; } });
 var FullscreenImage_1 = require("./FullscreenImage/FullscreenImage");
 Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return __importDefault(FullscreenImage_1).default; } });
+var FullscreenMedia_1 = require("./FullscreenMedia/FullscreenMedia");
+Object.defineProperty(exports, "FullscreenMedia", { enumerable: true, get: function () { return __importDefault(FullscreenMedia_1).default; } });
 var FullWidthBackground_1 = require("./FullWidthBackground/FullWidthBackground");
 Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return __importDefault(FullWidthBackground_1).default; } });
 var HeaderBreadcrumbs_1 = require("./HeaderBreadcrumbs/HeaderBreadcrumbs");
 Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return __importDefault(HeaderBreadcrumbs_1).default; } });
+var HTML_1 = require("./HTML/HTML");
+Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+var IconWrapper_1 = require("./IconWrapper/IconWrapper");
+Object.defineProperty(exports, "IconWrapper", { enumerable: true, get: function () { return __importDefault(IconWrapper_1).default; } });
 var Image_1 = require("./Image/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
 var ImageBase_1 = require("./ImageBase/ImageBase");
 Object.defineProperty(exports, "ImageBase", { enumerable: true, get: function () { return __importDefault(ImageBase_1).default; } });
+var InnerForm_1 = require("./InnerForm/InnerForm");
+Object.defineProperty(exports, "InnerForm", { enumerable: true, get: function () { return __importDefault(InnerForm_1).default; } });
 var Link_1 = require("./Link/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
 var Links_1 = require("./Links/Links");
 Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return __importDefault(Links_1).default; } });
 var Media_1 = require("./Media/Media");
 Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return __importDefault(Media_1).default; } });
+var MetaInfo_1 = require("./MetaInfo/MetaInfo");
+Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
 var OutsideClick_1 = require("./OutsideClick/OutsideClick");
 Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return __importDefault(OutsideClick_1).default; } });
+var OverflowScroller_1 = require("./OverflowScroller/OverflowScroller");
+Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return __importDefault(OverflowScroller_1).default; } });
 var ReactPlayer_1 = require("./ReactPlayer/ReactPlayer");
 Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return __importDefault(ReactPlayer_1).default; } });
+var RouterLink_1 = require("./RouterLink/RouterLink");
+Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
 var Table_1 = require("./Table/Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
 var Title_1 = require("./Title/Title");
@@ -64,23 +86,3 @@ var YFMWrapper_1 = require("./YFMWrapper/YFMWrapper");
 Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return __importDefault(YFMWrapper_1).default; } });
 var YandexForm_1 = require("./YandexForm/YandexForm");
 Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return __importDefault(YandexForm_1).default; } });
-var Control_1 = require("./Control/Control");
-Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return __importDefault(Control_1).default; } });
-var OverflowScroller_1 = require("./OverflowScroller/OverflowScroller");
-Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return __importDefault(OverflowScroller_1).default; } });
-var Author_1 = require("./Author/Author");
-Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return __importDefault(Author_1).default; } });
-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; } });
-var ContentList_1 = require("./ContentList/ContentList");
-Object.defineProperty(exports, "ContentList", { enumerable: true, get: function () { return __importDefault(ContentList_1).default; } });
-var InnerForm_1 = require("./InnerForm/InnerForm");
-Object.defineProperty(exports, "InnerForm", { enumerable: true, get: function () { return __importDefault(InnerForm_1).default; } });
-var IconWrapper_1 = require("./IconWrapper/IconWrapper");
-Object.defineProperty(exports, "IconWrapper", { enumerable: true, get: function () { return __importDefault(IconWrapper_1).default; } });

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

@@ -10,6 +10,7 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    isBranded?: boolean;
     microdata?: {
         contentUpdatedDate?: string;
     };

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("@diplodoc/transform/dist/js/yfm");
 const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
+const BrandFooter_1 = tslib_1.__importDefault(require("../../components/BrandFooter/BrandFooter"));
 const RootCn_1 = tslib_1.__importDefault(require("../../components/RootCn"));
 const constructor_items_1 = require("../../constructor-items");
 const animateContext_1 = require("../../context/animateContext");
@@ -20,7 +21,7 @@ const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, isBranded, microdata, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
             blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
@@ -52,7 +53,8 @@ const Constructor = (props) => {
                     renderMenu && renderMenu(),
                     header && (react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header, blockKey: models_1.BlockType.HeaderBlock })),
                     react_1.default.createElement(grid_1.Grid, null, restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
-                        react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks })))))))));
+                        react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks }))))),
+                isBranded && react_1.default.createElement(BrandFooter_1.default, null)))));
 };
 exports.Constructor = Constructor;
 const PageConstructor = (props) => {

package/build/cjs/editor/components/AddBlock/AddBlock.css

@@ -51,12 +51,22 @@ unpredictable css rules order in build */
   overflow-y: auto;
 }
 .pc-add-block__popup .pc-add-block__block {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.2s;
   margin-top: 20px;
   justify-content: flex-start;
+  text-align: start;
   cursor: pointer;
 }
 .pc-add-block__popup .pc-add-block__block:hover {