@gravity-ui/page-constructor 3.11.0 → 3.12.1

package/README.md

@@ -1,11 +1,5 @@
 # @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/page-constructor/)
 
-## Install
-
-```shell
-npm install @gravity-ui/page-constructor
-```
-
 ## Page constructor
 
 `Page-constructor` is a library for rendering web pages or their parts based on `JSON` data (support for `YAML` format is to be added later).
@@ -14,6 +8,12 @@ When creating pages, component-based approach is used: a page is built using a s
 
 For the format of input data and list of available blocks, see the [documentation](https://preview.yandexcloud.dev/page-constructor/?path=/story/information--blocks).
 
+## Install
+
+```shell
+npm install @gravity-ui/page-constructor
+```
+
 ### Getting started
 
 The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:

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

@@ -23,8 +23,9 @@ const Image = (props) => {
     (0, react_1.useEffect)(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
-            window.addEventListener('scroll', lodash_1.default.debounce(handleScroll, 5), { passive: true });
-            return () => window.removeEventListener('scroll', lodash_1.default.debounce(handleScroll, 5));
+            const debouncedHandler = lodash_1.default.debounce(handleScroll, 5);
+            window.addEventListener('scroll', debouncedHandler, { passive: true });
+            return () => window.removeEventListener('scroll', debouncedHandler);
         }
         return () => { };
     });

package/build/cjs/hooks/useHeightCalculator.js

@@ -16,7 +16,7 @@ const useHeightCalculator = (containerRef, options = DEFAULT_OPTIONS) => {
     }, [containerRef, containerHeight, setContainerHeight]);
     (0, react_1.useEffect)(() => {
         const handleResize = lodash_1.default.debounce(calculateContainerHeight, recalculateOnResizeDelay);
-        calculateContainerHeight();
+        handleResize();
         window.addEventListener('resize', handleResize, { passive: true });
         return () => {
             window.removeEventListener('resize', handleResize);

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

@@ -44,6 +44,8 @@ export interface NavigationButtonItem extends ButtonProps {
 export interface NavigationDropdownItem extends NavigationItemBase {
     type: NavigationItemType.Dropdown;
     items: NavigationLinkItem[];
+    hidePopup: () => void;
+    isActive: boolean;
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
@@ -51,8 +53,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
-export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;
 export interface NavigationLogoData {
     icon: ImageProps;
     text?: string;

package/build/{esm/navigation/components/Header/Header.css → cjs/navigation/components/DesktopNavigation/DesktopNavigation.css}

@@ -1,52 +1,39 @@
 /* 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);
-}
-.pc-header_with-border {
-  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
-}
-.pc-header__wrapper {
+.pc-desktop-navigation__wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: var(--header-height);
 }
 @media (min-width: 769px) {
-  .pc-header__mobile-menu-button.pc-header__mobile-menu-button {
+  .pc-desktop-navigation__mobile-menu-button.pc-desktop-navigation__mobile-menu-button {
     display: none;
   }
 }
 
-.pc-header__navigation, .pc-header__left, .pc-header__right {
+.pc-desktop-navigation__navigation, .pc-desktop-navigation__left, .pc-desktop-navigation__right {
   display: flex;
   align-items: center;
 }
-.pc-header__navigation.pc-header__navigation {
+.pc-desktop-navigation__navigation.pc-desktop-navigation__navigation {
   position: relative;
   flex: 1 0 0;
   justify-content: flex-start;
 }
 @media (max-width: 768px) {
-  .pc-header__navigation.pc-header__navigation {
+  .pc-desktop-navigation__navigation.pc-desktop-navigation__navigation {
     display: none;
   }
 }
 
-.pc-header__right {
+.pc-desktop-navigation__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 {
+.pc-desktop-navigation__navigation-container {
   display: flex;
   overflow-x: hidden;
   flex: 1 0 0;
@@ -54,7 +41,14 @@ unpredictable css rules order in build */
   align-items: center;
   margin-right: 32px;
 }
-.pc-header__buttons {
+.pc-desktop-navigation__button {
+  margin-top: 0;
+}
+.pc-desktop-navigation__logo {
+  margin: 0 32px 0 0;
+  cursor: pointer;
+}
+.pc-desktop-navigation__buttons, .pc-desktop-navigation__links {
   display: flex;
   align-items: center;
   margin: 0;
@@ -62,39 +56,37 @@ unpredictable css rules order in build */
   list-style: none;
 }
 @media (max-width: 768px) {
-  .pc-header__buttons {
+  .pc-desktop-navigation__buttons {
     display: none;
   }
 }
-.pc-header__buttons > *:not(:last-child) {
+.pc-desktop-navigation__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
-.pc-header__buttons-item {
+.pc-desktop-navigation__links {
   position: relative;
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }
-.pc-header__buttons-item:not(:last-child) {
-  margin-right: 20px;
-}
-.pc-header__button {
-  margin-top: 0;
+.pc-desktop-navigation__item {
+  position: relative;
 }
-.pc-header__logo {
-  margin: 0 32px 0 0;
-  cursor: pointer;
+.pc-desktop-navigation__item:not(:last-child) {
+  margin-right: 20px;
 }
 @media (max-width: 768px) {
-  .pc-header__navigation-container {
+  .pc-desktop-navigation__navigation-container {
     justify-content: flex-end;
   }
-  .pc-header__left {
+  .pc-desktop-navigation__left {
     flex: 1 0 0;
   }
 }
 @media (max-width: 576px) {
-  .pc-header__navigation-container {
+  .pc-desktop-navigation__navigation-container {
     margin-right: 12px;
   }
-  .pc-header__logo {
+  .pc-desktop-navigation__logo {
     margin-right: 0;
   }
 }

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DesktopNavigationProps } from '../../models';
+declare const DesktopNavigation: React.FC<DesktopNavigationProps>;
+export default DesktopNavigation;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
+const utils_1 = require("../../../utils");
+const models_1 = require("../../models");
+const Logo_1 = tslib_1.__importDefault(require("../Logo/Logo"));
+const MobileMenuButton_1 = require("../MobileMenuButton/MobileMenuButton");
+const NavigationList_1 = require("../NavigationList/NavigationList");
+const b = (0, utils_1.block)('desktop-navigation');
+const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, isSidebarOpened, onSidebarOpenedChange, onActiveItemChange, activeItemId, }) => (react_1.default.createElement("div", { 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(OverflowScroller_1.default, { className: b('navigation'), onScrollStart: onActiveItemChange },
+            react_1.default.createElement(NavigationList_1.NavigationList, { items: leftItemsWithIconSize, onActiveItemChange: onActiveItemChange, className: b('links'), itemClassName: b('item'), column: models_1.ItemColumnName.Left, activeItemId: activeItemId, menuLayout: models_1.NavigationLayout.Desktop }))),
+    react_1.default.createElement("div", { className: b('right') },
+        react_1.default.createElement(MobileMenuButton_1.MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+        rightItemsWithIconSize && (react_1.default.createElement(NavigationList_1.NavigationList, { onActiveItemChange: onActiveItemChange, column: models_1.ItemColumnName.Right, items: rightItemsWithIconSize, activeItemId: activeItemId, className: b('buttons'), itemClassName: b('item'), menuLayout: models_1.NavigationLayout.Desktop })))));
+exports.default = DesktopNavigation;

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

@@ -0,0 +1,7 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@media (min-width: 769px) {
+  .pc-mobile-menu-button.pc-mobile-menu-button {
+    display: none;
+  }
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MobileMenuButtonProps } from '../../models';
+export declare const MobileMenuButton: React.FC<MobileMenuButtonProps>;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileMenuButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../../components");
+const icons_1 = require("../../../icons");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('mobile-menu-button');
+const ICON_SIZE = 36;
+const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => (react_1.default.createElement(components_1.Control, { className: b(), onClick: (e) => {
+        e.stopPropagation();
+        onSidebarOpenedChange(!isSidebarOpened);
+    }, size: "l", icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: ICON_SIZE }));
+exports.MobileMenuButton = MobileMenuButton;

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

@@ -10,9 +10,16 @@ unpredictable css rules order in build */
   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);
+  max-height: calc(100vh - 2 * var(--header-height));
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }
+.pc-mobile-navigation::-webkit-scrollbar {
+  display: none;
+}
 @media (min-width: 769px) {
   .pc-mobile-navigation {
     display: none;
@@ -24,9 +31,6 @@ unpredictable css rules order in build */
 .pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.pc-mobile-navigation__nav {
-  margin-bottom: 24px;
-}
 .pc-mobile-navigation__rows {
   position: relative;
   display: flex;
@@ -35,10 +39,11 @@ unpredictable css rules order in build */
   margin: 0;
   padding: 0;
   list-style: none;
-}
-.pc-mobile-navigation__rows-item:not(:last-child) {
   margin-bottom: 24px;
 }
+.pc-mobile-navigation__rows:last-child {
+  margin-bottom: 0;
+}
 .pc-mobile-navigation__dropdown-item:not(:last-child) {
   margin-bottom: 16px;
 }

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

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

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

@@ -1,45 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const Foldable_1 = tslib_1.__importDefault(require("../../../components/Foldable/Foldable"));
-const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
-const constants_1 = require("../../constants");
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const models_1 = require("../../models");
+const NavigationList_1 = require("../NavigationList/NavigationList");
 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 = ({ 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 ? undefined : `${column}-${index}`);
-        }
-    }, [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('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) => {
+const MobileNavigation = (_a) => {
+    var { isOpened, topItems, bottomItems } = _a, props = tslib_1.__rest(_a, ["isOpened", "topItems", "bottomItems"]);
     if (typeof window === 'undefined') {
         return null;
     }
-    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", { 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 }))))))));
+                topItems && (react_1.default.createElement(NavigationList_1.NavigationList, Object.assign({ className: b('rows'), items: topItems, column: models_1.ItemColumnName.Top, menuLayout: models_1.NavigationLayout.Mobile }, props))),
+                bottomItems && (react_1.default.createElement(NavigationList_1.NavigationList, Object.assign({ className: b('rows'), items: bottomItems, column: models_1.ItemColumnName.Bottom, menuLayout: models_1.NavigationLayout.Mobile }, props)))))));
 };
 exports.default = MobileNavigation;

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

@@ -1,20 +1,15 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-}
-.pc-navigation__links {
-  position: relative;
+  position: sticky;
+  z-index: 98;
+  top: 0;
   display: flex;
+  justify-content: center;
   align-items: center;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.pc-navigation__links-item {
-  position: relative;
+  height: var(--header-height);
+  background-color: var(--yc-color-base-background);
 }
-.pc-navigation__links-item:not(:last-child) {
-  margin-right: 20px;
+.pc-navigation_with-border {
+  box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }

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

@@ -1,11 +1,8 @@
 import React from 'react';
-import { NavigationItemModel } from '../../../models/navigation';
+import { HeaderData, ThemedNavigationLogoData } from '../../../models';
 export interface NavigationProps {
-    links: NavigationItemModel[];
-    activeItemId?: string;
-    className?: string;
-    highlightActiveItem?: boolean;
-    onActiveItemChange: (id?: string) => void;
+    logo: ThemedNavigationLogoData;
+    data: HeaderData;
 }
-declare const Navigation: React.FC<NavigationProps>;
+export declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;

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

@@ -1,23 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
-const locationContext_1 = require("../../../context/locationContext");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
+const grid_1 = require("../../../grid");
 const utils_1 = require("../../../utils");
-const constants_1 = require("../../constants");
-const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
+const utils_2 = require("../../utils");
+const DesktopNavigation_1 = tslib_1.__importDefault(require("../DesktopNavigation/DesktopNavigation"));
+const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation"));
 const b = (0, utils_1.block)('navigation');
-const Navigation = ({ className, onActiveItemChange, links, activeItemId, }) => {
-    const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const hidePopup = (0, react_1.useCallback)(() => {
-        onActiveItemChange();
-    }, [onActiveItemChange]);
+const Navigation = ({ data, logo }) => {
+    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
+    const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
+    const [activeItemId, setActiveItemId] = (0, react_1.useState)(undefined);
+    const [showBorder, setShowBorder] = (0, react_1.useState)(withBorder);
+    const getNavigationItem = (0, utils_2.getNavigationItemWithIconSize)(iconSize);
+    const leftItemsWithIconSize = (0, react_1.useMemo)(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
+    const rightItemsWithIconSize = (0, react_1.useMemo)(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
+    const onActiveItemChange = (id) => {
+        setActiveItemId(id);
+    };
+    const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
     (0, react_1.useEffect)(() => {
-        hidePopup();
-    }, [hidePopup, asPath, pathname]);
-    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup },
-        react_1.default.createElement("nav", null,
-            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, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
+        const showBorderOnScroll = () => {
+            if (!showBorder) {
+                setShowBorder(window.scrollY > 0);
+            }
+        };
+        const scrollHandler = lodash_1.default.debounce(showBorderOnScroll, 20);
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => window.removeEventListener('scroll', scrollHandler);
+    });
+    return (react_1.default.createElement(grid_1.Grid, { className: b({ 'with-border': showBorder }) },
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement(grid_1.Col, null,
+                react_1.default.createElement("nav", null,
+                    react_1.default.createElement(DesktopNavigation_1.default, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                    react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
+                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })))))));
 };
-exports.default = Navigation;
+exports.Navigation = Navigation;
+exports.default = exports.Navigation;

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

@@ -0,0 +1,28 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-item {
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.pc-navigation-item:last-child {
+  margin-bottom: 0;
+}
+.utilityfocus .pc-navigation-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-item__content:hover, .pc-navigation-item__content:active {
+  color: var(--yc-color-text-link);
+}
+.pc-navigation-item_menu-layout_desktop {
+  height: var(--header-height);
+  line-height: var(--header-height);
+  margin-bottom: 0;
+}
+.pc-navigation-item_menu-layout_mobile {
+  margin-bottom: 24px;
+}
+.pc-navigation-item_menu-layout_dropdown {
+  margin-bottom: 0;
+}

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

@@ -1,10 +1,4 @@
-import React, { MouseEventHandler } from 'react';
-import { NavigationItemData } from '../../../models';
-export interface NavigationItemProps {
-    data: NavigationItemData;
-    className?: string;
-    onClick?: MouseEventHandler;
-    isOpened?: boolean;
-}
-declare const NavigationItem: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLElement>>;
+import React from 'react';
+import { NavigationItemProps } from '../../models';
+declare const NavigationItem: React.FC<NavigationItemProps>;
 export default NavigationItem;

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

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = require("lodash");
 const blockIdContext_1 = require("../../../context/blockIdContext");
 const models_1 = require("../../../models");
+const utils_1 = require("../../../utils");
 const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
 const GithubButton_1 = require("./components/GithubButton/GithubButton");
 const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
 const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
 const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
+const b = (0, utils_1.block)('navigation-item');
 const ANALYTICS_ID = 'navigation';
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -19,13 +22,19 @@ const NavigationItemsMap = {
     [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
     [models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
 };
-const NavigationItem = react_1.default.forwardRef((_a, ref) => {
-    var { data, className } = _a, props = tslib_1.__rest(_a, ["data", "className"]);
+const NavigationItem = (_a) => {
+    var { data, className, menuLayout } = _a, props = tslib_1.__rest(_a, ["data", "className", "menuLayout"]);
     const { type = models_1.NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
-    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign(Object.assign({ className }, data), props), { ref })), [className, data, props, ref]);
+    const componentProps = (0, react_1.useMemo)(() => {
+        const componentProperties = Object.assign(Object.assign({}, data), props);
+        if (type !== models_1.NavigationItemType.Dropdown) {
+            return (0, lodash_1.omit)(componentProperties, 'hidePopup', 'isActive');
+        }
+        return componentProperties;
+    }, [data, props, type]);
     return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: ANALYTICS_ID },
-        react_1.default.createElement(Component, Object.assign({}, componentProps))));
-});
-NavigationItem.displayName = 'NavigationItem';
+        react_1.default.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
+            react_1.default.createElement(Component, Object.assign({}, componentProps, { className: b('content') })))));
+};
 exports.default = NavigationItem;

package/build/cjs/navigation/components/NavigationItem/components/GithubButton/GithubButton.d.ts

@@ -1,5 +1,5 @@
 import { NavigationGithubButton } from '../../../../../models';
-import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationItemProps } from '../../../../models';
 type NavigationGithubButtonProps = NavigationItemProps & NavigationGithubButton;
 export declare const GithubButton: ({ text, url, className, label, size, icon, }: NavigationGithubButtonProps) => JSX.Element;
 export {};

package/build/cjs/navigation/components/NavigationItem/components/NavigationButton/NavigationButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ButtonProps } from '../../../../../models';
-import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationItemProps } from '../../../../models';
 type NavigationButtonProps = Pick<NavigationItemProps, 'className'> & ButtonProps;
 export declare const NavigationButton: React.FC<NavigationButtonProps>;
 export {};

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
-import { DropdownItemData } from '../../../../../models';
-import { NavigationItemProps } from '../../NavigationItem';
-export declare const NavigationDropdown: React.ForwardRefExoticComponent<NavigationItemProps & DropdownItemData & React.RefAttributes<HTMLElement>>;
+import { NavigationDropdownItem } from '../../../../../models';
+import { NavigationItemProps } from '../../../../models';
+type NavigationDropdownProps = NavigationItemProps & NavigationDropdownItem;
+export declare const NavigationDropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: NavigationDropdownProps) => JSX.Element;
+export {};

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -2,17 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationDropdown = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../../../../components");
 const utils_1 = require("../../../../../components/Media/Image/utils");
 const utils_2 = require("../../../../../utils");
+const NavigationPopup_1 = tslib_1.__importDefault(require("../../../NavigationPopup/NavigationPopup"));
 const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
-exports.NavigationDropdown = react_1.default.forwardRef(({ text, icon, isOpened, className, iconSize, onClick }, ref) => {
+const NavigationDropdown = (_a) => {
+    var { text, icon, className, iconSize, hidePopup, items, isActive } = _a, props = tslib_1.__rest(_a, ["text", "icon", "className", "iconSize", "hidePopup", "items", "isActive"]);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement("span", { ref: ref, onClick: onClick, className: b(null, className) },
-        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
-        react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
-});
-exports.NavigationDropdown.displayName = 'NavigationDropdown';
+    const anchorRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("span", Object.assign({ ref: anchorRef }, props, { className: b(null, className) }),
+            react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData, iconSize: iconSize }),
+            react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isActive })),
+        react_1.default.createElement(NavigationPopup_1.default, { open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef })));
+};
+exports.NavigationDropdown = NavigationDropdown;