@gravity-ui/page-constructor 1.22.1 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.24.0](https://github.com/gravity-ui/page-constructor/compare/v1.23.0...v1.24.0) (2023-03-13)
+
+
+### Features
+
+* add dropdown item in right column of navigation ([#213](https://github.com/gravity-ui/page-constructor/issues/213)) ([71f23a8](https://github.com/gravity-ui/page-constructor/commit/71f23a8ff00948fa62b3bd5b7833b171b59176d6))
+
+## [1.23.0](https://github.com/gravity-ui/page-constructor/compare/v1.22.1...v1.23.0) (2023-03-09)
+
+
+### Features
+
+* add release flow to README.md ([#183](https://github.com/gravity-ui/page-constructor/issues/183)) ([c7d7923](https://github.com/gravity-ui/page-constructor/commit/c7d7923c034b88a8e8167023448d8a071926cc26))
+
 ## [1.22.1](https://github.com/gravity-ui/page-constructor/compare/v1.22.0...v1.22.1) (2023-03-07)
 
 

package/README.md

@@ -298,3 +298,21 @@ enum PredefinedEventTypes {
 npm ci
 npm run dev
 ```
+
+## Release flow
+
+In usual cases we use two types of commits:
+
+1. fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
+2. feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
+3. BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
+
+You can see all information [here](https://www.conventionalcommits.org/en/v1.0.0/).
+
+When you receive the approval of your pull-request from the code owners and pass all the checks, please do the following:
+
+1. You should check if there is a release pull-request from robot with changes from another contributor (it looks like `chore(main): release 0.0.0`). If it exists, you should check why it is not merged. If the contributor agrees to release a shared version, follow the next step. If not, ask him to release his version, then follow the next step.
+2. Squash and merge your PR (It is important to release a new version with Github-Actions)
+3. Wait until robot creates a PR with a new version of the package and information about your changes in CHANGELOG.md. You can see the process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
+4. Check your changes in CHANGELOG.md and approve robot's PR.
+5. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).

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

@@ -41,6 +41,8 @@ unpredictable css rules order in build */
 .pc-header__right {
   flex: 0;
   justify-content: flex-end;
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }
 .pc-header__navigation-container {
   display: flex;
@@ -53,6 +55,9 @@ unpredictable css rules order in build */
 .pc-header__buttons {
   display: flex;
   align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 @media (max-width: 768px) {
   .pc-header__buttons {
@@ -62,6 +67,24 @@ unpredictable css rules order in build */
 .pc-header__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
+.pc-header__buttons-item {
+  position: relative;
+  height: var(--header-height);
+  line-height: var(--header-height);
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.utilityfocus .pc-header__buttons-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-header__buttons-item:hover, .pc-header__buttons-item:active {
+  color: var(--yc-color-text-link);
+}
+.pc-header__buttons-item:not(:last-child) {
+  margin-right: 20px;
+}
 .pc-header__button {
   margin-top: 0;
 }

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

@@ -7,11 +7,12 @@ const utils_1 = require("../../../utils");
 const grid_1 = require("../../../grid");
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
 const Control_1 = tslib_1.__importDefault(require("../../../components/Control/Control"));
+const icons_1 = require("../../../icons");
+const constants_1 = require("../../constants");
 const Navigation_1 = tslib_1.__importDefault(require("../Navigation/Navigation"));
 const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation"));
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const Logo_1 = tslib_1.__importDefault(require("../Logo/Logo"));
-const icons_1 = require("../../../icons");
+const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
 const b = (0, utils_1.block)('header');
 const ICON_SIZE = 36;
 const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
@@ -27,10 +28,13 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
 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 [activeItemId, setactiveItemId] = (0, react_1.useState)(undefined);
+    const onActiveItemChange = (0, react_1.useCallback)((id) => {
+        setactiveItemId(id);
     }, []);
+    const hidePopup = (0, react_1.useCallback)(() => {
+        onActiveItemChange();
+    }, [onActiveItemChange]);
     const onSidebarOpenedChange = (0, react_1.useCallback)((isOpen) => {
         setIsSidebarOpened(isOpen);
     }, []);
@@ -44,12 +48,12 @@ const Header = ({ data, logo }) => {
                     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(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemId: activeItemId, 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 })))))),
+                        rightItems && (react_1.default.createElement("ul", { className: b('buttons') }, rightItems.map((button, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
                     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 })))))));
+                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };
 exports.Header = Header;
 exports.default = exports.Header;

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

@@ -24,7 +24,10 @@ unpredictable css rules order in build */
 .pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.pc-mobile-navigation__links {
+.pc-mobile-navigation__nav {
+  margin-bottom: 24px;
+}
+.pc-mobile-navigation__rows {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -33,7 +36,7 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.pc-mobile-navigation__links-item:not(:last-child) {
+.pc-mobile-navigation__rows-item:not(:last-child) {
   margin-bottom: 24px;
 }
 .pc-mobile-navigation__dropdown-item:not(:last-child) {

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

@@ -5,9 +5,9 @@ export interface MobileNavigationProps {
     isOpened?: boolean;
     topItems?: NavigationItemModel[];
     bottomItems?: NavigationItemModel[];
-    activeItemIndex: number;
+    activeItemId?: string;
     onClose: () => void;
-    onActiveItemChange: (index: number) => void;
+    onActiveItemChange: (id?: string) => void;
 }
 declare const MobileNavigation: React.FC<MobileNavigationProps>;
 export default MobileNavigation;

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

@@ -6,6 +6,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const Foldable_1 = tslib_1.__importDefault(require("../../../components/Foldable/Foldable"));
 const models_1 = require("../../../models");
+const constants_1 = require("../../constants");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const b = (0, utils_1.block)('mobile-navigation');
 const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
@@ -14,32 +15,31 @@ const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = fals
         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 MobileNavigationItem = ({ item, index, isOpened, activeItemId, onActiveItemChange, column, onClose, }) => {
+    const id = `${column}-${index}`;
+    const isActive = id === activeItemId && isOpened;
     const toggleActive = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (onActiveItemChange) {
-            onActiveItemChange(isActive ? -1 : index);
+            onActiveItemChange(isActive ? undefined : `${column}-${index}`);
         }
-    }, [isActive, index, onActiveItemChange]);
+    }, [onActiveItemChange, isActive, column, index]);
     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 === models_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 }))));
+    return (react_1.default.createElement("li", { key: index, className: b('rows-item') }, item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(MobileNavigationDropdown, { data: item, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (react_1.default.createElement(NavigationItem_1.default, { data: item, onClick: onItemClick }))));
 };
 const MobileNavigation = (props) => {
     if (typeof window === 'undefined') {
         return null;
     }
-    const { isOpened, topItems, bottomItems, activeItemIndex, onActiveItemChange, onClose } = props;
+    const { isOpened, topItems, bottomItems, activeItemId, 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') })))))));
+                react_1.default.createElement("nav", { className: b('nav') },
+                    react_1.default.createElement("ul", { className: b('rows') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => (react_1.default.createElement(MobileNavigationItem, { key: index, item: link, column: constants_1.ItemColumnName.Top, index: index, isOpened: isOpened, activeItemId: activeItemId, onClose: onClose, onActiveItemChange: onActiveItemChange }))))),
+                react_1.default.createElement("ul", { className: b('rows') }, bottomItems === null || bottomItems === void 0 ? void 0 : bottomItems.map((item, index) => (react_1.default.createElement(MobileNavigationItem, { key: index, item: item, column: constants_1.ItemColumnName.Bottom, index: index, isOpened: isOpened, activeItemId: activeItemId, onClose: onClose, onActiveItemChange: onActiveItemChange }))))))));
 };
 exports.default = MobileNavigation;

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

@@ -29,15 +29,4 @@ unpredictable css rules order in build */
 }
 .pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;
-}
-.pc-navigation__slider-container {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.pc-navigation__slider {
-  width: 100%;
-  height: 2px;
-  background-color: var(--yc-color-text-link);
 }

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

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

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

@@ -5,29 +5,18 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
 const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
-const navigation_1 = require("../../../models/navigation");
-const NavigationPopup_1 = tslib_1.__importDefault(require("../NavigationPopup/NavigationPopup"));
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const locationContext_1 = require("../../../context/locationContext");
+const constants_1 = require("../../constants");
+const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
 const b = (0, utils_1.block)('navigation');
-const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
-    const { text, items } = data, popupProps = 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 Navigation = ({ className, onActiveItemChange, links, activeItemId, 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();
     }, [onActiveItemChange]);
-    const getItemClickHandler = (0, react_1.useCallback)((index) => (e) => {
-        e.stopPropagation();
-        onActiveItemChange(index === activeItemIndex ? -1 : index);
-    }, [activeItemIndex, onActiveItemChange]);
     const calculateItemPositions = (0, react_1.useCallback)(() => {
         if (itemRefs.current.length) {
             const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
@@ -57,13 +46,6 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     }, [hidePopup, asPath, pathname]);
     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') })))));
-            })))));
+            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('links-item'), item: link, itemRefs: itemRefs, index: index, activeItemId: activeItemId, highlightActiveItem: highlightActiveItem, hidePopup: hidePopup, itemPositions: itemPositions, column: constants_1.ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
 };
 exports.default = Navigation;

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

@@ -0,0 +1,11 @@
+import React, { MouseEventHandler } from 'react';
+import { NavigationDropdownItem } from '../../../models';
+export interface NavigationDropdownProps {
+    data: NavigationDropdownItem;
+    onClick: MouseEventHandler;
+    isActive: boolean;
+    position: number;
+    hidePopup: () => void;
+}
+declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
+export default NavigationDropdown;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const models_1 = require("../../../models");
+const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const NavigationPopup_1 = tslib_1.__importDefault(require("../NavigationPopup/NavigationPopup"));
+const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+    const { text, icon, items } = data, popupProps = tslib_1.__rest(data, ["text", "icon", "items"]);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(NavigationItem_1.default, { onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon } }),
+        isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+};
+exports.default = NavigationDropdown;

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

@@ -0,0 +1,11 @@
+.pc-navigation-list-item__slider-container {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.pc-navigation-list-item__slider {
+  width: 100%;
+  height: 2px;
+  background-color: var(--yc-color-text-link);
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClassNameProps, NavigationItemModel } from '../../../models';
+import { ItemColumnName } from '../../constants';
+type NavigationListItemProps = {
+    item: NavigationItemModel;
+    index: number;
+    column: ItemColumnName;
+    activeItemId?: string;
+    itemPositions?: number[];
+    itemRefs?: React.MutableRefObject<(HTMLLIElement | null)[]>;
+    highlightActiveItem?: boolean;
+    hidePopup: () => void;
+    onActiveItemChange: (id?: string) => void;
+} & ClassNameProps;
+export declare const NavigationListItem: ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationListItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../utils");
+const models_1 = require("../../../models");
+const utils_2 = require("../../utils");
+const NavigationDropdownItem_1 = tslib_1.__importDefault(require("../NavigationDropdownItem/NavigationDropdownItem"));
+const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const b = (0, utils_1.block)('navigation');
+const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }) => {
+    var _a;
+    const ref = (0, react_1.useRef)(null);
+    const id = `${column}-${index}`;
+    const isActive = id === activeItemId;
+    const onClick = (0, utils_2.getItemClickHandler)({
+        column,
+        index,
+        activeItemId,
+        onActiveItemChange,
+    });
+    return (react_1.default.createElement("li", { ref: itemRefs ? (el) => itemRefs.current.push(el) : ref, className: className },
+        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { data: item, onClick: onClick, isActive: isActive, position: (itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions[index]) || ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0, hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { data: item, onClick: onClick })),
+        highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
+            react_1.default.createElement("div", { className: b('slider') })))));
+};
+exports.NavigationListItem = NavigationListItem;

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

@@ -0,0 +1,6 @@
+export declare enum ItemColumnName {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom"
+}

package/build/cjs/navigation/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemColumnName = void 0;
+var ItemColumnName;
+(function (ItemColumnName) {
+    ItemColumnName["Left"] = "left";
+    ItemColumnName["Right"] = "right";
+    ItemColumnName["Top"] = "top";
+    ItemColumnName["Bottom"] = "bottom";
+})(ItemColumnName = exports.ItemColumnName || (exports.ItemColumnName = {}));

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

@@ -0,0 +1,10 @@
+import { MouseEventHandler } from 'react';
+import { ItemColumnName } from './constants';
+type GetItemClickHandlerArgs = {
+    column: ItemColumnName;
+    index: number;
+    activeItemId?: string;
+    onActiveItemChange: (id?: string) => void;
+};
+export declare const getItemClickHandler: ({ column, index, onActiveItemChange, }: GetItemClickHandlerArgs) => MouseEventHandler;
+export {};

package/build/cjs/navigation/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemClickHandler = void 0;
+const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }) => (e) => {
+    const id = `${column}-${index}`;
+    e.stopPropagation();
+    onActiveItemChange(id === activeItemId ? undefined : `${column}-${index}`);
+};
+exports.getItemClickHandler = getItemClickHandler;

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

@@ -41,6 +41,8 @@ unpredictable css rules order in build */
 .pc-header__right {
   flex: 0;
   justify-content: flex-end;
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }
 .pc-header__navigation-container {
   display: flex;
@@ -53,6 +55,9 @@ unpredictable css rules order in build */
 .pc-header__buttons {
   display: flex;
   align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 @media (max-width: 768px) {
   .pc-header__buttons {
@@ -62,6 +67,24 @@ unpredictable css rules order in build */
 .pc-header__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
+.pc-header__buttons-item {
+  position: relative;
+  height: var(--header-height);
+  line-height: var(--header-height);
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.utilityfocus .pc-header__buttons-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-header__buttons-item:hover, .pc-header__buttons-item:active {
+  color: var(--yc-color-text-link);
+}
+.pc-header__buttons-item:not(:last-child) {
+  margin-right: 20px;
+}
 .pc-header__button {
   margin-top: 0;
 }

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

@@ -3,11 +3,12 @@ import { block } from '../../../utils';
 import { Col, Grid, Row } from '../../../grid';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import Control from '../../../components/Control/Control';
+import { NavigationClose, NavigationOpen } from '../../../icons';
+import { ItemColumnName } from '../../constants';
 import Navigation from '../Navigation/Navigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
-import NavigationItem from '../NavigationItem/NavigationItem';
 import Logo from '../Logo/Logo';
-import { NavigationClose, NavigationOpen } from '../../../icons';
+import { NavigationListItem } from '../NavigationListItem/NavigationListItem';
 import './Header.css';
 const b = block('header');
 const ICON_SIZE = 36;
@@ -24,10 +25,13 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
 export const Header = ({ data, logo }) => {
     const { leftItems, rightItems } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
-    const [activeItemIndex, setActiveItemIndex] = useState(-1);
-    const onActiveItemChange = useCallback((index) => {
-        setActiveItemIndex(index);
+    const [activeItemId, setactiveItemId] = useState(undefined);
+    const onActiveItemChange = useCallback((id) => {
+        setactiveItemId(id);
     }, []);
+    const hidePopup = useCallback(() => {
+        onActiveItemChange();
+    }, [onActiveItemChange]);
     const onSidebarOpenedChange = useCallback((isOpen) => {
         setIsSidebarOpened(isOpen);
     }, []);
@@ -41,11 +45,11 @@ export const Header = ({ data, logo }) => {
                     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(Navigation, { className: b('navigation'), links: leftItems, activeItemId: activeItemId, 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 })))))),
+                        rightItems && (React.createElement("ul", { className: b('buttons') }, rightItems.map((button, index) => (React.createElement(NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
                     React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
-                        React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
+                        React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };
 export default Header;

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

@@ -24,7 +24,10 @@ unpredictable css rules order in build */
 .pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.pc-mobile-navigation__links {
+.pc-mobile-navigation__nav {
+  margin-bottom: 24px;
+}
+.pc-mobile-navigation__rows {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -33,7 +36,7 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.pc-mobile-navigation__links-item:not(:last-child) {
+.pc-mobile-navigation__rows-item:not(:last-child) {
   margin-bottom: 24px;
 }
 .pc-mobile-navigation__dropdown-item:not(:last-child) {

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

@@ -6,9 +6,9 @@ export interface MobileNavigationProps {
     isOpened?: boolean;
     topItems?: NavigationItemModel[];
     bottomItems?: NavigationItemModel[];
-    activeItemIndex: number;
+    activeItemId?: string;
     onClose: () => void;
-    onActiveItemChange: (index: number) => void;
+    onActiveItemChange: (id?: string) => void;
 }
 declare const MobileNavigation: React.FC<MobileNavigationProps>;
 export default MobileNavigation;

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

@@ -3,6 +3,7 @@ import { Popup, Portal } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import Foldable from '../../../components/Foldable/Foldable';
 import { NavigationItemType } from '../../../models';
+import { ItemColumnName } from '../../constants';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './MobileNavigation.css';
 const b = block('mobile-navigation');
@@ -12,32 +13,31 @@ const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = fals
         React.createElement(NavigationItem, { data: data, onClick: onToggle, isOpened: isOpened }),
         isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, className: b('popup') }, data.items.map((item) => (React.createElement(NavigationItem, { key: item.text, data: item, className: b('dropdown-item'), onClick: onItemClick })))))));
 };
-const MobileNavigationItem = ({ link, index, isActive, onActiveItemChange, onClose, }) => {
+const MobileNavigationItem = ({ item, index, isOpened, activeItemId, onActiveItemChange, column, onClose, }) => {
+    const id = `${column}-${index}`;
+    const isActive = id === activeItemId && isOpened;
     const toggleActive = useCallback((e) => {
         e.stopPropagation();
         if (onActiveItemChange) {
-            onActiveItemChange(isActive ? -1 : index);
+            onActiveItemChange(isActive ? undefined : `${column}-${index}`);
         }
-    }, [isActive, index, onActiveItemChange]);
+    }, [onActiveItemChange, isActive, column, index]);
     const onItemClick = useCallback((e) => {
         toggleActive(e);
         onClose();
     }, [toggleActive, onClose]);
-    return (React.createElement("li", { key: index, className: b('links-item') }, link.type === NavigationItemType.Dropdown ? (React.createElement(MobileNavigationDropdown, { data: link, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (React.createElement(NavigationItem, { data: link, onClick: onItemClick }))));
+    return (React.createElement("li", { key: index, className: b('rows-item') }, item.type === NavigationItemType.Dropdown ? (React.createElement(MobileNavigationDropdown, { data: item, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (React.createElement(NavigationItem, { data: item, onClick: onItemClick }))));
 };
 const MobileNavigation = (props) => {
     if (typeof window === 'undefined') {
         return null;
     }
-    const { isOpened, topItems, bottomItems, activeItemIndex, onActiveItemChange, onClose } = props;
+    const { isOpened, topItems, bottomItems, activeItemId, onActiveItemChange, onClose } = props;
     return (React.createElement(Portal, null,
         React.createElement(Foldable, { key: topItems === null || topItems === void 0 ? void 0 : topItems.length, className: b(), isOpened: Boolean(isOpened) },
             React.createElement("div", { className: b('wrapper') },
-                React.createElement("nav", null,
-                    React.createElement("ul", { className: b('links') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => {
-                        const isActive = index === activeItemIndex;
-                        return (React.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.createElement(NavigationItem, { key: item.text, data: item, className: b('button') })))))));
+                React.createElement("nav", { className: b('nav') },
+                    React.createElement("ul", { className: b('rows') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => (React.createElement(MobileNavigationItem, { key: index, item: link, column: ItemColumnName.Top, index: index, isOpened: isOpened, activeItemId: activeItemId, onClose: onClose, onActiveItemChange: onActiveItemChange }))))),
+                React.createElement("ul", { className: b('rows') }, bottomItems === null || bottomItems === void 0 ? void 0 : bottomItems.map((item, index) => (React.createElement(MobileNavigationItem, { key: index, item: item, column: ItemColumnName.Bottom, index: index, isOpened: isOpened, activeItemId: activeItemId, onClose: onClose, onActiveItemChange: onActiveItemChange }))))))));
 };
 export default MobileNavigation;

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

@@ -29,15 +29,4 @@ unpredictable css rules order in build */
 }
 .pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;
-}
-.pc-navigation__slider-container {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.pc-navigation__slider {
-  width: 100%;
-  height: 2px;
-  background-color: var(--yc-color-text-link);
 }

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

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

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

@@ -1,32 +1,20 @@
-import { __rest } from "tslib";
 import _ from 'lodash';
-import React, { Fragment, useState, useEffect, useCallback, useContext, useRef, } from 'react';
+import React, { useState, useEffect, useCallback, useContext, useRef } from 'react';
 import { block } from '../../../utils';
 import OverflowScroller from '../../../components/OverflowScroller/OverflowScroller';
-import { NavigationItemType, } from '../../../models/navigation';
-import NavigationPopup from '../NavigationPopup/NavigationPopup';
-import NavigationItem from '../NavigationItem/NavigationItem';
 import { LocationContext } from '../../../context/locationContext';
+import { ItemColumnName } from '../../constants';
+import { NavigationListItem } from '../NavigationListItem/NavigationListItem';
 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 Navigation = ({ className, onActiveItemChange, links, activeItemId, highlightActiveItem, }) => {
     const { asPath, pathname } = useContext(LocationContext);
     const itemRefs = useRef([]);
     const [itemPositions, setItemPosition] = useState([]);
     const [lastLeftScroll, setLastLeftScroll] = useState(0);
     const hidePopup = useCallback(() => {
-        onActiveItemChange(-1);
+        onActiveItemChange();
     }, [onActiveItemChange]);
-    const getItemClickHandler = useCallback((index) => (e) => {
-        e.stopPropagation();
-        onActiveItemChange(index === activeItemIndex ? -1 : index);
-    }, [activeItemIndex, onActiveItemChange]);
     const calculateItemPositions = useCallback(() => {
         if (itemRefs.current.length) {
             const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
@@ -56,13 +44,6 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     }, [hidePopup, asPath, pathname]);
     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') })))));
-            })))));
+            React.createElement("ul", { className: b('links') }, links.map((link, index) => (React.createElement(NavigationListItem, { key: index, className: b('links-item'), item: link, itemRefs: itemRefs, index: index, activeItemId: activeItemId, highlightActiveItem: highlightActiveItem, hidePopup: hidePopup, itemPositions: itemPositions, column: ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
 };
 export default Navigation;

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

@@ -0,0 +1,11 @@
+import React, { MouseEventHandler } from 'react';
+import { NavigationDropdownItem } from '../../../models';
+export interface NavigationDropdownProps {
+    data: NavigationDropdownItem;
+    onClick: MouseEventHandler;
+    isActive: boolean;
+    position: number;
+    hidePopup: () => void;
+}
+declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
+export default NavigationDropdown;

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

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import React, { Fragment } from 'react';
+import { NavigationItemType } from '../../../models';
+import NavigationItem from '../NavigationItem/NavigationItem';
+import NavigationPopup from '../NavigationPopup/NavigationPopup';
+const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+    const { text, icon, items } = data, popupProps = __rest(data, ["text", "icon", "items"]);
+    return (React.createElement(Fragment, null,
+        React.createElement(NavigationItem, { onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown, icon } }),
+        isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+};
+export default NavigationDropdown;

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

@@ -0,0 +1,11 @@
+.pc-navigation-list-item__slider-container {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.pc-navigation-list-item__slider {
+  width: 100%;
+  height: 2px;
+  background-color: var(--yc-color-text-link);
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ClassNameProps, NavigationItemModel } from '../../../models';
+import { ItemColumnName } from '../../constants';
+import './NavigationListItem.css';
+type NavigationListItemProps = {
+    item: NavigationItemModel;
+    index: number;
+    column: ItemColumnName;
+    activeItemId?: string;
+    itemPositions?: number[];
+    itemRefs?: React.MutableRefObject<(HTMLLIElement | null)[]>;
+    highlightActiveItem?: boolean;
+    hidePopup: () => void;
+    onActiveItemChange: (id?: string) => void;
+} & ClassNameProps;
+export declare const NavigationListItem: ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import React, { useRef } from 'react';
+import { block } from '../../../utils';
+import { NavigationItemType } from '../../../models';
+import { getItemClickHandler } from '../../utils';
+import NavigationDropdownItem from '../NavigationDropdownItem/NavigationDropdownItem';
+import NavigationItem from '../NavigationItem/NavigationItem';
+import './NavigationListItem.css';
+const b = block('navigation');
+export const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }) => {
+    var _a;
+    const ref = useRef(null);
+    const id = `${column}-${index}`;
+    const isActive = id === activeItemId;
+    const onClick = getItemClickHandler({
+        column,
+        index,
+        activeItemId,
+        onActiveItemChange,
+    });
+    return (React.createElement("li", { ref: itemRefs ? (el) => itemRefs.current.push(el) : ref, className: className },
+        item.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdownItem, { data: item, onClick: onClick, isActive: isActive, position: (itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions[index]) || ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0, hidePopup: hidePopup })) : (React.createElement(NavigationItem, { data: item, onClick: onClick })),
+        highlightActiveItem && isActive && (React.createElement("div", { className: b('slider-container') },
+            React.createElement("div", { className: b('slider') })))));
+};

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

@@ -0,0 +1,6 @@
+export declare enum ItemColumnName {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom"
+}

package/build/esm/navigation/constants.js

@@ -0,0 +1,7 @@
+export var ItemColumnName;
+(function (ItemColumnName) {
+    ItemColumnName["Left"] = "left";
+    ItemColumnName["Right"] = "right";
+    ItemColumnName["Top"] = "top";
+    ItemColumnName["Bottom"] = "bottom";
+})(ItemColumnName || (ItemColumnName = {}));

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

@@ -0,0 +1,10 @@
+import { MouseEventHandler } from 'react';
+import { ItemColumnName } from './constants';
+type GetItemClickHandlerArgs = {
+    column: ItemColumnName;
+    index: number;
+    activeItemId?: string;
+    onActiveItemChange: (id?: string) => void;
+};
+export declare const getItemClickHandler: ({ column, index, onActiveItemChange, }: GetItemClickHandlerArgs) => MouseEventHandler;
+export {};

package/build/esm/navigation/utils.js

@@ -0,0 +1,5 @@
+export const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }) => (e) => {
+    const id = `${column}-${index}`;
+    e.stopPropagation();
+    onActiveItemChange(id === activeItemId ? undefined : `${column}-${index}`);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.22.1",
+  "version": "1.24.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {