@gravity-ui/page-constructor 1.8.0-alfa.1 → 1.8.0

package/build/cjs/blocks/Tabs/schema.d.ts

@@ -8,15 +8,12 @@ export declare const tabsItem: {
         };
         title: {
             type: string;
-            content: string;
         };
         text: {
             type: string;
-            content: string;
         };
         caption: {
             type: string;
-            content: string;
         };
         media: {
             oneOf: ({
@@ -110,7 +107,6 @@ export declare const tabsItem: {
                                     };
                                     text: {
                                         type: string;
-                                        content: string;
                                     };
                                 };
                             };
@@ -165,7 +161,6 @@ export declare const tabsItem: {
             properties: {
                 text: {
                     type: string;
-                    content: string;
                 };
                 url: {
                     type: string;
@@ -234,7 +229,6 @@ export declare const TabsBlock: {
                 properties: {
                     text: {
                         type: string;
-                        content: string;
                     };
                     textSize: {
                         type: string;
@@ -250,7 +244,6 @@ export declare const TabsBlock: {
             };
             description: {
                 type: string;
-                content: string;
             };
             items: {
                 type: string;
@@ -270,7 +263,6 @@ export declare const TabsBlock: {
                 properties: {
                     text: {
                         type: string;
-                        content: string;
                     };
                     url: {
                         type: string;

package/build/cjs/blocks/Tabs/schema.js

@@ -14,15 +14,12 @@ exports.tabsItem = {
         },
         title: {
             type: 'string',
-            content: 'yfm',
         },
         text: {
             type: 'string',
-            content: 'yfm',
         },
         caption: {
             type: 'string',
-            content: 'text',
         },
         media: (0, common_1.withTheme)({
             type: 'object',
@@ -40,7 +37,6 @@ exports.TabsBlock = {
         required: ['title', 'items'],
         properties: Object.assign(Object.assign({}, common_1.BlockBaseProps), { title: common_1.TitleProps, description: {
                 type: 'string',
-                content: 'text',
             }, items: (0, utils_1.filteredArray)(exports.tabsItem) }),
     },
 };

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

@@ -10,11 +10,9 @@ export declare const author: {
                 properties: {
                     firstName: {
                         type: string;
-                        content: string;
                     };
                     secondName: {
                         type: string;
-                        content: string;
                     };
                     avatar: {
                         type: string;
@@ -22,7 +20,6 @@ export declare const author: {
                     };
                     description: {
                         type: string;
-                        content: string;
                     };
                 };
             };

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

@@ -18,7 +18,6 @@ export declare const ImageDeviceProps: {
         };
         alt: {
             type: string;
-            content: string;
         };
         disableCompress: {
             type: string;
@@ -36,7 +35,6 @@ export declare const ImageObjectProps: {
         };
         alt: {
             type: string;
-            content: string;
         };
         disableCompress: {
             type: string;

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

@@ -19,7 +19,6 @@ exports.ImageDeviceProps = {
         },
         alt: {
             type: 'string',
-            content: 'text',
         },
         disableCompress: {
             type: 'boolean',
@@ -37,7 +36,6 @@ exports.ImageObjectProps = {
         },
         alt: {
             type: 'string',
-            content: 'text',
         },
         disableCompress: {
             type: 'boolean',

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

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

@@ -33,4 +33,6 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as 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,76 +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.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 (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

@@ -0,0 +1,85 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-header {
+  position: sticky;
+  z-index: 98;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--header-height);
+  background-color: var(--yc-color-base-background);
+  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
+}
+.pc-header__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--header-height);
+}
+@media (min-width: 769px) {
+  .pc-header__mobile-menu-button {
+    display: none;
+  }
+}
+.pc-header__navigation, .pc-header__left, .pc-header__right {
+  display: flex;
+  align-items: center;
+}
+.pc-header__navigation {
+  position: relative;
+  margin-right: 20px;
+  flex: 1 0 0;
+  justify-content: flex-start;
+}
+@media (max-width: 768px) {
+  .pc-header__navigation {
+    display: none;
+  }
+}
+.pc-header__right {
+  flex: 0;
+  justify-content: flex-end;
+}
+.pc-header__navigation-container {
+  display: flex;
+  overflow-x: hidden;
+  flex: 1 0 0;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 20px;
+}
+.pc-header__buttons {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .pc-header__buttons {
+    display: none;
+  }
+}
+.pc-header__buttons > *:not(:last-child) {
+  margin-right: 16px;
+}
+.pc-header__button {
+  margin-top: 0;
+}
+.pc-header__logo {
+  margin: 0 32px 0 0;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .pc-header__navigation-container {
+    justify-content: flex-end;
+  }
+  .pc-header__left {
+    flex: 1 0 0;
+  }
+}
+@media (max-width: 576px) {
+  .pc-header__navigation-container {
+    margin-right: 12px;
+  }
+  .pc-header__logo {
+    margin-right: 0;
+  }
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HeaderData, NavigationLogo } from '../../../../models';
+export interface HeaderProps {
+    logo: NavigationLogo;
+    data: HeaderData;
+}
+export declare const Header: React.FC<HeaderProps>;
+export default Header;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../../utils");
+const grid_1 = require("../../../../grid");
+const OutsideClick_1 = (0, tslib_1.__importDefault)(require("../../../OutsideClick/OutsideClick"));
+const Control_1 = (0, tslib_1.__importDefault)(require("../../../Control/Control"));
+const Navigation_1 = (0, tslib_1.__importDefault)(require("../Navigation/Navigation"));
+const MobileNavigation_1 = (0, tslib_1.__importDefault)(require("../MobileNavigation/MobileNavigation"));
+const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
+const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
+const icons_1 = require("../../../../icons");
+const b = (0, utils_1.block)('header');
+const ICON_SIZE = 36;
+const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
+    const iconProps = {
+        icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen,
+        iconSize: ICON_SIZE,
+    };
+    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);
+    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(-1);
+    const onActiveItemChange = (0, react_1.useCallback)((index) => {
+        setActiveItemIndex(index);
+    }, []);
+    const onSidebarOpenedChange = (0, react_1.useCallback)((isOpen) => {
+        setIsSidebarOpened(isOpen);
+    }, []);
+    const hideSidebar = (0, react_1.useCallback)(() => {
+        setIsSidebarOpened(false);
+    }, []);
+    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 && (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/Logo/Logo.css

@@ -0,0 +1,23 @@
+.pc-logo {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-logo {
+  display: flex;
+  align-items: center;
+  font-weight: var(--yc-text-accent-font-weight);
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+.pc-logo__icon {
+  display: flex;
+  margin-right: 8px;
+  object-fit: contain;
+}
+.pc-logo__text {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NavigationLogo } from '../../../../models';
+export interface LogoProps extends NavigationLogo {
+    className?: string;
+}
+declare const Logo: React.FC<LogoProps>;
+export default Logo;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../../../utils");
+const RouterLink_1 = (0, tslib_1.__importDefault)(require("../../../RouterLink/RouterLink"));
+const utils_2 = require("../../../Media/Image/utils");
+const index_1 = require("../../../index");
+const b = (0, utils_1.block)('logo');
+const Logo = ({ icon, text, className }) => {
+    const imageData = (0, utils_2.getMediaImage)(icon);
+    return (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
+        react_1.default.createElement("div", { className: b(null, className) },
+            imageData && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, imageData)),
+            react_1.default.createElement("span", { className: b('text') }, text))));
+};
+exports.default = Logo;

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

@@ -0,0 +1,64 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-mobile-navigation {
+  position: fixed;
+  z-index: 100;
+  top: var(--header-height);
+  left: 0;
+  width: 100%;
+  border-bottom-right-radius: var(--pc-border-radius);
+  border-bottom-left-radius: var(--pc-border-radius);
+  background-color: var(--yc-color-base-background);
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+@media (min-width: 769px) {
+  .pc-mobile-navigation {
+    display: none;
+  }
+}
+.pc-mobile-navigation__wrapper {
+  padding: 32px 48px;
+}
+.pc-mobile-navigation__button {
+  margin-top: 24px;
+}
+.pc-mobile-navigation__links {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 24px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pc-mobile-navigation__links-item:not(:last-child) {
+  margin-bottom: 24px;
+}
+.pc-mobile-navigation__dropdown-item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.pc-mobile-navigation__popup {
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  padding: 16px;
+  border: 1px solid var(--yc-color-line-generic);
+  border-top-width: 0;
+  border-radius: calc(var(--pc-border-radius) / 2);
+  background: var(--yc-color-base-float);
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+}
+@media (min-width: 769px) {
+  .pc-mobile-navigation__popup {
+    display: none;
+  }
+}
+@media (max-width: 576px) {
+  .pc-mobile-navigation__wrapper {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+export interface MobileNavigationProps {
+    className?: string;
+    isOpened?: boolean;
+    topItems?: NavigationItemModel[];
+    bottomItems?: NavigationItemModel[];
+    activeItemIndex: number;
+    onClose: () => void;
+    onActiveItemChange: (index: number) => void;
+}
+declare const MobileNavigation: React.FC<MobileNavigationProps>;
+export default MobileNavigation;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../utils");
+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, utils_1.block)('mobile-navigation');
+const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
+    const ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement("div", { ref: ref, className: b('dropdown') },
+        react_1.default.createElement(NavigationItem_1.default, { data: data, onClick: onToggle, isOpened: isOpened }),
+        isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, className: b('popup') }, data.items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, data: item, className: b('dropdown-item'), onClick: onItemClick })))))));
+};
+const MobileNavigationItem = ({ link, index, isActive, onActiveItemChange, onClose, }) => {
+    const toggleActive = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (onActiveItemChange) {
+            onActiveItemChange(isActive ? -1 : index);
+        }
+    }, [isActive, index, onActiveItemChange]);
+    const onItemClick = (0, react_1.useCallback)((e) => {
+        toggleActive(e);
+        onClose();
+    }, [toggleActive, onClose]);
+    return (react_1.default.createElement("li", { key: index, className: b('links-item') }, link.type === navigation_1.NavigationItemType.Dropdown ? (react_1.default.createElement(MobileNavigationDropdown, { data: link, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onItemClick }))));
+};
+const MobileNavigation = (props) => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    const { isOpened, topItems, bottomItems, activeItemIndex, onActiveItemChange, onClose } = props;
+    return (react_1.default.createElement(uikit_1.Portal, null,
+        react_1.default.createElement(Foldable_1.default, { key: topItems === null || topItems === void 0 ? void 0 : topItems.length, className: b(), isOpened: Boolean(isOpened) },
+            react_1.default.createElement("div", { className: b('wrapper') },
+                react_1.default.createElement("nav", null,
+                    react_1.default.createElement("ul", { className: b('links') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => {
+                        const isActive = index === activeItemIndex;
+                        return (react_1.default.createElement(MobileNavigationItem, { key: index, link: link, index: index, isActive: isOpened && isActive, onClose: onClose, onActiveItemChange: onActiveItemChange }));
+                    }))), bottomItems === null || bottomItems === void 0 ? void 0 :
+                bottomItems.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, data: item, className: b('button') })))))));
+};
+exports.default = MobileNavigation;