@gravity-ui/page-constructor 1.6.1 → 1.7.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.7.0](https://github.com/gravity-ui/page-constructor/compare/v1.6.1...v1.7.0) (2022-11-10)
+
+
+### Features
+
+* **ExtendedFeatures:** add content ([#51](https://github.com/gravity-ui/page-constructor/issues/51)) ([0990563](https://github.com/gravity-ui/page-constructor/commit/0990563a62c3f8f4d4cfb206cedb7a1205cb1797))
+
 ## [1.6.1](https://github.com/gravity-ui/page-constructor/compare/v1.4.1...v1.6.1) (2022-11-10)
 
 ### Bug Fixes

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.css

@@ -12,6 +12,8 @@ unpredictable css rules order in build */
 }
 .pc-ExtendedFeaturesBlock__item {
   margin-top: 32px;
+}
+.pc-ExtendedFeaturesBlock__item.col {
   padding-right: 32px;
 }
 .pc-ExtendedFeaturesBlock__item-title {
@@ -74,12 +76,15 @@ unpredictable css rules order in build */
   height: 32px;
   background-size: cover;
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 @media (max-width: 577px) {
   .pc-ExtendedFeaturesBlock__item {
     margin-top: 32px;
   }
+  .pc-ExtendedFeaturesBlock__item.col {
+    padding-right: 8px;
+  }
 }
 @media (min-width: 769px) {
   .pc-ExtendedFeaturesBlock.pc-AnimateBlock .pc-ExtendedFeaturesBlock__item, .pc-AnimateBlock .pc-ExtendedFeaturesBlock .pc-ExtendedFeaturesBlock__item {

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -2,26 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExtendedFeaturesBlock = void 0;
 const tslib_1 = require("tslib");
-const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const react_1 = (0, tslib_1.__importStar)(require("react"));
 const utils_1 = require("../../utils");
 const grid_1 = require("../../grid");
 const components_1 = require("../../components/");
+const sub_blocks_1 = require("../../sub-blocks");
+const Image_1 = (0, tslib_1.__importDefault)(require("../../components/Image/Image"));
+const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const utils_2 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('ExtendedFeaturesBlock');
 const DEFAULT_SIZES = {
     all: 12,
     sm: 6,
     md: 4,
 };
-const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
-    react_1.default.createElement(components_1.BlockHeader, { title: title, description: description, className: b('header') }),
-    react_1.default.createElement("div", { className: b('items') },
-        react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, link, label, icon }) => (react_1.default.createElement(grid_1.Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
-            icon && react_1.default.createElement("img", { src: icon, className: b('icon') }),
-            itemTitle && (react_1.default.createElement("h5", { className: b('item-title', { 'has-label': Boolean(label) }) },
-                react_1.default.createElement(components_1.HTML, null, itemTitle),
-                label && react_1.default.createElement("div", { className: b('item-label') }, label))),
-            text && (react_1.default.createElement("div", { className: b('item-text') },
-                react_1.default.createElement(components_1.HTML, null, text))),
-            link && react_1.default.createElement(components_1.Link, Object.assign({ className: b('item-link') }, link)))))))));
+const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_SIZES, animated, }) => {
+    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
+        react_1.default.createElement(components_1.BlockHeader, { title: title, description: description, className: b('header') }),
+        react_1.default.createElement("div", { className: b('items') },
+            react_1.default.createElement(grid_1.Row, null, items.map(({ title: itemTitle, text, link, links, label, icon }) => {
+                const itemLinks = links || [];
+                const iconThemed = icon && (0, utils_1.getThemedValue)(icon, theme);
+                const iconData = iconThemed && (0, utils_2.getMediaImage)(iconThemed);
+                if (link) {
+                    itemLinks.push(link);
+                }
+                return (react_1.default.createElement(grid_1.Col, { className: b('item'), key: text || itemTitle, sizes: colSizes },
+                    iconData && react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon') })),
+                    react_1.default.createElement("div", { className: b('container') },
+                        itemTitle && (react_1.default.createElement("h5", { className: b('item-title') },
+                            react_1.default.createElement(components_1.HTML, null, itemTitle),
+                            label && (react_1.default.createElement("div", { className: b('item-label') }, label)))),
+                        react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 } }))));
+            })))));
+};
 exports.ExtendedFeaturesBlock = ExtendedFeaturesBlock;
 exports.default = exports.ExtendedFeaturesBlock;

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

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

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

@@ -33,4 +33,5 @@ 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 type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ 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.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;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -74,3 +74,5 @@ var RouterLink_1 = require("./RouterLink/RouterLink");
 Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
 var HTML_1 = require("./HTML/HTML");
 Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+var Header_1 = require("./navigation/components/Header/Header");
+Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return __importDefault(Header_1).default; } });

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 */
+.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 0px -1px 0px var(--yc-color-line-generic);
+}
+.header__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--header-height);
+}
+@media (min-width: 769px) {
+  .header__mobile-menu-button {
+    display: none;
+  }
+}
+.header__navigation, .header__left, .header__right {
+  display: flex;
+  align-items: center;
+}
+.header__navigation {
+  position: relative;
+  flex: 1 0 0;
+  justify-content: flex-start;
+  margin-right: 20px;
+}
+@media (max-width: 768px) {
+  .header__navigation {
+    display: none;
+  }
+}
+.header__right {
+  flex: 0;
+  justify-content: flex-end;
+}
+.header__navigation-container {
+  display: flex;
+  overflow-x: hidden;
+  flex: 1 0 0;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 20px;
+}
+.header__buttons {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .header__buttons {
+    display: none;
+  }
+}
+.header__buttons > *:not(:last-child) {
+  margin-right: 16px;
+}
+.header__button {
+  margin-top: 0;
+}
+.header__logo {
+  margin: 0 32px 0 0;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .header__navigation-container {
+    justify-content: flex-end;
+  }
+  .header__left {
+    flex: 1 0 0;
+  }
+}
+@media (max-width: 576px) {
+  .header__navigation-container {
+    margin-right: 12px;
+  }
+  .header__logo {
+    margin-right: 0;
+  }
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { HeaderData, NavigationLogo } from '../../../../models/navigation';
+export interface HeaderProps {
+    logo: NavigationLogo;
+    data: HeaderData;
+}
+interface HeaderState {
+    isSidebarOpened: boolean;
+    activeItemIndex: number;
+}
+declare class Header extends React.Component<HeaderProps, HeaderState> {
+    ref: React.RefObject<unknown>;
+    state: {
+        isSidebarOpened: boolean;
+        activeItemIndex: number;
+    };
+    render(): JSX.Element;
+    private renderLeft;
+    private renderLogo;
+    private renderRight;
+    private renderRightItems;
+    private renderMobileMenuButton;
+    private renderMobileNavigation;
+    private onActiveItemChange;
+    private onSidebarOpenedChange;
+    private hideSidebar;
+}
+export default Header;

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+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 Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
+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 icons_1 = require("../../../../icons");
+const b = (0, bem_cn_lite_1.default)('header');
+class Header extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = (0, react_1.createRef)();
+        this.state = {
+            isSidebarOpened: false,
+            activeItemIndex: -1,
+        };
+        this.onActiveItemChange = (index) => {
+            this.setState({ activeItemIndex: index });
+        };
+        this.onSidebarOpenedChange = (isSidebarOpened) => {
+            this.setState({ isSidebarOpened });
+        };
+        this.hideSidebar = () => {
+            this.setState({ isSidebarOpened: false });
+        };
+    }
+    render() {
+        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') },
+                        this.renderLogo(),
+                        this.renderLeft(),
+                        this.renderRight(),
+                        this.renderMobileNavigation())))));
+    }
+    renderLeft() {
+        const { activeItemIndex } = this.state;
+        const { leftItems } = this.props.data;
+        return (leftItems && (react_1.default.createElement("div", { className: b('navigation-container') },
+            react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange }))));
+    }
+    renderLogo() {
+        const { logo } = this.props;
+        if (!logo) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: b('left') },
+            react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') }))));
+    }
+    renderRight() {
+        return (react_1.default.createElement("div", { className: b('right') },
+            this.renderMobileMenuButton(),
+            this.renderRightItems()));
+    }
+    renderRightItems() {
+        const { rightItems } = this.props.data;
+        return (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') }))))));
+    }
+    renderMobileMenuButton() {
+        const { isSidebarOpened } = this.state;
+        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();
+                this.onSidebarOpenedChange(!isSidebarOpened);
+            }, size: "l" }, iconProps)));
+    }
+    renderMobileNavigation() {
+        const { leftItems, rightItems } = this.props.data;
+        const { isSidebarOpened, activeItemIndex } = this.state;
+        return (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => this.onSidebarOpenedChange(false) },
+            react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange, onClose: this.hideSidebar })));
+    }
+}
+exports.default = Header;

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

@@ -0,0 +1,18 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.logo {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: var(--yc-text-header-2-font-size);
+  line-height: var(--yc-text-header-2-line-height);
+}
+.logo__icon {
+  width: 178px;
+  height: 36px;
+  margin-right: 8px;
+  object-fit: contain;
+}
+.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/navigation';
+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,13 @@
+"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 index_1 = require("../../../index");
+const RouterLink_1 = (0, tslib_1.__importDefault)(require("../../../RouterLink/RouterLink"));
+const b = (0, bem_cn_lite_1.default)('logo');
+const Logo = ({ icon, text, className }) => (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
+    react_1.default.createElement("div", { className: b(null, className) },
+        icon && react_1.default.createElement(index_1.Image, { className: b('icon'), src: icon }),
+        react_1.default.createElement("span", { className: b('text') }, text))));
+exports.default = Logo;

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

@@ -0,0 +1,58 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.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: 0px 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) {
+  .mobile-navigation {
+    display: none;
+  }
+}
+.mobile-navigation__wrapper {
+  padding: 32px 20px;
+}
+.mobile-navigation__button {
+  margin-top: 24px;
+}
+.mobile-navigation__links {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 24px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mobile-navigation__links-item:not(:last-child) {
+  margin-bottom: 24px;
+}
+.mobile-navigation__dropdown-item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.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) {
+  .mobile-navigation__popup {
+    display: none;
+  }
+}

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 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 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');
+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;

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

@@ -0,0 +1,43 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.navigation {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.navigation__links {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.navigation__links-item {
+  position: relative;
+  height: var(--header-height);
+  line-height: var(--header-height);
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.utilityfocus .navigation__links-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.navigation__links-item:hover, .navigation__links-item:active {
+  color: var(--yc-color-text-link);
+}
+.navigation__links-item:not(:last-child) {
+  margin-right: 20px;
+}
+.navigation__slider-container {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.navigation__slider {
+  width: 100%;
+  height: 2px;
+  background-color: var(--yc-color-text-link);
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+export interface NavigationProps {
+    links: NavigationItemModel[];
+    activeItemIndex: number;
+    onActiveItemChange: (index: number) => void;
+    className?: string;
+    highlightActiveItem?: boolean;
+}
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const react_1 = (0, tslib_1.__importStar)(require("react"));
+const OverflowScroller_1 = (0, tslib_1.__importDefault)(require("../../../OverflowScroller/OverflowScroller"));
+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 b = (0, bem_cn_lite_1.default)('navigation');
+const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
+    const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const itemRefs = (0, react_1.useRef)([]);
+    const [itemPositions, setItemPosition] = (0, react_1.useState)([]);
+    const [lastLeftScroll, setLastLeftScroll] = (0, react_1.useState)(0);
+    const hidePopup = (0, react_1.useCallback)(() => {
+        onActiveItemChange(-1);
+    }, [onActiveItemChange]);
+    const getItemClickHandler = (0, react_1.useCallback)((index) => (e) => {
+        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);
+            setItemPosition(currentItemPositions);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const debouncedCalculateItemPositions = lodash_1.default.debounce(calculateItemPositions, 100);
+        const calculateOnScroll = lodash_1.default.debounce(() => {
+            const curLeftScroll = window.pageXOffset;
+            if (curLeftScroll !== lastLeftScroll) {
+                setLastLeftScroll(window.pageXOffset);
+                calculateItemPositions();
+            }
+        }, 100);
+        calculateItemPositions();
+        setLastLeftScroll(window.pageXOffset);
+        window.addEventListener('resize', debouncedCalculateItemPositions);
+        window.addEventListener('scroll', calculateOnScroll);
+        return () => {
+            window.removeEventListener(`resize`, calculateItemPositions);
+            window.removeEventListener('scroll', calculateOnScroll);
+        };
+    }, [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));
+};
+exports.default = Navigation;

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

@@ -0,0 +1,40 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.navigation-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.navigation-item_type_link {
+  color: var(--yc-color-text-primary);
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+.utilityfocus .navigation-item_type_link:focus {
+  outline: 2px solid #ffdb4d;
+}
+.navigation-item_type_link:hover, .navigation-item_type_link_active {
+  color: var(--yc-color-text-link);
+}
+.navigation-item_type_button {
+  display: inline-block;
+}
+.navigation-item__arrow {
+  position: relative;
+  top: -2px;
+  width: 9px;
+  height: 9px;
+  margin-left: 5px;
+}
+.navigation-item__icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.navigation-item__dropdown {
+  margin-left: 7px;
+  color: var(--yc-color-text-secondary);
+}