@gravity-ui/page-constructor 3.11.0 → 3.12.1

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavigationLinkItem } from '../../../../../models';
-import { NavigationItemProps } from '../../NavigationItem';
+import { NavigationItemProps } from '../../../../models';
 type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 export declare const NavigationLink: React.FC<NavigationLinkProps>;
 export {};

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationList = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const NavigationListItem_1 = tslib_1.__importDefault(require("../NavigationListItem/NavigationListItem"));
+const NavigationList = (_a) => {
+    var { className, itemClassName, items } = _a, props = tslib_1.__rest(_a, ["className", "itemClassName", "items"]);
+    return (react_1.default.createElement("ul", { className: className }, items.map((item, index) => (react_1.default.createElement(NavigationListItem_1.default, Object.assign({ key: index, index: index, data: item, className: itemClassName }, props))))));
+};
+exports.NavigationList = NavigationList;

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

@@ -1,13 +1,4 @@
-import { ClassNameProps, NavigationItemModel } from '../../../models';
-import { ItemColumnName } from '../../constants';
-type NavigationListItemProps = {
-    item: NavigationItemModel;
-    index: number;
-    column: ItemColumnName;
-    activeItemId?: string;
-    highlightActiveItem?: boolean;
-    hidePopup: () => void;
-    onActiveItemChange: (id?: string) => void;
-} & ClassNameProps;
-export declare const NavigationListItem: ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
-export {};
+import React from 'react';
+import { NavigationListItemProps } from '../../models';
+declare const NavigationListItem: React.FC<NavigationListItemProps>;
+export default NavigationListItem;

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

@@ -1,26 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationListItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const models_1 = require("../../../models");
-const utils_1 = require("../../../utils");
-const utils_2 = require("../../utils");
-const NavigationDropdownItem_1 = tslib_1.__importDefault(require("../NavigationDropdownItem/NavigationDropdownItem"));
+const utils_1 = require("../../utils");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
-const b = (0, utils_1.block)('navigation-list-item');
-const NavigationListItem = ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }) => {
+const NavigationListItem = (_a) => {
+    var { column, index, activeItemId, onActiveItemChange } = _a, props = tslib_1.__rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
-    const onClick = (0, utils_2.getItemClickHandler)({
+    const onClick = (0, utils_1.getItemClickHandler)({
         column,
         index,
         activeItemId,
         onActiveItemChange,
     });
-    return (react_1.default.createElement("li", { className: b(null, className) },
-        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { className: b('content'), data: item, onClick: onClick, isActive: isActive, hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { className: b('content'), data: item, onClick: onClick })),
-        highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
-            react_1.default.createElement("div", { className: b('slider') })))));
+    return (react_1.default.createElement(NavigationItem_1.default, Object.assign({ isActive: isActive, onClick: onClick, hidePopup: onActiveItemChange }, props)));
 };
-exports.NavigationListItem = NavigationListItem;
+exports.default = NavigationListItem;

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

@@ -14,13 +14,14 @@ unpredictable css rules order in build */
   background: var(--yc-color-base-float);
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
-@media (max-width: 768px) {
-  .pc-navigation-popup {
-    display: none;
-  }
+.pc-navigation-popup__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .pc-navigation-popup__link {
   height: 36px;
+  line-height: 20px;
   padding: 8px 12px;
   border-radius: 8px;
 }

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

@@ -1,11 +1,4 @@
 import React from 'react';
-import { NavigationLinkItem } from '../../../models';
-export interface NavigationPopupProps {
-    open: boolean;
-    items: NavigationLinkItem[];
-    onClose: () => void;
-    className?: string;
-    anchorRef: React.RefObject<Element>;
-}
+import { NavigationPopupProps } from '../../models';
 export declare const NavigationPopup: React.FC<NavigationPopupProps>;
 export default NavigationPopup;

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

@@ -5,15 +5,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
+const models_1 = require("../../models");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const b = (0, utils_1.block)('navigation-popup');
 const OFFSET_RESET = [0, 0];
-const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => {
-    return (react_1.default.createElement(uikit_1.Popup
+const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (react_1.default.createElement(uikit_1.Popup
+// Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+, { 
     // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-    , { 
-        // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
-        anchorRef: open ? anchorRef : undefined, className: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
-};
+    anchorRef: open ? anchorRef : undefined, className: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET },
+    react_1.default.createElement("ul", { className: b('list') }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item, menuLayout: models_1.NavigationLayout.Dropdown }))))));
 exports.NavigationPopup = NavigationPopup;
 exports.default = exports.NavigationPopup;

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../../utils");
-const Header_1 = tslib_1.__importDefault(require("../../components/Header/Header"));
+const Navigation_1 = tslib_1.__importDefault(require("../../components/Navigation/Navigation"));
 const b = (0, utils_1.block)('layout');
 const Layout = ({ children, navigation }) => (react_1.default.createElement("div", { className: b() },
-    navigation && react_1.default.createElement(Header_1.default, { data: navigation.header, logo: navigation.logo }),
+    navigation && react_1.default.createElement(Navigation_1.default, { data: navigation.header, logo: navigation.logo }),
     react_1.default.createElement("main", { className: b('content') }, children)));
 exports.default = Layout;

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

@@ -0,0 +1,63 @@
+import { MouseEventHandler } from 'react';
+import { ClassNameProps, NavigationItemData, NavigationItemModel, NavigationLinkItem, ThemedNavigationLogoData } from '../models';
+export interface MobileMenuButtonProps {
+    isSidebarOpened: boolean;
+    onSidebarOpenedChange: (arg: boolean) => void;
+}
+export declare enum ItemColumnName {
+    Left = "left",
+    Right = "right",
+    Top = "top",
+    Bottom = "bottom"
+}
+export declare enum NavigationLayout {
+    Desktop = "desktop",
+    Mobile = "mobile",
+    Dropdown = "dropdown"
+}
+export interface ActiveItemProps {
+    activeItemId?: string;
+    onActiveItemChange: (id?: string) => void;
+}
+export interface MenuLayoutProps {
+    menuLayout?: NavigationLayout;
+}
+export interface NavigationItemProps extends ClassNameProps, MenuLayoutProps {
+    data: NavigationItemData;
+    onClick?: MouseEventHandler;
+    isActive?: boolean;
+    isTopLevel?: boolean;
+    hidePopup?: () => void;
+}
+export interface NavigationListItemProps extends MenuLayoutProps, ActiveItemProps, ClassNameProps {
+    data: NavigationItemModel;
+    column: ItemColumnName;
+    index: number;
+}
+export interface NavigationListProps extends Pick<NavigationListItemProps, 'column'>, MenuLayoutProps, ActiveItemProps, ClassNameProps {
+    items: NavigationItemModel[];
+    itemClassName?: string;
+}
+export interface ItemsWrapperProps extends Pick<NavigationListProps, 'items'>, ActiveItemProps, ClassNameProps {
+}
+export interface DesktopNavigationProps extends MobileMenuButtonProps, ActiveItemProps {
+    logo: ThemedNavigationLogoData;
+    leftItemsWithIconSize: NavigationItemModel[];
+    rightItemsWithIconSize?: NavigationItemModel[];
+}
+export interface MobileNavigationProps extends ClassNameProps, ActiveItemProps {
+    isOpened?: boolean;
+    topItems?: NavigationItemModel[];
+    bottomItems?: NavigationItemModel[];
+}
+export interface NavigationProps extends MobileMenuButtonProps, ActiveItemProps {
+    logo: ThemedNavigationLogoData;
+    leftItemsWithIconSize: NavigationItemModel[];
+    rightItemsWithIconSize?: NavigationItemModel[];
+}
+export interface NavigationPopupProps extends ClassNameProps {
+    open: boolean;
+    items: NavigationLinkItem[];
+    onClose: () => void;
+    anchorRef: React.RefObject<Element>;
+}

package/build/cjs/navigation/{constants.js → models.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemColumnName = void 0;
+exports.NavigationLayout = exports.ItemColumnName = void 0;
 var ItemColumnName;
 (function (ItemColumnName) {
     ItemColumnName["Left"] = "left";
@@ -8,3 +8,9 @@ var ItemColumnName;
     ItemColumnName["Top"] = "top";
     ItemColumnName["Bottom"] = "bottom";
 })(ItemColumnName = exports.ItemColumnName || (exports.ItemColumnName = {}));
+var NavigationLayout;
+(function (NavigationLayout) {
+    NavigationLayout["Desktop"] = "desktop";
+    NavigationLayout["Mobile"] = "mobile";
+    NavigationLayout["Dropdown"] = "dropdown";
+})(NavigationLayout = exports.NavigationLayout || (exports.NavigationLayout = {}));

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

@@ -1,5 +1,6 @@
 import { MouseEventHandler } from 'react';
-import { ItemColumnName } from './constants';
+import { NavigationButtonItem, NavigationDropdownItem, NavigationItemModel, NavigationItemType } from '../models';
+import { ItemColumnName } from './models';
 type GetItemClickHandlerArgs = {
     column: ItemColumnName;
     index: number;
@@ -7,4 +8,13 @@ type GetItemClickHandlerArgs = {
     onActiveItemChange: (id?: string) => void;
 };
 export declare const getItemClickHandler: ({ column, index, onActiveItemChange, }: GetItemClickHandlerArgs) => MouseEventHandler;
+export declare function getNavigationItemWithIconSize(iconSize?: number): (item: NavigationItemModel) => NavigationButtonItem | NavigationDropdownItem | {
+    type: NavigationItemType.Link;
+    url: string;
+    arrow?: boolean | undefined;
+    target?: string | undefined;
+    text: string;
+    icon?: import("../models").ImageProps | undefined;
+    iconSize?: number | undefined;
+};
 export {};

package/build/cjs/navigation/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemClickHandler = void 0;
+exports.getNavigationItemWithIconSize = exports.getItemClickHandler = void 0;
+const models_1 = require("../models");
 const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }) => (e) => {
     const id = `${column}-${index}`;
     if (e) {
@@ -9,3 +10,20 @@ const getItemClickHandler = ({ column, index, onActiveItemChange, activeItemId }
     onActiveItemChange(id === activeItemId ? undefined : `${column}-${index}`);
 };
 exports.getItemClickHandler = getItemClickHandler;
+const isButtonItem = (item) => item.type === models_1.NavigationItemType.Button;
+const isDropdownItem = (item) => item.type === models_1.NavigationItemType.Dropdown;
+const iconSizeKey = 'iconSize';
+function getNavigationItemWithIconSize(iconSize = 20) {
+    const getItem = (item) => {
+        const newItem = Object.assign({}, item);
+        if ('items' in newItem && isDropdownItem(newItem)) {
+            newItem.items = newItem.items.map(getItem);
+        }
+        if (!(iconSizeKey in newItem) && !isButtonItem(newItem)) {
+            newItem.iconSize = iconSize;
+        }
+        return newItem;
+    };
+    return getItem;
+}
+exports.getNavigationItemWithIconSize = getNavigationItemWithIconSize;

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

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

package/build/esm/hooks/useHeightCalculator.js

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

package/build/esm/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/{cjs/navigation/components/Header/Header.css → esm/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/esm/navigation/components/DesktopNavigation/DesktopNavigation.d.ts

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import OverflowScroller from '../../../components/OverflowScroller/OverflowScroller';
+import { block } from '../../../utils';
+import { ItemColumnName, NavigationLayout } from '../../models';
+import Logo from '../Logo/Logo';
+import { MobileMenuButton } from '../MobileMenuButton/MobileMenuButton';
+import { NavigationList } from '../NavigationList/NavigationList';
+import './DesktopNavigation.css';
+const b = block('desktop-navigation');
+const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, isSidebarOpened, onSidebarOpenedChange, onActiveItemChange, activeItemId, }) => (React.createElement("div", { className: b('wrapper') },
+    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(OverflowScroller, { className: b('navigation'), onScrollStart: onActiveItemChange },
+            React.createElement(NavigationList, { items: leftItemsWithIconSize, onActiveItemChange: onActiveItemChange, className: b('links'), itemClassName: b('item'), column: ItemColumnName.Left, activeItemId: activeItemId, menuLayout: NavigationLayout.Desktop }))),
+    React.createElement("div", { className: b('right') },
+        React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+        rightItemsWithIconSize && (React.createElement(NavigationList, { onActiveItemChange: onActiveItemChange, column: ItemColumnName.Right, items: rightItemsWithIconSize, activeItemId: activeItemId, className: b('buttons'), itemClassName: b('item'), menuLayout: NavigationLayout.Desktop })))));
+export default DesktopNavigation;

package/build/esm/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/esm/navigation/components/MobileMenuButton/MobileMenuButton.d.ts

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Control } from '../../../components';
+import { NavigationClose, NavigationOpen } from '../../../icons';
+import { block } from '../../../utils';
+import './MobileMenuButton.css';
+const b = block('mobile-menu-button');
+const ICON_SIZE = 36;
+export const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => (React.createElement(Control, { className: b(), onClick: (e) => {
+        e.stopPropagation();
+        onSidebarOpenedChange(!isSidebarOpened);
+    }, size: "l", icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: ICON_SIZE }));

package/build/esm/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/esm/navigation/components/MobileNavigation/MobileNavigation.d.ts

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

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

@@ -1,43 +1,21 @@
-import React, { useCallback, useRef } from 'react';
-import { Popup, Portal } from '@gravity-ui/uikit';
+import { __rest } from "tslib";
+import React from 'react';
+import { Portal } from '@gravity-ui/uikit';
 import Foldable from '../../../components/Foldable/Foldable';
-import { NavigationItemType } from '../../../models';
 import { block } from '../../../utils';
-import { ItemColumnName } from '../../constants';
-import NavigationItem from '../NavigationItem/NavigationItem';
+import { ItemColumnName, NavigationLayout } from '../../models';
+import { NavigationList } from '../NavigationList/NavigationList';
 import './MobileNavigation.css';
 const b = block('mobile-navigation');
-const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
-    const ref = useRef(null);
-    return (React.createElement("div", { ref: ref, className: b('dropdown') },
-        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 = ({ 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 ? undefined : `${column}-${index}`);
-        }
-    }, [onActiveItemChange, isActive, column, index]);
-    const onItemClick = useCallback((e) => {
-        toggleActive(e);
-        onClose();
-    }, [toggleActive, onClose]);
-    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) => {
+const MobileNavigation = (_a) => {
+    var { isOpened, topItems, bottomItems } = _a, props = __rest(_a, ["isOpened", "topItems", "bottomItems"]);
     if (typeof window === 'undefined') {
         return null;
     }
-    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", { 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 }))))))));
+                topItems && (React.createElement(NavigationList, Object.assign({ className: b('rows'), items: topItems, column: ItemColumnName.Top, menuLayout: NavigationLayout.Mobile }, props))),
+                bottomItems && (React.createElement(NavigationList, Object.assign({ className: b('rows'), items: bottomItems, column: ItemColumnName.Bottom, menuLayout: NavigationLayout.Mobile }, props)))))));
 };
 export default MobileNavigation;