@gravity-ui/page-constructor 1.7.0-alpha.6 → 1.7.0-alpha.8

package/README.md

@@ -32,59 +32,81 @@ const Page: WithChildren<PageProps> = ({content}) => (
 
 ```typescript
 interface PageConstructorProps {
-    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).
+  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).
+  navigation?: NavigationData; // Navigation data for using navigation component in JSON format
 }
 
 interface PageConstructorProviderProps {
-    isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
-    locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
-    location?: Location; //API of the browser or router history, the page URL.
-    metrika?: Metrika; //Functions for sending analytics
-    ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
-    theme?: 'light' | 'dark'; //Theme to render the page with.
+  isMobile?: boolean; //A flag indicating that the code is executed in mobile mode.
+  locale?: LocaleContextProps; //Info about the language and domain (used when generating and formatting links).
+  location?: Location; //API of the browser or router history, the page URL.
+  metrika?: Metrika; //Functions for sending analytics
+  ssrConfig?: SSR; //A flag indicating that the code is run on the server size.
+  theme?: 'light' | 'dark'; //Theme to render the page with.
 }
 
 export interface PageContent extends Animatable {
-    blocks: Block[];
-    menu?: Menu;
-    background?: MediaProps;
-    footnotes?: string[];
+  blocks: Block[];
+  menu?: Menu;
+  background?: MediaProps;
+  footnotes?: string[];
 }
 
 interface Custom {
-    blocks?: CustomItems;
-    subBlocks?:CustomItems;
-    headers?: CustomItems;
-    loadable?: LoadableConfig;
+  blocks?: CustomItems;
+  subBlocks?: CustomItems;
+  headers?: CustomItems;
+  loadable?: LoadableConfig;
 }
 
 type ShouldRenderBlock = (block: Block, blockKey: string) => Boolean;
 
-interface Location = {
-    history?: History;
-    search?: string;
-    hash?: string;
-    pathname?: string;
-    hostname?: string;
-};
-
-interface Locale = {
-    lang?: Lang;
-    tld?: string;
-};
-
-interface SSR = {
-    isServer?: boolean;
+interface Location {
+  history?: History;
+  search?: string;
+  hash?: string;
+  pathname?: string;
+  hostname?: string;
 }
 
-interface Metrika = {
-    metrika?: any;
-    pixel?: any;
+interface Locale {
+  lang?: Lang;
+  tld?: string;
 }
 
+interface SSR {
+  isServer?: boolean;
+}
+
+interface Metrika {
+  metrika?: any;
+  pixel?: any;
+}
+
+interface NavigationData {
+  logo: NavigationLogo;
+  header: HeaderData;
+}
+
+interface NavigationLogo {
+  icon: ImageProps;
+  text?: string;
+  url?: string;
+}
+
+interface HeaderData {
+  leftItems: NavigationItem[];
+  rightItems?: NavigationItem[];
+}
+
+interface NavigationLogo {
+  icon: ImageProps;
+  text?: string;
+  url?: string;
+}
 ```
 
 ### Custom blocks

package/build/cjs/components/OverflowScroller/OverflowScroller.css

@@ -9,10 +9,12 @@
 .pc-overflow-scroller__scroller {
   position: absolute;
   z-index: 10;
+  top: 0;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 32px;
+  height: calc(100% - 1px);
   cursor: pointer;
   color: var(--yc-color-text-secondary);
   background: linear-gradient(to left, var(--yc-color-base-background) 70%, var(--pc-transparent) 100%) no-repeat;

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

@@ -1,7 +1,7 @@
 import { WithChildren } from '../../models';
 export interface RouterLinkProps {
     href: string;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 declare const RouterLink: ({ href, children }: WithChildren<RouterLinkProps>) => JSX.Element;
 export default RouterLink;

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

@@ -34,4 +34,5 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as Header } from './navigation/components/Header/Header';
+export * as Navigation from './navigation/components/index';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/cjs/components/index.js

@@ -1,78 +1,77 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.Navigation = exports.Header = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+const tslib_1 = require("tslib");
 var Anchor_1 = require("./Anchor/Anchor");
-Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
+Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
-Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return __importDefault(AnimateBlock_1).default; } });
+Object.defineProperty(exports, "AnimateBlock", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(AnimateBlock_1).default; } });
 var BackgroundImage_1 = require("./BackgroundImage/BackgroundImage");
-Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return __importDefault(BackgroundImage_1).default; } });
+Object.defineProperty(exports, "BackgroundImage", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackgroundImage_1).default; } });
 var BackgroundMedia_1 = require("./BackgroundMedia/BackgroundMedia");
-Object.defineProperty(exports, "BackgroundMedia", { enumerable: true, get: function () { return __importDefault(BackgroundMedia_1).default; } });
+Object.defineProperty(exports, "BackgroundMedia", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackgroundMedia_1).default; } });
 var BackLink_1 = require("./BackLink/BackLink");
-Object.defineProperty(exports, "BackLink", { enumerable: true, get: function () { return __importDefault(BackLink_1).default; } });
+Object.defineProperty(exports, "BackLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BackLink_1).default; } });
 var BalancedMasonry_1 = require("./BalancedMasonry/BalancedMasonry");
-Object.defineProperty(exports, "BalancedMasonry", { enumerable: true, get: function () { return __importDefault(BalancedMasonry_1).default; } });
+Object.defineProperty(exports, "BalancedMasonry", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BalancedMasonry_1).default; } });
 var BlockBase_1 = require("./BlockBase/BlockBase");
-Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return __importDefault(BlockBase_1).default; } });
+Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BlockBase_1).default; } });
 var BlockHeader_1 = require("./BlockHeader/BlockHeader");
-Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return __importDefault(BlockHeader_1).default; } });
+Object.defineProperty(exports, "BlockHeader", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(BlockHeader_1).default; } });
 var Button_1 = require("./Button/Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Button_1).default; } });
 var CardBase_1 = require("./CardBase/CardBase");
-Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return __importDefault(CardBase_1).default; } });
+Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(CardBase_1).default; } });
 var ErrorWrapper_1 = require("./ErrorWrapper/ErrorWrapper");
-Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return __importDefault(ErrorWrapper_1).default; } });
+Object.defineProperty(exports, "ErrorWrapper", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ErrorWrapper_1).default; } });
 var FileLink_1 = require("./FileLink/FileLink");
-Object.defineProperty(exports, "FileLink", { enumerable: true, get: function () { return __importDefault(FileLink_1).default; } });
+Object.defineProperty(exports, "FileLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FileLink_1).default; } });
 var Foldable_1 = require("./Foldable/Foldable");
-Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return __importDefault(Foldable_1).default; } });
+Object.defineProperty(exports, "Foldable", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Foldable_1).default; } });
 var FullscreenImage_1 = require("./FullscreenImage/FullscreenImage");
-Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return __importDefault(FullscreenImage_1).default; } });
+Object.defineProperty(exports, "FullscreenImage", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FullscreenImage_1).default; } });
 var FullWidthBackground_1 = require("./FullWidthBackground/FullWidthBackground");
-Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return __importDefault(FullWidthBackground_1).default; } });
+Object.defineProperty(exports, "FullWidthBackground", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(FullWidthBackground_1).default; } });
 var HeaderBreadcrumbs_1 = require("./HeaderBreadcrumbs/HeaderBreadcrumbs");
-Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return __importDefault(HeaderBreadcrumbs_1).default; } });
+Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HeaderBreadcrumbs_1).default; } });
 var HeightCalculator_1 = require("./HeightCalculator/HeightCalculator");
-Object.defineProperty(exports, "HeightCalculator", { enumerable: true, get: function () { return __importDefault(HeightCalculator_1).default; } });
+Object.defineProperty(exports, "HeightCalculator", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HeightCalculator_1).default; } });
 var Image_1 = require("./Image/Image");
-Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Image_1).default; } });
 var Link_1 = require("./Link/Link");
-Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Link_1).default; } });
 var Links_1 = require("./Link/Links");
-Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return __importDefault(Links_1).default; } });
+Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Links_1).default; } });
 var Media_1 = require("./Media/Media");
-Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return __importDefault(Media_1).default; } });
+Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Media_1).default; } });
 var OutsideClick_1 = require("./OutsideClick/OutsideClick");
-Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return __importDefault(OutsideClick_1).default; } });
+Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(OutsideClick_1).default; } });
 var ReactPlayer_1 = require("./ReactPlayer/ReactPlayer");
-Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return __importDefault(ReactPlayer_1).default; } });
+Object.defineProperty(exports, "ReactPlayer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ReactPlayer_1).default; } });
 var Table_1 = require("./Table/Table");
-Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Table_1).default; } });
 var Title_1 = require("./Title/Title");
-Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return __importDefault(Title_1).default; } });
+Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Title_1).default; } });
 var ToggleArrow_1 = require("./ToggleArrow/ToggleArrow");
-Object.defineProperty(exports, "ToggleArrow", { enumerable: true, get: function () { return __importDefault(ToggleArrow_1).default; } });
+Object.defineProperty(exports, "ToggleArrow", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(ToggleArrow_1).default; } });
 var UnpublishedLabel_1 = require("./UnpublishedLabel/UnpublishedLabel");
-Object.defineProperty(exports, "UnpublishedLabel", { enumerable: true, get: function () { return __importDefault(UnpublishedLabel_1).default; } });
+Object.defineProperty(exports, "UnpublishedLabel", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(UnpublishedLabel_1).default; } });
 var VideoBlock_1 = require("./VideoBlock/VideoBlock");
-Object.defineProperty(exports, "VideoBlock", { enumerable: true, get: function () { return __importDefault(VideoBlock_1).default; } });
+Object.defineProperty(exports, "VideoBlock", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(VideoBlock_1).default; } });
 var YFMWrapper_1 = require("./YFMWrapper/YFMWrapper");
-Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return __importDefault(YFMWrapper_1).default; } });
+Object.defineProperty(exports, "YFMWrapper", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(YFMWrapper_1).default; } });
 var YandexForm_1 = require("./YandexForm/YandexForm");
-Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return __importDefault(YandexForm_1).default; } });
+Object.defineProperty(exports, "YandexForm", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(YandexForm_1).default; } });
 var Control_1 = require("./Control/Control");
-Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return __importDefault(Control_1).default; } });
+Object.defineProperty(exports, "Control", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Control_1).default; } });
 var OverflowScroller_1 = require("./OverflowScroller/OverflowScroller");
-Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return __importDefault(OverflowScroller_1).default; } });
+Object.defineProperty(exports, "OverflowScroller", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(OverflowScroller_1).default; } });
 var Author_1 = require("./Author/Author");
-Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return __importDefault(Author_1).default; } });
+Object.defineProperty(exports, "Author", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Author_1).default; } });
 var RouterLink_1 = require("./RouterLink/RouterLink");
-Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
+Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(RouterLink_1).default; } });
 var HTML_1 = require("./HTML/HTML");
-Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(HTML_1).default; } });
 var Header_1 = require("./navigation/components/Header/Header");
-Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Header_1).default; } });
+exports.Navigation = (0, tslib_1.__importStar)(require("./navigation/components/index"));

package/build/cjs/components/navigation/components/Header/Header.css

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
-  box-shadow: inset 0px -1px 0px var(--yc-color-line-generic);
+  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
 .header__wrapper {
   display: flex;

package/build/cjs/components/navigation/components/Header/Header.js

@@ -13,6 +13,13 @@ const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem
 const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
 const icons_1 = require("../../../../icons");
 const b = (0, bem_cn_lite_1.default)('header');
+const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
+    const iconProps = { icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: 36 };
+    return (react_1.default.createElement(Control_1.default, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
+            e.stopPropagation();
+            onSidebarOpenedChange(!isSidebarOpened);
+        }, size: "l" }, iconProps)));
+};
 const Header = ({ data, logo }) => {
     const { leftItems, rightItems } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
@@ -26,32 +33,19 @@ const Header = ({ data, logo }) => {
     const hideSidebar = (0, react_1.useCallback)(() => {
         setIsSidebarOpened(false);
     }, []);
-    const renderLogo = (react_1.default.createElement("div", { className: b('left') },
-        react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') }))));
-    const renderLeft = (react_1.default.createElement("div", { className: b('navigation-container') },
-        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })));
-    const renderMobileMenuButton = () => {
-        const iconProps = { icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: 36 };
-        return (react_1.default.createElement(Control_1.default, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
-                e.stopPropagation();
-                onSidebarOpenedChange(!isSidebarOpened);
-            }, size: "l" }, iconProps)));
-    };
-    const renderRightItems = (react_1.default.createElement("div", { className: b('buttons') }, rightItems &&
-        rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button, className: b('button') })))));
-    const renderRight = (react_1.default.createElement("div", { className: b('right') },
-        renderMobileMenuButton(),
-        rightItems && renderRightItems));
-    const renderMobileNavigation = (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
-        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })));
     return (react_1.default.createElement(grid_1.Grid, { className: b() },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement("header", { className: b('wrapper') },
-                    logo && renderLogo,
-                    leftItems && renderLeft,
-                    renderRight,
-                    renderMobileNavigation)))));
+                    logo && (react_1.default.createElement("div", { className: b('left') },
+                        react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') })))),
+                    react_1.default.createElement("div", { className: b('navigation-container') },
+                        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })),
+                    react_1.default.createElement("div", { className: b('right') },
+                        react_1.default.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                        rightItems && (react_1.default.createElement("div", { className: b('buttons') }, rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button, className: b('button') })))))),
+                    react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
+                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };
 exports.Header = Header;
 exports.default = exports.Header;

package/build/cjs/components/navigation/components/MobileNavigation/MobileNavigation.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const Foldable_1 = (0, tslib_1.__importDefault)(require("../../../Foldable/Foldable"));
 const uikit_1 = require("@gravity-ui/uikit");
+const Foldable_1 = (0, tslib_1.__importDefault)(require("../../../Foldable/Foldable"));
 const navigation_1 = require("../../../../models/navigation");
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
 const b = (0, bem_cn_lite_1.default)('mobile-navigation');

package/build/cjs/components/navigation/components/Navigation/Navigation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+import React, { MouseEventHandler } from 'react';
+import { NavigationDropdownItem, NavigationItem as NavigationItemModel } from '../../../../models/navigation';
 export interface NavigationProps {
     links: NavigationItemModel[];
     activeItemIndex: number;
@@ -7,5 +7,12 @@ export interface NavigationProps {
     className?: string;
     highlightActiveItem?: boolean;
 }
+export interface NavigationDropdownProps {
+    data: NavigationDropdownItem;
+    onClick: MouseEventHandler;
+    isActive: boolean;
+    position: number;
+    hidePopup: () => void;
+}
 declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;

package/build/cjs/components/navigation/components/Navigation/Navigation.js

@@ -9,9 +9,17 @@ const navigation_1 = require("../../../../models/navigation");
 const NavigationPopup_1 = (0, tslib_1.__importDefault)(require("../NavigationPopup/NavigationPopup"));
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
 const locationContext_1 = require("../../../../context/locationContext");
+const breakpointContext_1 = require("../../../../context/breakpointContext");
 const b = (0, bem_cn_lite_1.default)('navigation');
+const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+    const { text, items } = data, popupProps = (0, tslib_1.__rest)(data, ["text", "items"]);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(NavigationItem_1.default, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: navigation_1.NavigationItemType.Dropdown } }),
+        isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+};
 const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
     const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const breakpoint = (0, react_1.useContext)(breakpointContext_1.BreakpointContext);
     const itemRefs = (0, react_1.useRef)([]);
     const [itemPositions, setItemPosition] = (0, react_1.useState)([]);
     const [lastLeftScroll, setLastLeftScroll] = (0, react_1.useState)(0);
@@ -22,22 +30,6 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
         e.stopPropagation();
         onActiveItemChange(index === activeItemIndex ? -1 : index);
     }, [activeItemIndex, onActiveItemChange]);
-    const renderNavDropdown = (data, onClick, isActive, position) => {
-        const { text, items } = data, popupProps = (0, tslib_1.__rest)(data, ["text", "items"]);
-        return (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(NavigationItem_1.default, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: navigation_1.NavigationItemType.Dropdown } }),
-            isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
-    };
-    const slider = (react_1.default.createElement("div", { className: b('slider-container') },
-        react_1.default.createElement("div", { className: b('slider') })));
-    const content = (react_1.default.createElement("nav", null,
-        react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => {
-            const isActive = index === activeItemIndex;
-            const onClick = getItemClickHandler(index);
-            return (react_1.default.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
-                link.type === navigation_1.NavigationItemType.Dropdown ? (renderNavDropdown(link, onClick, isActive, itemPositions[index])) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onClick })),
-                highlightActiveItem && isActive && slider));
-        }))));
     const calculateItemPositions = (0, react_1.useCallback)(() => {
         if (itemRefs.current.length) {
             const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
@@ -64,7 +56,16 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     (0, react_1.useEffect)(() => {
         hidePopup();
-    }, [hidePopup, asPath, pathname]);
-    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions }, content));
+    }, [hidePopup, asPath, pathname, breakpoint]);
+    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
+        react_1.default.createElement("nav", null,
+            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => {
+                const isActive = index === activeItemIndex;
+                const onClick = getItemClickHandler(index);
+                return (react_1.default.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
+                    link.type === navigation_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdown, { data: link, onClick: onClick, isActive: isActive, position: itemPositions[index], hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onClick })),
+                    highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
+                        react_1.default.createElement("div", { className: b('slider') })))));
+            })))));
 };
 exports.default = Navigation;

package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup.js

@@ -37,10 +37,9 @@ const NavigationPopup = ({ items, left, onClose }) => {
     if (!document || !document.body) {
         return null;
     }
-    const renderDefaultPopup = (react_1.default.createElement(react_1.Fragment, null, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
     return (react_1.default.createElement(uikit_1.Portal, null,
         react_1.default.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
-            react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));
+            react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))))));
 };
 exports.NavigationPopup = NavigationPopup;
 exports.default = exports.NavigationPopup;

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

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

package/build/cjs/components/navigation/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialIcon = exports.NavigationPopup = exports.Navigation = exports.MobileNavigation = exports.Logo = exports.NavigationItem = exports.Header = void 0;
+var Header_1 = require("./Header/Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });
+var NavigationItem_1 = require("./NavigationItem/NavigationItem");
+Object.defineProperty(exports, "NavigationItem", { enumerable: true, get: function () { return __importDefault(NavigationItem_1).default; } });
+var Logo_1 = require("./Logo/Logo");
+Object.defineProperty(exports, "Logo", { enumerable: true, get: function () { return __importDefault(Logo_1).default; } });
+var MobileNavigation_1 = require("./MobileNavigation/MobileNavigation");
+Object.defineProperty(exports, "MobileNavigation", { enumerable: true, get: function () { return __importDefault(MobileNavigation_1).default; } });
+var Navigation_1 = require("./Navigation/Navigation");
+Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return __importDefault(Navigation_1).default; } });
+var NavigationPopup_1 = require("./NavigationPopup/NavigationPopup");
+Object.defineProperty(exports, "NavigationPopup", { enumerable: true, get: function () { return __importDefault(NavigationPopup_1).default; } });
+var SocialIcon_1 = require("./SocialIcon/SocialIcon");
+Object.defineProperty(exports, "SocialIcon", { enumerable: true, get: function () { return __importDefault(SocialIcon_1).default; } });

package/build/cjs/components/navigation/containers/Layout/Layout.css

@@ -0,0 +1,10 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.layout__content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}

package/build/cjs/components/navigation/containers/Layout/Layout.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NavigationData } from '../../../../models';
+export interface LayoutProps {
+    navigation?: NavigationData;
+}
+declare const Layout: React.FC<LayoutProps>;
+export default Layout;

package/build/cjs/components/navigation/containers/Layout/Layout.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const Header_1 = (0, tslib_1.__importDefault)(require("../../components/Header/Header"));
+const b = (0, bem_cn_lite_1.default)('layout');
+const Layout = ({ children, navigation }) => (react_1.default.createElement("div", { className: b() },
+    navigation && react_1.default.createElement(Header_1.default, { data: navigation.header, logo: navigation.logo }),
+    react_1.default.createElement("main", { className: b('content') }, children)));
+exports.default = Layout;

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

@@ -1,15 +1,14 @@
 import React from 'react';
-import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
-import { blockMap, subBlockMap } from '../../constructor-items';
-import { NavigationData } from '../../models/navigation';
 import '@doc-tools/transform/dist/js/yfm';
+import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems, NavigationData } from '../../models';
+import { blockMap, subBlockMap } from '../../constructor-items';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {
     content?: PageContent;
     shouldRenderBlock?: ShouldRenderBlock;
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
-    navigationData?: NavigationData;
+    navigation?: NavigationData;
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageConstructor = exports.Constructor = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
+require("@doc-tools/transform/dist/js/yfm");
 const models_1 = require("../../models");
 const constructor_items_1 = require("../../constructor-items");
 const grid_1 = require("../../grid");
@@ -15,8 +16,7 @@ const ConstructorRow_1 = require("./components/ConstructorRow");
 const ConstructorFootnotes_1 = require("./components/ConstructorFootnotes");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
-const Header_1 = (0, tslib_1.__importDefault)(require("../../components/navigation/components/Header/Header"));
-require("@doc-tools/transform/dist/js/yfm");
+const Layout_1 = (0, tslib_1.__importDefault)(require("../../components/navigation/containers/Layout/Layout"));
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
     const { context, headerBlockTypes } = (0, react_1.useMemo)(() => {
@@ -31,7 +31,7 @@ const Constructor = (props) => {
         });
     }, [props.custom]);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigationData, } = props;
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, } = props;
     const hasFootnotes = footnotes.length > 0;
     const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
@@ -41,14 +41,14 @@ const Constructor = (props) => {
         react_1.default.createElement("div", { className: b() },
             react_1.default.createElement("div", { className: b('wrapper') },
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
-                (navigationData === null || navigationData === void 0 ? void 0 : navigationData.header) && (react_1.default.createElement(Header_1.default, { logo: navigationData === null || navigationData === void 0 ? void 0 : navigationData.logo, data: navigationData === null || navigationData === void 0 ? void 0 : navigationData.header })),
-                renderMenu && renderMenu(),
-                header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
-                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, shouldRenderBlock: shouldRenderBlock }))),
-                    hasFootnotes && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
-                        react_1.default.createElement(ConstructorFootnotes_1.ConstructorFootnotes, { items: footnotes }))))))));
+                react_1.default.createElement(Layout_1.default, { navigation: navigation },
+                    renderMenu && renderMenu(),
+                    header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
+                    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, shouldRenderBlock: shouldRenderBlock }))),
+                        hasFootnotes && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
+                            react_1.default.createElement(ConstructorFootnotes_1.ConstructorFootnotes, { items: footnotes })))))))));
 };
 exports.Constructor = Constructor;
 const PageConstructor = (props) => {

package/build/cjs/models/navigation.d.ts

@@ -31,9 +31,10 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
+export interface NavigationLogo {
     icon: ImageProps;
     text?: string;
+    url?: string;
 }
 export interface HeaderData {
     leftItems: NavigationItem[];

package/build/esm/components/OverflowScroller/OverflowScroller.css

@@ -9,10 +9,12 @@
 .pc-overflow-scroller__scroller {
   position: absolute;
   z-index: 10;
+  top: 0;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 32px;
+  height: calc(100% - 1px);
   cursor: pointer;
   color: var(--yc-color-text-secondary);
   background: linear-gradient(to left, var(--yc-color-base-background) 70%, var(--pc-transparent) 100%) no-repeat;

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

@@ -1,7 +1,7 @@
 import { WithChildren } from '../../models';
 export interface RouterLinkProps {
     href: string;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 declare const RouterLink: ({ href, children }: WithChildren<RouterLinkProps>) => JSX.Element;
 export default RouterLink;

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

@@ -34,4 +34,5 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as Header } from './navigation/components/Header/Header';
+export * as Navigation from './navigation/components/index';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/esm/components/index.js

@@ -34,3 +34,4 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as Header } from './navigation/components/Header/Header';
+export * as Navigation from './navigation/components/index';

package/build/esm/components/navigation/components/Header/Header.css

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
-  box-shadow: inset 0px -1px 0px var(--yc-color-line-generic);
+  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
 .header__wrapper {
   display: flex;

package/build/esm/components/navigation/components/Header/Header.js

@@ -10,6 +10,13 @@ import Logo from '../Logo/Logo';
 import { NavigationClose, NavigationOpen } from '../../../../icons';
 import './Header.css';
 const b = block('header');
+const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
+    const iconProps = { icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36 };
+    return (React.createElement(Control, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
+            e.stopPropagation();
+            onSidebarOpenedChange(!isSidebarOpened);
+        }, size: "l" }, iconProps)));
+};
 export const Header = ({ data, logo }) => {
     const { leftItems, rightItems } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
@@ -23,31 +30,18 @@ export const Header = ({ data, logo }) => {
     const hideSidebar = useCallback(() => {
         setIsSidebarOpened(false);
     }, []);
-    const renderLogo = (React.createElement("div", { className: b('left') },
-        React.createElement(Logo, Object.assign({}, logo, { className: b('logo') }))));
-    const renderLeft = (React.createElement("div", { className: b('navigation-container') },
-        React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })));
-    const renderMobileMenuButton = () => {
-        const iconProps = { icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36 };
-        return (React.createElement(Control, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
-                e.stopPropagation();
-                onSidebarOpenedChange(!isSidebarOpened);
-            }, size: "l" }, iconProps)));
-    };
-    const renderRightItems = (React.createElement("div", { className: b('buttons') }, rightItems &&
-        rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') })))));
-    const renderRight = (React.createElement("div", { className: b('right') },
-        renderMobileMenuButton(),
-        rightItems && renderRightItems));
-    const renderMobileNavigation = (React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
-        React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })));
     return (React.createElement(Grid, { className: b() },
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("header", { className: b('wrapper') },
-                    logo && renderLogo,
-                    leftItems && renderLeft,
-                    renderRight,
-                    renderMobileNavigation)))));
+                    logo && (React.createElement("div", { className: b('left') },
+                        React.createElement(Logo, Object.assign({}, logo, { className: b('logo') })))),
+                    React.createElement("div", { className: b('navigation-container') },
+                        React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })),
+                    React.createElement("div", { className: b('right') },
+                        React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                        rightItems && (React.createElement("div", { className: b('buttons') }, rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') })))))),
+                    React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
+                        React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };
 export default Header;

package/build/esm/components/navigation/components/MobileNavigation/MobileNavigation.js

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 import React, { useRef, useCallback } from 'react';
-import Foldable from '../../../Foldable/Foldable';
 import { Popup, Portal } from '@gravity-ui/uikit';
+import Foldable from '../../../Foldable/Foldable';
 import { NavigationItemType, } from '../../../../models/navigation';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './MobileNavigation.css';

package/build/esm/components/navigation/components/Navigation/Navigation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+import React, { MouseEventHandler } from 'react';
+import { NavigationDropdownItem, NavigationItem as NavigationItemModel } from '../../../../models/navigation';
 import './Navigation.css';
 export interface NavigationProps {
     links: NavigationItemModel[];
@@ -8,5 +8,12 @@ export interface NavigationProps {
     className?: string;
     highlightActiveItem?: boolean;
 }
+export interface NavigationDropdownProps {
+    data: NavigationDropdownItem;
+    onClick: MouseEventHandler;
+    isActive: boolean;
+    position: number;
+    hidePopup: () => void;
+}
 declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;

package/build/esm/components/navigation/components/Navigation/Navigation.js

@@ -7,10 +7,18 @@ import { NavigationItemType, } from '../../../../models/navigation';
 import NavigationPopup from '../NavigationPopup/NavigationPopup';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import { LocationContext } from '../../../../context/locationContext';
+import { BreakpointContext } from '../../../../context/breakpointContext';
 import './Navigation.css';
 const b = block('navigation');
+const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+    const { text, items } = data, popupProps = __rest(data, ["text", "items"]);
+    return (React.createElement(Fragment, null,
+        React.createElement(NavigationItem, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown } }),
+        isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+};
 const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
     const { asPath, pathname } = useContext(LocationContext);
+    const breakpoint = useContext(BreakpointContext);
     const itemRefs = useRef([]);
     const [itemPositions, setItemPosition] = useState([]);
     const [lastLeftScroll, setLastLeftScroll] = useState(0);
@@ -21,22 +29,6 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
         e.stopPropagation();
         onActiveItemChange(index === activeItemIndex ? -1 : index);
     }, [activeItemIndex, onActiveItemChange]);
-    const renderNavDropdown = (data, onClick, isActive, position) => {
-        const { text, items } = data, popupProps = __rest(data, ["text", "items"]);
-        return (React.createElement(Fragment, null,
-            React.createElement(NavigationItem, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown } }),
-            isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
-    };
-    const slider = (React.createElement("div", { className: b('slider-container') },
-        React.createElement("div", { className: b('slider') })));
-    const content = (React.createElement("nav", null,
-        React.createElement("ul", { className: b('links') }, links.map((link, index) => {
-            const isActive = index === activeItemIndex;
-            const onClick = getItemClickHandler(index);
-            return (React.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
-                link.type === NavigationItemType.Dropdown ? (renderNavDropdown(link, onClick, isActive, itemPositions[index])) : (React.createElement(NavigationItem, { data: link, onClick: onClick })),
-                highlightActiveItem && isActive && slider));
-        }))));
     const calculateItemPositions = useCallback(() => {
         if (itemRefs.current.length) {
             const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
@@ -63,7 +55,16 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     useEffect(() => {
         hidePopup();
-    }, [hidePopup, asPath, pathname]);
-    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions }, content));
+    }, [hidePopup, asPath, pathname, breakpoint]);
+    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
+        React.createElement("nav", null,
+            React.createElement("ul", { className: b('links') }, links.map((link, index) => {
+                const isActive = index === activeItemIndex;
+                const onClick = getItemClickHandler(index);
+                return (React.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
+                    link.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdown, { data: link, onClick: onClick, isActive: isActive, position: itemPositions[index], hidePopup: hidePopup })) : (React.createElement(NavigationItem, { data: link, onClick: onClick })),
+                    highlightActiveItem && isActive && (React.createElement("div", { className: b('slider-container') },
+                        React.createElement("div", { className: b('slider') })))));
+            })))));
 };
 export default Navigation;

package/build/esm/components/navigation/components/NavigationPopup/NavigationPopup.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import block from 'bem-cn-lite';
-import React, { Fragment, useRef, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Portal } from '@gravity-ui/uikit';
 import { OutsideClick } from '../../../index';
 import NavigationItem from '../NavigationItem/NavigationItem';
@@ -34,9 +34,8 @@ export const NavigationPopup = ({ items, left, onClose }) => {
     if (!document || !document.body) {
         return null;
     }
-    const renderDefaultPopup = (React.createElement(Fragment, null, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
     return (React.createElement(Portal, null,
         React.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
-            React.createElement(OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));
+            React.createElement(OutsideClick, { onOutsideClick: onClose }, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))))));
 };
 export default NavigationPopup;

package/build/esm/components/navigation/components/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

package/build/esm/components/navigation/components/index.js

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

package/build/esm/components/navigation/containers/Layout/Layout.css

@@ -0,0 +1,10 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.layout__content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}

package/build/esm/components/navigation/containers/Layout/Layout.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationData } from '../../../../models';
+import './Layout.css';
+export interface LayoutProps {
+    navigation?: NavigationData;
+}
+declare const Layout: React.FC<LayoutProps>;
+export default Layout;

package/build/esm/components/navigation/containers/Layout/Layout.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import Header from '../../components/Header/Header';
+import './Layout.css';
+const b = block('layout');
+const Layout = ({ children, navigation }) => (React.createElement("div", { className: b() },
+    navigation && React.createElement(Header, { data: navigation.header, logo: navigation.logo }),
+    React.createElement("main", { className: b('content') }, children)));
+export default Layout;

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
-import { blockMap, subBlockMap } from '../../constructor-items';
-import { NavigationData } from '../../models/navigation';
 import '@doc-tools/transform/dist/js/yfm';
+import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems, NavigationData } from '../../models';
+import { blockMap, subBlockMap } from '../../constructor-items';
 import './PageConstructor.css';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {
@@ -10,7 +9,7 @@ export interface PageConstructorProps {
     shouldRenderBlock?: ShouldRenderBlock;
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
-    navigationData?: NavigationData;
+    navigation?: NavigationData;
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import React, { useContext, useMemo } from 'react';
+import '@doc-tools/transform/dist/js/yfm';
 import { HeaderBlockTypes, BlockTypes, } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
 import { Grid } from '../../grid';
@@ -12,8 +13,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import { ConstructorFootnotes } from './components/ConstructorFootnotes';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
-import Header from '../../components/navigation/components/Header/Header';
-import '@doc-tools/transform/dist/js/yfm';
+import Layout from '../../components/navigation/containers/Layout/Layout';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
@@ -29,7 +29,7 @@ export const Constructor = (props) => {
         });
     }, [props.custom]);
     const { themeValue: theme } = useContext(ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigationData, } = props;
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, } = props;
     const hasFootnotes = footnotes.length > 0;
     const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
@@ -39,14 +39,14 @@ export const Constructor = (props) => {
         React.createElement("div", { className: b() },
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
-                (navigationData === null || navigationData === void 0 ? void 0 : navigationData.header) && (React.createElement(Header, { logo: navigationData === null || navigationData === void 0 ? void 0 : navigationData.logo, data: navigationData === null || navigationData === void 0 ? void 0 : navigationData.header })),
-                renderMenu && renderMenu(),
-                header && React.createElement(ConstructorHeader, { data: header }),
-                React.createElement(Grid, null,
-                    restBlocks && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
-                    hasFootnotes && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorFootnotes, { items: footnotes }))))))));
+                React.createElement(Layout, { navigation: navigation },
+                    renderMenu && renderMenu(),
+                    header && React.createElement(ConstructorHeader, { data: header }),
+                    React.createElement(Grid, null,
+                        restBlocks && (React.createElement(ConstructorRow, null,
+                            React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
+                        hasFootnotes && (React.createElement(ConstructorRow, null,
+                            React.createElement(ConstructorFootnotes, { items: footnotes })))))))));
 };
 export const PageConstructor = (props) => {
     const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);

package/build/esm/models/navigation.d.ts

@@ -31,9 +31,10 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
+export interface NavigationLogo {
     icon: ImageProps;
     text?: string;
+    url?: string;
 }
 export interface HeaderData {
     leftItems: NavigationItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.7.0-alpha.6",
+  "version": "1.7.0-alpha.8",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -121,8 +121,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

package/server/models/navigation.d.ts

@@ -31,9 +31,10 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
+export interface NavigationLogo {
     icon: ImageProps;
     text?: string;
+    url?: string;
 }
 export interface HeaderData {
     leftItems: NavigationItem[];